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
6466 1502 1965

HI

Please share your webshop URL & password.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
dmwwebartisan
Shopify Partner
6466 1502 1965

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
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View 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
3 0 0

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

0 Likes
DavidTowcester
Shopify Partner
30 0 3

In the line where it says “10000”, this is where you can change the speed of the slideshow. Javascript works in milliseconds and the current “10000” entry equals to 10 seconds. If you would like to change it to a speed of 5 seconds, for example, make sure to change the code to “5000” instead.

0 Likes
DavidTowcester
Shopify Partner
30 0 3

Hi, works well but the titles aren't changing. Any idea?

Cheers

David

0 Likes
JuanaAxcesory
New Member
1 0 0

Hello I got it to work by removing the 

.removeClass('slideshow__button--active');

 

0 Likes