Show "X" number of page dots on Flickity plugin

Question

I using the flickity plugin for a slideshow on my website and I want to show the dots on the image to allow the user to navigate the images.

Here is a link to the plugin https://flickity.metafizzy.co/

Is it possible to show, for example 4 dots even if there is 10 images. I dont always know the number of images so if I could just cap the dots to 4 and update every time the image is swithced?

Here is some of my code:

    $('[data-venue-id="' + venueId + '"]').find('.flickity-button-inset').each(function () {
    $(this).flickity({
        // options
        lazyLoad: true,
        wrapAround: true,
        pageDots: true,
        contain: true,
        adaptiveHeight: false,
        imagesLoaded: true,
        setGallerySize: false
        //fade: true
    });
});

This is an example of the dots on the images. I only want to display a certain number

Thanks in advance

Is this what you expect ? https://stackoverflow.com/questions/39577788/flickity-2-groupcells-and-pagedots-not-working-at-the-same-time — Bilel, Jun 02 '21 at 18:56
If not mistaken, the easiest way to achieve this, would be by using ```asNavFor```, and style those. https://flickity.metafizzy.co/options.html#asnavfor — prettyInPink, Jun 02 '21 at 19:57
@prettyInPink This does not help me unfortunately as grouping them is not the issue. Also I do not want to display another row of images underneath in a carousel. From my understanding of the plugin now it looks like I will have to built something custom to hide the extra page dots if there is any and when it gets to the last dot in the row, set the first dot to be the active one again. Thanks for your help though — Smac, Jun 03 '21 at 16:10
Sure, it is not something custom, it is a setting included in the plugin. The second slider serves as dots (asNavFor) for the first slider. So the 'dots' will automatically have an active state. — prettyInPink, Jun 03 '21 at 16:39

score 1 · Answer 1 · answered Jun 02 '21 at 20:24

As mentioned in my comment above, I believe the easiest would be with using asNavFor.

.carousel-main {
  counter-reset: carousel-cell;
  width: 100%;
}

.carousel-main-item {
  width: 100%;
  background: #f1f1f1;
  text-align: center;
  line-height: 100px;
}

.carousel-nav {
  width: 50px;
  margin: 20px auto;
}

.carousel-nav-item {
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
}

.carousel-nav-item.is-selected {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js" integrity="sha512-cA8gcgtYJ+JYqUe+j2JXl6J3jbamcMQfPe0JOmQGDescd+zqXwwgneDzniOd3k8PcO7EtTW6jA7L4Bhx03SXoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css" integrity="sha512-BiFZ6oflftBIwm6lYCQtQ5DIRQ6tm02svznor2GYQOfAlT3pnVJ10xCrU3XuXnUrWQ4EG8GKxntXnYEdKY0Ugg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="carousel-main" data-flickity='{"pageDots": false }'>
  <div class="carousel-main-item">1</div>
  <div class="carousel-main-item">2</div>
  <div class="carousel-main-item">3</div>
  <div class="carousel-main-item">4</div>
  <div class="carousel-main-item">5</div>
  <div class="carousel-main-item">6</div>
  <div class="carousel-main-item">7</div>
</div>

<div class="carousel-nav" data-flickity='{ "asNavFor": ".carousel-main", "contain": false, "pageDots": false, "prevNextButtons": false, "draggable": false }'>
  <div class="carousel-nav-item"></div>
  <div class="carousel-nav-item"></div>
  <div class="carousel-nav-item"></div>
  <div class="carousel-nav-item"></div>
  <div class="carousel-nav-item"></div>
  <div class="carousel-nav-item"></div>
  <div class="carousel-nav-item"></div>
</div>

score 0 · Answer 2 · answered Nov 12 '21 at 16:07

I did this via an on change and ready event. I suspect there's a cleaner way of doing this.

I wanted 1,2,3 shown if 1 was selected. Otherwise n-1, n, n+1 until the last slide when it should be the last three.

$('.gallery').flickity({
    cellSelector: ".gallery-item",
    wrapAround: true,
    prevNextButtons: true,
    contain: true,
    pageDots: true,
     on: {
         ready: function () {
             if ($(this)[0].slides.length <= 3) {
                 $(this)[0].$element.find('.dot').addClass("show-me");
             } else {
                 $(this)[0].$element.find('.dot').eq(0).addClass("show-me");
                 $(this)[0].$element.find('.dot').eq(1).addClass("show-me");
                 $(this)[0].$element.find('.dot').eq(2).addClass("show-me");
             }
        },
         change: function (index) {
            if ($(this)[0].slides.length <= 3) {
                $(this)[0].$element.find('.dot').addClass("show-me");
            } else {
                $(this)[0].$element.find('.dot').removeClass("show-me");
                if (index == 0) {
                    $(this)[0].$element.find('.dot').slice(0, 3).addClass("show-me");
                } else {
                    if (index == ($(this)[0].slides.length - 1)) {
                        $(this)[0].$element.find('.dot').eq(index).addClass("show-me");
                        $(this)[0].$element.find('.dot').eq(index - 1).addClass("show-me");
                        $(this)[0].$element.find('.dot').eq(index - 2).addClass("show-me");
                    }
                    else {
                        $(this)[0].$element.find('.dot').eq(index).addClass("show-me");
                        $(this)[0].$element.find('.dot').eq(index - 1).addClass("show-me");
                        $(this)[0].$element.find('.dot').eq(index + 1).addClass("show-me");
                    }
                 }
            }
        }
    }
});

CSS:

  .flickity-page-dots {
    li {
        display: none;
    }
     li.show-me {
        display: inline-block;
    }

Show "X" number of page dots on Flickity plugin

2 Answers2