Search code examples
cssmaterializeflickity

Conflicting class name in CSS

I am using materializeCSS to build a website and it already has a class called carousel. However, I wish to use carousel from Flickity and I wanted to know what would happen if I include both files in an html.

This question is somewhat similar to this one but the answers do not satisfy my query.

Solution

  • I checked the flickity carousel on github ( https://github.com/metafizzy/flickity/blob/master/dist/flickity.css ) and it appears to me that everything in the css starts with .flickity- so it shouldn't be a problem.

    You're probably talking about this part found on their site:

    $('.main-carousel').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

    That .main-carousel could be anything you want, as long as it matches with the class you use in your markup:

    <div class="main-carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
</div>