Solved

Add Autoplay (5sec) to Testimonials Section (flickity)

senkels
Excursionist
53 0 9

Hi,

My theme Streamline has a testimonials section that is using flickity (at least from what I see from the theme.js file).

 

I would like to add 5 sec autoplay to this section. 

 

This is the theme: https://senkels.at/#shopify-section-template--14472986591266__164311392971dde964 

 

And this is the JS code snippet that, I think, is responsible for this section:

 

 

 

theme.Testimonials = (function() {
    var defaults = {
      adaptiveHeight: false,
      avoidReflow: true,
      pageDots: true,
      prevNextButtons: false,
      wrapAround: true
    };
  
    function Testimonials(container) {
      this.container = container;
      var sectionId = container.getAttribute('data-section-id')
      this.slideshow = container.querySelector('#Testimonials-' + sectionId);
  
      if (!this.slideshow) { return }
  
      theme.initWhenVisible({
        element: this.container,
        callback: this.init.bind(this),
        threshold: 600
      });
    }
  
    Testimonials.prototype = Object.assign({}, Testimonials.prototype, {
      init: function(obj, args) {
        // Do not wrap when only a few blocks
        if (this.slideshow.dataset.count <= 3) {
          defaults.wrapAround = false;
          defaults.contain = true;
        }
  
        this.flickity = new theme.Slideshow(this.slideshow, defaults);
        this.flickity.resize();
         
      },
  
      onUnload: function() {
        if (this.flickity && typeof this.flickity.destroy === 'function') {
          this.flickity.destroy();
        }
      },
  
      onDeselect: function() {
        if (this.flickity && typeof this.flickity.play === 'function') {
          this.flickity.play();
        }
      },
  
      onBlockSelect: function(evt) {
        var slide = this.slideshow.querySelector('.testimonials-slide--' + evt.detail.blockId)
        var index = parseInt(slide.dataset.index);
  
        clearTimeout(this.timeout);
  
        if (this.flickity && typeof this.flickity.pause === 'function') {
          this.flickity.goToSlide(index);
          this.flickity.pause();
        }
      },
  
      onBlockDeselect: function() {
        if (this.flickity && typeof this.flickity.play === 'function') {
          this.flickity.play();
        }
      }
    });
  
    return Testimonials;
  })();

 

 

 

I would appreciate your help 🙂

 
Accepted Solution (1)

LitCommerce
Astronaut
2860 684 744

This is an accepted solution.

Hi @senkels,

Please add code here:

Screenshot.png

Code:

autoPlay: true,
autoPlay: 5000,

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Reply 1 (1)

LitCommerce
Astronaut
2860 684 744

This is an accepted solution.

Hi @senkels,

Please add code here:

Screenshot.png

Code:

autoPlay: true,
autoPlay: 5000,

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!