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

我是flickity的新手，我想在同一时间对单元格和显示点进行分组。但是在我的项目中，他们似乎是相互排斥的，我可以将单元格或显示点组合在一起，即使从这个codepen，他们也可以很好地协同工作。Flickity 2 - groupCells和pageDots不能同时工作

我在做什么错？

这里是我的代码

我的空间：

这个网站是我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 }\' >' + 
      ... +

，这里是我的内部链接的jQuery我的指令方法：

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

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

我在做什么错？

注意：这code工作在同一页面内。

感谢

来源

2016-09-19 eeadev

请问您可以添加一个带有问题的代码片段（其中一个使用点和其他组与groupcells一起工作），以便我们可以测试一些快速烦人的修复工作以找到解决方案？谢谢！ =） – JoelBonetR

以下是所有选项：http://flickity.metafizzy.co/options.html – HerrSerker

您是否尝试添加“groupCells”：true？ –

不看你的代码（至少一些示例演示该问题），这真的很难帮助，但这里是你所需要的一个例子：

$('.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/[email protected]/dist/flickity.css" media="screen"> 
 
<script src="https://unpkg.com/[email protected]/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>

我希望它有帮助。

来源

2016-09-23 14:55:40 Dekel

谢谢，但正如我之前所说，如果我把我的网页内的示例代码，它按预期工作。问题出在我使用angularjs自定义指令的情况下，我在 – eeadev

之上添加了一些代码。页面中的特定问题可能是其他元素或css导致点被隐藏的错误定位。不看你的页面，真的很难帮助和理解这个问题。 – Dekel

该页面是在创建dinamically添加自定义指令，你是否希望我发布我的指令的所有html模板？ – eeadev

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

回答

相关问题