1

I've came across multiple answers on how to replace dots with current/total number of slides (3/5). But I haven't found if it's possible to keep dots, and at the end of the dots to append current/total number of slides.

Is that possible?

David
  • 69
  • 1
  • 2
  • 7

1 Answers1

1

Adding parameter dots: true will show your the dots as well as the current and total.

Example:

HTML:

<div class="slideshow">
    <img src="http://lorempixel.com/500/250" />
    <img src="http://lorempixel.com/500/251" />
    <img src="http://lorempixel.com/500/249" />
</div>

Javascript:

$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    dots: true,
    dotsClass: 'custom_paging',
    customPaging: function (slider, i) {
        //FYI just have a look at the object to find aviable information
        //press f12 to access the console
        //you could also debug or look in the source
        console.log(slider);
        return (i + 1) + '/' + slider.slideCount;
    }
});

do check this post for more detail, it also has the fiddle which i got this code from. Slick.js: Get current and total slides (ie. 3/5)

Oliver Ong
  • 97
  • 8
  • Thanks. But this replaces dots with numbers. I was wondering if it's possible to keep dots and numbers. So I'll have couple bullets and after them number of slides. – David Dec 15 '17 at 14:14
  • Sorry the question is a bit confusing. Did you mean multiple dots and numbers then after all of those you will then see a current/totalcount? – Oliver Ong Dec 15 '17 at 14:18
  • Yeah, exactly. So something like *dot) (dot) (dot) 2/3 – David Dec 17 '17 at 19:42