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.

Replies 13 (13)
dmwwebartisan
Shopify Partner
11162 2395 3435

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 | Click here GemPages The most powerful Shopify page builder.
dmwwebartisan
Shopify Partner
11162 2395 3435

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 | Click here GemPages The most powerful Shopify page builder.
Madhvi
New Member
3 0 0

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

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

SGMM
New Member
2 0 1

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. 

tiedreflex51
New Member
3 0 0

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

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.

DavidTowcester
Shopify Partner
30 0 3

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

Cheers

David

JuanaAxcesory
New Member
1 0 0

Hello I got it to work by removing the 

.removeClass('slideshow__button--active');

 

DavidTowcester
Shopify Partner
30 0 3

Hi,

Did you get an answer to this, because I'm still having this problem?

Thanks

Dave

DavidTowcester
Shopify Partner
30 0 3

Unfortunately, didn't work for me.

tiedreflex51
New Member
3 0 0
Click to expand...
Hi. I'm also still struggling
Ori313
New Member
1 0 0

Hey there , I just had the same issues and wanted to know if you had a solution to the same issue. Thank You.