Question

我是flickity的新手，我想同时对细胞进行分组并显示点。但是在我的项目中，它们似乎是相互排斥的，我可以对单元格进行分组或显示点，即使从codepen开始，它们也可以很好地协同工作。

我做错了什么？

这是我的代码

我的空间：

这个html是我的angularjs自定义指令中模板的一部分：

app.directive('productSlider', function ($rootScope, $compile, $timeout, $sce, $location, $window) {

    return {
        restrict: 'E',
        template: '<section id="products" >' +
            '<div class="prodotti-int gallery js-flickity" id="productSlider" data-flickity=\'{ "groupCells": 4 }\' >' +
            ... +

这是我的指令 link 方法中的jquery：

$('#productSlider.gallery').flickity({
                            // options
                            cellAlign: 'center',
                            freeScroll: true,
                            wrapAround: false,
                            contain: true,
                            autoPlay: 0,
                            prevNextButtons: false,
                            pageDots: false
                        });

在这种情况下，细胞分组正确，但我没有看到点。为了看到点，我需要删除groupCells属性。

我做错了什么？

注意：此code可在同一页面内使用。

由于

Answer 1

不看你的代码（至少是一些证明问题的例子），它很难提供帮助，但这里有一个你需要的例子：

＆＃13;

$('.carousel').flickity({
  contain: true,
  groupCells: 4
});

＆＃13;

/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 28%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

.carousel-cell.is-selected {
  background: #ED2;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2.0/dist/flickity.css" media="screen">
<script src="https://unpkg.com/flickity@2.0/dist/flickity.pkgd.min.js"></script>


<h1>Flickity - groupCells</h1>
<div class="carousel" id="mycarousel" data-flickity='{"groupCells": 4 }'>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

＆＃13;

我希望它有所帮助。

Flickity 2 - groupCells和pageDots不能同时工作

1 个答案: