在 splide 之外使用 SplideJS 箭头
问题描述 投票：0回答：3
我正在构建这个带有幻灯片的引导页面（移动视图）。 对于设计来说，将箭头放在幻灯片本身之外比尝试将箭头移动到位要容易得多。 但由于箭头位于幻灯片之外，因此它们不起作用 - 并且我不确定需要触发哪些事件才能使其滑动。
- 注意 - 虽然该网站主要是 bootstrap 5，但它也有一些顺风类，例如 padding\margins（您可能会在代码中注意到这一点）
页面如下所示；
<!-- Mobile Display start -->
<div class="row d-md-none">
<div class="col-12 bg-white">
<div class="row">
<div class="col-6">
<img class="" style="width:75%;" src="Assets/CEDA-Dots_1.png" alt="ceda_dots">
</div>
<div class="col-6">
<img class="-mt-4 mx-auto" style="height:75%;" src="Assets/Qotes.png" alt="quotes">
</div>
<div class="col-10 pl-4 pb-2 -mt-8">
<p class="text-2xl font-medium pl-5">CEDA Learning - delivering value for organisations and individuals</p>
</div>
<div class="col-3 ml-4" style="position:relative; height: 25px;">
<div class="splide__arrows">
<button class="splide__arrow splide__arrow--prev" style="background-color:#ffffff;" type="button" aria-controls="mobile-testim-carousel-track" aria-label="Go to last slide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
</svg>
</button>
<button class="splide__arrow splide__arrow--next" style="background-color:#ffffff;" type="button" aria-controls="mobile-testim-carousel-track" aria-label="Next slide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 mt-4" style="background: linear-gradient(90deg, #ffffff 50%, #e11837 50%)">
<div class="row">
<div class="col-12">
<p> </p>
</div>
<div class="col-12">
<div class="splide ml:0" id="mobile-testim-carousel">
<div class="splide__track pt-4 pb-4">
<ul class="splide__list">
<li class="splide__slide splide_width">
<div class="container">
<div class="row p-2 bg-white">
<div class="col-2 p-0 pt-2">
<img src="Assets/Portrait/10_Portrait.png" class="w-20">
</div>
<div class="col-10 text-black text-base ps-2 pt-2">
<p class="text-sm font-bold">Anne Finlay | Manager Coordination </p>
<p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>
</div>
<div class="col-12 pt-3">
<p class="text-xs font-normal">I’ve worked in the public sector, across several agencies, for over 25 years. During this time, I have had several touch points with economic concepts without any real understanding of the broader economics framework. This online course filled in those gaps for me in a way that sustained my interest and allowed me to incorporate the learning into my existing workload. While going through the course, I had many ‘aha’ moments which cumulated in solid foundation in economics concepts.</p>
</div>
</div>
</div>
</li>
<li class="splide__slide splide_width">
<div class="container">
<div class="row p-2 bg-white">
<div class="col-2 p-0 pt-2">
<img src="Assets/Portrait/10_Portrait.png" class="w-20">
</div>
<div class="col-10 text-black text-base ps-2 pt-2">
<p class="text-sm font-bold">Anne Finlay | Manager Coordination </p>
<p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>
</div>
<div class="col-12 pt-3">
<p class="text-xs font-normal">I’ve worked in the public sector, across several agencies, for over 25 years. During this time, I have had several touch points with economic concepts without any real understanding of the broader economics framework. This online course filled in those gaps for me in a way that sustained my interest and allowed me to incorporate the learning into my existing workload. While going through the course, I had many ‘aha’ moments which cumulated in solid foundation in economics concepts.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12">
<p> </p>
</div>
</div>
</div>
</div>
当然还有 JS：
<script>
new Splide('#mobile-testim-carousel', {type:'loop', arrows: false, rewind: true, pagination: false, autoplay: false, perPage: 1, gap:'1em'}).mount();
</script>
3个回答
7
投票
投票
您还可以禁用默认导航按钮（也称为“箭头”）并将事件直接附加到自定义按钮。
document.addEventListener('DOMContentLoaded', function() {
let splide = new Splide('#image-carousel', {
// hide default buttons
arrows: false,
type: 'loop',
}).mount();
//attach events to custom buttons
btnNext.addEventListener('click', e => {
splide.go('+1')
})
btnPrev.addEventListener('click', e => {
splide.go('-1')
})
});.splide {
width: 50vh;
margin: 0 auto;
}
.splide__slide img {
aspect-ratio: 1/1;
width: 100%;
object-fit: cover;
}<script src="
https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css
" rel="stylesheet">
<p><button id="btnPrev">prev</button> <button id="btnNext">next</button></p>
<section id="image-carousel" class="splide" aria-label="Beautiful Images">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://picsum.photos/id/237/200/300" alt="">
</li>
<li class="splide__slide">
<img src="https://picsum.photos/id/236/200/300" alt="">
</li>
<li class="splide__slide">
<img src="https://picsum.photos/id/235/200/300" alt="">
</li>
</ul>
</div>
</section>0
投票
投票
可能有更优雅的方法来做到这一点，但我最终只是在 splide 中包含箭头，将它们设置为
display:none<!-- Mobile Display start -->
<div class="row d-md-none">
<div class="col-12 bg-white">
<div class="row">
<div class="col-6">
<img class="" style="width:75%;" src="Assets/CEDA-Dots_1.png" alt="ceda_dots">
</div>
<div class="col-6">
<img class="-mt-4 mx-auto" style="height:75%;" src="Assets/Qotes.png" alt="quotes">
</div>
<div class="col-10 pl-4 pb-2 -mt-8">
<p class="text-2xl font-medium pl-5">CEDA Learning - delivering value for organisations and individuals</p>
</div>
<div class="col-3 ml-4 mt-1" style="position:relative; height: 25px;">
<div class="splide__arrows">
<button class="splide__arrow splide__arrow--prev" id="mobile-test-prev" style="background-color:#ffffff;" type="button" aria-controls="testim-carousel-track" aria-label="Go to last slide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
</svg>
</button>
<button class="splide__arrow splide__arrow--next" id="mobile-test-next"style="background-color:#ffffff;" type="button" aria-controls="testim-carousel-track" aria-label="Next slide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 mt-4" style="background: linear-gradient(90deg, #ffffff 50%, #e11837 50%)">
<div class="row">
<div class="col-12">
<p> </p>
</div>
<div class="col-12">
<div class="splide ml:0 md:-ml-40" id="mobile-testim-carousel">
<div class="splide__arrows">
<button class="splide__arrow splide__arrow--prev" id="hide-mobile-prev" style="display:none;" type="button" aria-controls="testim-carousel-track" aria-label="Go to last slide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
</svg>
</button>
<button class="splide__arrow splide__arrow--next" id="hide-mobile-next" style="display:none;" type="button" aria-controls="testim-carousel-track" aria-label="Next slide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
</svg>
</button>
</div>
<div class="splide__track pt-4 pb-4">
<ul class="splide__list">
<li class="splide__slide splide_width">
<div class="container">
<div class="row p-2 bg-white">
<div class="col-2 p-0 pt-2">
<img src="Assets/Portrait/10_Portrait.png" class="w-20">
</div>
<div class="col-10 text-black text-base ps-2 pt-2">
<p class="text-sm font-bold">Anne Finlay | Manager Coordination </p>
<p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>
</div>
<div class="col-12 pt-3">
<p class="text-xs font-normal">I’ve worked in the public sector, across several agencies, for over 25 years. During this time, I have had several touch points with economic concepts without any real understanding of the broader economics framework. This online course filled in those gaps for me in a way that sustained my interest and allowed me to incorporate the learning into my existing workload. While going through the course, I had many ‘aha’ moments which cumulated in solid foundation in economics concepts.</p>
</div>
</div>
</div>
</li>
<li class="splide__slide splide_width">
<div class="container">
<div class="row p-2 bg-white">
<div class="col-2 p-0 pt-2">
<img src="Assets/Portrait/10_Portrait.png" class="w-20">
</div>
<div class="col-10 text-black text-base ps-2 pt-2">
<p class="text-sm font-bold">Anne Finlay | Manager Coordination </p>
<p class="text-sm font-medium">WA Dept. Primary industries & Regional Development</p>
</div>
<div class="col-12 pt-3">
<p class="text-xs font-normal">I’ve worked in the public sector, across several agencies, for over 25 years. During this time, I have had several touch points with economic concepts without any real understanding of the broader economics framework. This online course filled in those gaps for me in a way that sustained my interest and allowed me to incorporate the learning into my existing workload. While going through the course, I had many ‘aha’ moments which cumulated in solid foundation in economics concepts.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12">
<p> </p>
</div>
</div>
</div>
</div>
还有 JS...
new Splide('#mobile-testim-carousel', {type:'loop', arrows: true, rewind: true, pagination: false, autoplay: false, perPage: 1, gap:'1em'}).mount();
$(document).ready(function () {
$('#mobile-test-prev').click(function() {
$('#hide-mobile-prev').click();
});
$('#mobile-test-next').click(function() {
$('#hide-mobile-next').click();
});
})
0
投票
投票
要自定义“幻灯片”滑块箭头，请确保在选项中设置
arrows: trueall: unset.splide__arrows {
position: absolute;
top: -40px;
right: 0;
display: flex;
gap: 10px;
z-index: 10;
}
.splide__arrow--prev, .splide__arrow--next {
all: unset;
}
.splide__arrow--prev, .splide__arrow--next {
background-color: #e0e6f7;
padding: 10px;
border-radius: 20px;
cursor: pointer;
}
最新问题
- 大师冥想错误：ESP32 上的 Core 1 Panic'ed（禁止加载）
- 从 PDF 中提取包含空单元格且没有可见边缘的表格
- 打开表单时输入参数值对话框
- 闪亮：<-: replacement has length zero when using wrapping X Axis Label
- Excel 夜班时间
- 为什么我在向此端点发送 HTTP 请求时收到此错误？使用 Spring Boot
- 如何调用传入 lambda 表达式的函数？
- Wix.com - 是否可以从集合中引用联系人（或成员）？
- 为 infix 定义一个方案函数
- XML LINQ 匹配麻烦
- 星图质心
- 如何在C++中将原始指针转换为唯一指针
- 过滤器锁定算法
- Remark 和 rehype 无法在应用程序路由器的 nextjs 中正确转换 mdx
- 我的不和谐机器人一直受到速率限制
- 如何为web3.js设置AppKit（Web3Modal）提供程序？
- 无法从 svg 中的数据 uri 不均匀地缩放 feImage
- gzip.open 在 wt 模式下会导致无效的存档
- 如何根据向量 B 的条件和向量 A 的值的条件对 Matlab 向量 A 进行运算
- Rust oracle mtls 连接
© www.soinside.com 2019 - 2024. All rights reserved.