admin管理员组文章数量:1318985
I'm building this bootstrap page (mobile view) which has a splide. for the design, it's way easier to have the arrows outside of the splide itself rather than trying to move the arrows into position. But as the arrows are outside of the splide, then they're not working - and im not sure what events need to be triggered to get it to slide.
- Note - while the site is mostly bootstrap 5, it also has some tailwinds classes like padding\margins (you might notice this in the code)
Here's what the page looks like;
<!-- 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="; 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="; 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>
and of course the JS:
<script>
new Splide('#mobile-testim-carousel', {type:'loop', arrows: false, rewind: true, pagination: false, autoplay: false, perPage: 1, gap:'1em'}).mount();
</script>
I'm building this bootstrap page (mobile view) which has a splide. for the design, it's way easier to have the arrows outside of the splide itself rather than trying to move the arrows into position. But as the arrows are outside of the splide, then they're not working - and im not sure what events need to be triggered to get it to slide.
- Note - while the site is mostly bootstrap 5, it also has some tailwinds classes like padding\margins (you might notice this in the code)
Here's what the page looks like;
<!-- 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/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/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>
and of course the JS:
<script>
new Splide('#mobile-testim-carousel', {type:'loop', arrows: false, rewind: true, pagination: false, autoplay: false, perPage: 1, gap:'1em'}).mount();
</script>
3 Answers
Reset to default 7You could also disable default navigation buttons (aka "arrows") and attach events to your custom buttons directly.
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/npm/@splidejs/[email protected]/dist/js/splide.min.js
"></script>
<link href="
https://cdn.jsdelivr/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>See also the official API documentation and about customizing arrows
There's probably more elegant ways to do it, but i just ended up including arrows within the splide, setting them to display:none, and then adding some JQuery so that the buttons outside of splide perform click function on the hidden buttons.
<!-- 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/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/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/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/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>
and the 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();
});
})
To customize Splide slider arrows, ensure arrows: true is set in the options. Then, apply the following CSS to style the arrows, positioning them above the slider, with a custom background, padding, and reset inherited styles using all: 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;
}
本文标签： javascriptUsing SplideJS arrows outside of splideStack Overflow
版权声明：本文标题：javascript - Using SplideJS arrows outside of splide - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742056263a2418313.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论