在 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;
}
最新问题
- 在 ngOnInit 方法中使用 async/await 会影响生命周期钩子
- 当大于单元格大小时，Django 表格会减少文本
- 花括号 - 为什么这个函数不接受不带引号的变量
- 如何使用Gradle在Android项目中添加直接依赖？
- 如何汇总极坐标数据框的所有列
- 保存包含另一个实体的实体时出现问题
- 通过 AppScript 插入公式时出错
- 为什么 OpenAI Whisper 返回“None”？
- 我可以使用类似 pandas 的字符串表达式来过滤 DataFrame 吗？
- 检查 NetSuite 中的执行环境
- 四边形网格生成代码
- 在 IIS 10 中运行时，如何访问 PHP 8.3.10 中的 HTTPS URL？
- 如何重置密码或恢复帐户
- 配置元数据中提供的发行人 https://a.com/auth/realms/arealm 与请求的发行人 http://a.com/auth/realms/arealm 不匹配
- [剧透：CS50]：初始化为44时，为什么sizeof(HEADER_SIZE) = 4？
- 代理通过直线转至全渠道客户服务
- 如何在 ApexCharts 中禁用滚轮缩放？
- 使用 github 操作部署时无法访问我的 EKS 集群
- 如何停止 Visual Studio 检查 sql 文件
- PyPolars：加速应用功能查找共同元素
© www.soinside.com 2019 - 2024. All rights reserved.