我是 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在同一页面内工作。
谢谢
最佳答案
如果不查看您的代码(至少是一些演示问题的示例),它真的很难提供帮助,但是这里有一个您需要的示例:
$('.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>
希望对你有帮助。
关于jquery - Flickity 2 - groupCells 和 pageDots 不能同时工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39577788/