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

Posted 2023-05-09

【中文标题】Flickity 2 - groupCells 和 pageDots 不能同时工作

【英文标题】：Flickity 2 - groupCells and pageDots not working at the same time

【发布时间】：2017-01-27 09:58:47

【问题描述】：

我是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 在同一页面内工作。

谢谢

【问题讨论】：

能否请您为问题添加一个代码 sn-p（一个与点一起使用，其他与 groupcells 一起使用），以便我们可以测试一些快速烦人的修复工作以找到解决方案？谢谢！ =)

这里是所有选项：flickity.metafizzy.co/options.html

你试过添加 "groupCells": true 吗？

【参考方案1】：

如果不查看您的代码（至少是一些演示问题的示例），真的很难提供帮助，但是这里有一个您需要的示例：

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

/* 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;

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

希望对你有帮助。

【讨论】：

谢谢，但正如我之前所说，如果我将示例代码放在我的页面中，它会按预期工作。问题出现在我使用 angularjs 自定义指令的情况下，我在上面添加了一些代码

您页面中的具体问题可能是其他元素或 css 的位置错误导致点被隐藏。如果不查看您的页面，真的很难帮助和理解问题。

页面是动态创建的，添加了一个自定义指令，你想让我发布我的指令的所有 html 模板吗？

如果你可以创建一个包含所有 html/css/js 来查看的 jsfiddle 会更好:)

是否有可能拥有 angularjs 和 1 个以上的 js 类？