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

Answer 1

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>

Answer 2

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;
    }