Narrative Theme Slideshow - Autoplay

Tourist
4 0 4

hello !

Is it possible to make the slideshow auto-play on the homepage of the Narrative Theme?

Thank's

2 Likes
Shopify Staff
Shopify Staff
579 38 55

Hi, Maxime!

Ted here from Shopify, thanks for reaching out to us!

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);

On the third last line of the above code, where it says "10000" in green, 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. 

Feel free to reach out to our support team any time as well. We're here 24/7 via chats, emails and phone. Just click 'talk to support’ for some more info!

Happy selling!   

Ted 

2019 NOTE: This is an old forum post from 2017 and the Narrative theme has since been updated. The code advised here might not work for your theme. Please feel free to contact our Support directly here for assistance. Alternatively, you can create a new forum post within our Design Thread where fellow merchants, Experts and developers may be able to help. Always make sure to create a backup of your theme as shown here before making any coding changes.

Ted | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Tourist
4 0 4

Yeess it work very nice ! Merci Ted, Ivery well explained. 

Thank's 

1 Like
New Member
5 0 0

Hi there, thank you for this code, very helpful. I was hoping you would be able to help me with one amend to it...

When the screen size is in a mobile (responsive) size, it leaves the slide 'action buttons' off screen. Therefore when the auto-rotation happens it doesn't bring the buttons along with it.

What I'd like is to have the images (slides) and their action buttons to auto-scroll. In the same way that they do when they are actually clicked on. 

Can you help me with this?

0 Likes
New Member
3 0 0

I succesfully copied the code into the custom.js script area and everything is sliding automatically. However, after one full rotation, I'm getting a button underneath one of the slide titles. Is there a fix for that?

Attached screenshot of issue.

0 Likes
New Member
3 0 0

Thanks for the great response on this.

0 Likes
New Member
3 0 0

This can happen if you have a nothing in the "button label" field but a link in the "button link" field like so ex.png

0 Likes