Narrative Theme Slideshow - Autoplay not working

Highlighted
New Member
1 0 0

How do I make the slideshow automatically play in Narrative theme?

There are 4 images uploaded ready to rotate through but the slideshow does not change, just stays the same on the first image. And no indication of arrows to click to change the slide.

0 Likes
Highlighted
Shopify Partner
3167 696 842

HI

Please share your webshop URL & password.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
3167 696 842

HI,

It is indeed possible! To do so, please log into your Shopify account and follow the instructions below:

  1. Click Online Store and then Themes
  2. Next, click on the Actions drop-down.
  3. From the drop-down, select Edit Code (as shown here). 
  4. Find the Assets folder and then open up the custom.js file.
  5. Once you open the custom.js file, you will just need to copy and paste the below code. Here is a quick screenshot to show you where to paste the code. 

 

 

var sections = window.theme.sections;
var slideshowAutoExtension = {
  init: function() {
    this.on('slideshow_desktop_init_done', this._autoplaySlideshow.bind(this));
  },
  _autoplaySlideshow: setInterval(function() {
    var $slide = $('.slideshow__slide--active')
                   .removeClass('slideshow__slide--active');

    var $button = $('.slideshow__button--active')
                   .removeClass('slideshow__button--active');

    var $slides = $('.slideshow__slide');

    var currentIndex = ($slides.index($slide) + 1) % $slides.length;

    $slides
      .eq(currentIndex)
      .addClass('slideshow__slide--active');

    var $buttons = $('.slideshow__button')
      .eq(currentIndex)
      .addClass('slideshow__button--active');

  }, 10000)

};

sections.extend('slideshow', slideshowAutoExtension);

Hope this will work for you.


Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
2 Likes
Highlighted

Hey,

The written code did not help in enabling the autoplay of Narrative Theme Slideshow.

Somebody please help figure it out.

 

P.S.: Slideshow I am referring to is not the Header Slideshow

Regards,
Madhvi
0 Likes
Highlighted
Tourist
3 0 0

Wonderful, thank you! This worked perfectly for my store!

0 Likes