How to loop a class and create mutiple flickity instances

[petephm]

This question is probably silly but here it goes.

How do I go about looping through a class and create multiple instances of a flickity slider with vanilla javascript? Or do I have to manually create a variable and instantiate flickity sliders for each one on a page?

This is what I've tried so far to no avail

$(gallery).each(function(obj) {
    obj = new Flickity(gallery, {
    cellSelector: '.__slide',
    pageDots: true,
    percentPosition: true,
    prevNextButtons: false,
    wrapAround: true
    });
});

Cheers, Pete

[desandro]

Looks like you're already using jQuery. You can use Flickity as a jQuery plugin

$('.gallery').each(function(obj) {
    cellSelector: '.__slide',
    pageDots: true,
    percentPosition: true,
    prevNextButtons: false,
    wrapAround: true
});

To initialize Flickity on multiple elements with vanilla JS, you can use a simple for loop.

var galleryElems = document.querySelectorAll('.gallery');
for ( var i=0, len = galleryElems.length; i < len; i++ ) {
  var galleryElem = galleryElems[i];
  new Flickity( galleryElem, {
    cellSelector: '.__slide',
    pageDots: true,
    percentPosition: true,
    prevNextButtons: false,
    wrapAround: true
  });
}

If you're not using any other JS with your Flickity behavior, also consider initializing Flickity in HTML.

[gtextil]

my loop does not recognize the innerHTML or the .html () of jquery. I do not know why. Might you help me?

If I write directly in the HTML document if it recognizes it but not from the external javascript file.

---

IN JAVASCRIPT DOC

var div_res = '';

for (var i in feed) {
  div_res += '<div class="main-carousel-2">'+
              '<img src="' + feed[i].imagen_apple + '">'+
              '<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg"/>'+
              '</div>';
}

$("#response_server").html(div_res);

---

IN HTML DOC

 <div id="response_server"></div>

 <script>

        var galleryElems = document.querySelectorAll('.main-carousel-2');
          for ( var i=0, len = galleryElems.length; i < len; i++ ) {
            var galleryElem = galleryElems[i];
            new Flickity( galleryElem, {
                cellAlign: 'left',
                contain: true
            });
          }

      </script>

[desandro]

@gtextil I would use .find() from the response_server element with .each('.main-carousel-2') to initialize Flickity:

var div_res = '';

for (var i in feed) {
  div_res += '<div class="main-carousel-2">'+
              '<img src="' + feed[i].imagen_apple + '">'+
              '<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg"/>'+
              '</div>';
}

var $responseServer = $("#response_server").html(div_res);
$responseServer.find('.main-carousel-2').each( function( carousel) {
  // init Flickity
  $( carousel ).flickity({ ... });
});

I wrote about this concept in Fizzy School - simplify selectors