Narrative Theme Slideshow - Autoplay not working

Alin90
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
dmwwebartisan
Shopify Partner
5841 1336 1713

HI

Please share your webshop URL & password.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
dmwwebartisan
Shopify Partner
5841 1336 1713

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.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App

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
QTS
Tourist
4 0 0

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

0 Likes
SGMM
New Member
2 0 0

This worked for desktop but I still experienced the same problem shared by others here, that in mobile the images changed but the heading and slide titles did not. 

0 Likes
tiedreflex51
New Member
2 0 0

Hi. How do you adjust the speed of the slideshow?

0 Likes