Using SplideJS arrows outside of splide
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.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>
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>
Solution
You 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.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/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
- Which is the fastest way to loop? [for curiosity]
- How do I add last modified in the footer of my web page?
- Convert Lua data to JSON
- Can't read property 'clearRect' of undefined in javascript
- Update textarea line numbers
- Prevent <dialog> from closing on keydown Esc in Chrome
- When to use AbortController to remove event listeners?
- Logical operators in JavaScript — how do you use them?
- Signature invalid with AATL Certificate
- Apply :focus-visible when focusing element programatically
- Javascript array, finding duplicates then return the locations in new array;
- How to remove close button (x) border from google maps info window pop up?
- window.onbeforeunload and window.onunload is not working in Firefox, Safari, Opera?
- Assign the "/" hotkey to create focus user on search box
- Wordpress Website not updating with changes to Javascript file
- javascript regexp replace not working, but string replace works
- regex to detect MathML in textarea in JavaScript
- Random color generator
- Puppeteer "TimeoutError is not defined"
- How to wrap an object contains a metric unit e.g. length= 10 m with Angular signals?
- board game win situation - searching algorithm
- What is the difference between JavaScript promises and async await?
- Can a promise resolve statement await a return from the function awaiting the promise?
- How to implement C# access modifiers in javascript?
- Implementing show/hide popup box on mouse click
- Algorithm for drawing line with thickness / width
- How do you get a list of the names of all files present in a directory in Node.js?
- Text with multiple underlines
- How to override constructor of prototype/intercept object creation in JavaScript?
- Can the Google Maps API javascript be cached?