CODEWITHSUNDEEP
bigcartelflickity
Joanne Robinson
Joanne Robinson

Reputation: 1

implementing autoplay in flickity

I currently have a big cartel website with the Trace theme. It has a flickity carousel on the home page. I'd love for this to autoplay like a slideshow

I don't know much about web development - hence the reason I have a big cartel website. I've done the odd bit of tinkering to change minor things. It seems like it would be an easy fix for someone that knows what to do, I don't even know where to put the code. Does anyone think they could direct the blind?

I found the flicky .CSS and all looks good with that... I like the way it is styled.

This is the code on the flickity website on the autoplay page:

<!-- Flickity HTML init -->
  <div class="carousel" data-flickity='{ "autoPlay": true }'>
<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>

And this is the JS that you need. // external js: flickity.pkgd.js

there is also some CSS on the flickity website, but I don't think I need that as I'm happy with how my website has the carousel styled. I can view the flickity CSS on my website.

www.jadedseas.co.nz to view the current slideshow.

Upvotes: 0

Views: 2643

Answers (1)

TomTom
TomTom

Reputation: 1153

Hi Joanne looking at your website and the code that you have posted, you have to add data-flickity='{ "autoPlay": true }' to your carousel that you want to autoplay.

So taking your website, you need to add it to the main-carousel:

<div class="carousel carousel-main flickity-enabled is-draggable" ADD HERE tabindex="0" style="height: 100%;">
      <div class="flickity-viewport"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><a href="/category/necklaces" class="carousel-cell is-selected" style="position: absolute; left: 0%;">
              <div class="category-image" style="background-image:url('https://assets.bigcartel.com/product_images/266895101/DSC_3336.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000');"></div>
              
              <div class="category-name">
                <div class="category-text">
                  <div class="category-title">NECKLACES</div>
                  <div class="category-subtitle">Shop now</div>
                </div>
              </div>
              
            </a><a href="/category/earrings" class="carousel-cell" style="position: absolute; left: 100%;">
              <div class="category-image" style="background-image:url('https://assets.bigcartel.com/product_images/263007329/DSC_3258.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000');"></div>
              
.
.
.
.
              </div></div></div>

Upvotes: 0

Related Questions