4

I am new to flickity and I want to group cells and display dots at the same time. But on my project they seems to be mutually exclusive, I can either group cells or display dots, even if from this codepen, they do work well together.

What am I doing wrong?

Here is my code

mypage:

this html is part of the template in my angularjs custom directive:

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 }\' >' +
            ... +

here is my jquery inside the link method of my directive:

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

In this case, the cell are grouped properly but I dont see the dots. In order to see the dots, I need to remove the groupCells property.

What am I doing wrong?

Note: this code works inside the same page.

Thanks

eeadev
  • 3,662
  • 8
  • 47
  • 100

1 Answers1

0

Without looking at your code (at least some example that demonstrates the problem) it's really hard to help, however here is an example with what you need:

$('.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>

I hope it helps.

Dekel
  • 60,707
  • 10
  • 101
  • 129
  • thanks but as I said before if I put the sample code inside my page it works as expected. The problem comes with the case where I am using an angularjs custom directive, I added some code above – eeadev Sep 23 '16 at 16:19
  • The specific problem in your page can be wrong positioning of other elements or css that caused the dots to be hidden. Without looking at your page it's really hard to help and understand the problem. – Dekel Sep 23 '16 at 16:26
  • the page is created dinamically adding a custom directive, do you want me to post all the html template of my directive? – eeadev Sep 23 '16 at 16:30
  • Will be much better if you can create a jsfiddle with all the html/css/js to look at :) – Dekel Sep 23 '16 at 16:31
  • is it possible having angularjs and more than 1 js class? – eeadev Sep 23 '16 at 16:36
  • in jsfiddle, is it possible having angularjs and more than 1 js class at the same time? – eeadev Sep 25 '16 at 07:08
  • I'm sorry but I don't really understand the meaning of "js class". what exactly is js class? – Dekel Sep 29 '16 at 14:32