时间戳

首页 > 解决方案 > 在 Flickity 插件上显示“X”页点数

javascript - 在 Flickity 插件上显示“X”页点数

问题描述

我在我的网站上使用 flickity 插件进行幻灯片放映，我想在图像上显示点以允许用户浏览图像。

这是插件的链接https://flickity.metafizzy.co/

即使有 10 个图像，是否可以显示，例如 4 个点。我并不总是知道图像的数量，所以如果我可以将点限制为 4 并在每次图像切换时更新？

这是我的一些代码：

    $('[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
    });
});

这是图像上的点的示例。我只想显示某个数字 在此处输入图像描述

提前致谢

标签： javascriptjquerypluginsstylingflickity

解决方案

正如我在上面的评论中提到的，我相信最简单的方法是使用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>

推荐阅读