Narrative Theme Slideshow - Autoplay

Solved
Tourist
4 0 4

hello !

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

Thank's

Shopify Staff
Shopify Staff
1121 94 125

This is an accepted solution.

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.

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

Tourist
4 0 4

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

Thank's 

Tourist
5 0 1

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?

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
New Member
2 0 1

Hey I was wondering if you could revise the code a little. I wasn't able to click on the tabs with the image it went past. The  autoscroll stayed on the image it was timed on. If that makes sense lol

Shopify Partner
12398 1506 4491

Hello @Cody0616 

Welcome to the Shopify community!

do you mean like this?

https://codepen.io/ethanclevenger91/pen/MYNGrN

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
New Member
2 0 1

@KetanKumar  awesome thank you I'll check it out as soon as get home 

0 Likes