How to?
- Activate Ultimate Addons for Elementor plugin
- Add Before After Slider widget as a section template, this will be use as a slide in slider
- Download Splide.js and upload to site’s FTP we will be using two files to initiate slider
- splide.min.js
- splide.min.css
- Copy both CSS & JS below and attach to the page
- Use HTML widget and place the code below to the page content, make sure you have all classes presented so that the JS and CSS will be correctly initiate
CSS:
<link rel="stylesheet" href="/wp-content/uploads/scripts/splidejs/splide.min.css">
HTML:
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">[PUT YOUR SECTION TEMPLATE SHORTCODE HERE - SLIDE 1]</li>
<li class="splide__slide">[PUT YOUR SECTION TEMPLATE SHORTCODE HERE - SLIDE 2]</li>
</ul>
</div>
</div>
Scripts:
<script src="/wp-content/uploads/scripts/splidejs/splide.min.js"></script>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
var splide = new Splide( '.splide', {
type: 'loop' //You may add other option here, please check - https://splidejs.com/guides/options/
} );
splide.mount();
} );
</script>
