How To
Scripts - sliders.js
You’ll need to edit your slider function to have two pieces at the beginning and end, sandwiching the regular slider functions like the arrows, speed, etc.
This should go in the ELSE of the slider function, so it won’t run inside the CMS.
$('.slider__hero').on("init", function(event, slick, currentSlide){
$(".pagingInfo").html(parseInt(slick.currentSlide + 1) + '<span class="divider">/</span>' + slick.slideCount);
}).slick({
dots: false,
// appendDots: '.slider-hero-parallax-controls .slider-dots',
arrows: true,
appendArrows: '.slider__hero-controls .nextSlide',
// prevArrow: '<button type="button" class="slick-prev"><span class="icon icon-caretleft" aria-hidden="true"></span><span class="sr-only">Previous</span></button>',
// nextArrow: '<button type="button" class="slick-next"><span class="icon icon-caretright" aria-hidden="true"></span><span class="sr-only">Next</span></button>',
infinite: true,
fade: false,
speed: 300,
adaptiveHeight: true,
autoplaySpeed: 8000,
slidesToShow: 1,
slidesToScroll: 1
}).on("afterChange", function(event, slick, currentSlide){
$(".pagingInfo").html(parseInt(slick.currentSlide + 1) + '<span class="divider">/</span>' + slick.slideCount);
});
HTML
In your mustache file, make sure you have a div or span called “pagingInfo”, where your counter info will go.
Example Sites
- Helm Bank USA (About halfway down the page, centered full-width slider)
- Craft Bank (Wild because they wanted the divider slash to spin when the slide changed.)
Tags: slider, js, jquery, javascript, slick slider, counter, bs3, bs4