Narrative Theme Slideshow - Autoplay

Suture
Shopify Expert
648 0 108

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

The theme.min.js.liquid file is difficult to make sense of even when uncompressed. 

Mosses_Akizian
Shopify Partner
4 0 1

Yes. You need to access the following file: slideshow.liquid

In Admin:

  1. Click Themes
  2. Click the Action dropdown
  3. Click Edit Code
  4. Select slideshow.liquid in Sections panel
  5. Paste the following code below everything: 
    <script type="text/javascript">
      
     $(".slideshow > div:gt(0)").hide();
    
    setInterval(function() { 
      $('.slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('.slideshow');
    },  3000);
      
    </script>

     

  6. You can adjust time settings by changing numbers above. 

Credit

Co-Founder of Fiyeli Coffee | Principle Consultant at Mono Commerce
Suture
Shopify Expert
648 0 108

Many thanks, here's the snippet that I ended up using. Supplied by Shopify.

 

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

  }, 5000)

};

sections.extend('slideshow', slideshowAutoExtension);

 

Mosses_Akizian
Shopify Partner
4 0 1

Cool. Thanks.

Co-Founder of Fiyeli Coffee | Principle Consultant at Mono Commerce
0 Likes
Maxime_Bérenger
Tourist
2 0 1

Hello ! 

Thank's for your sharring, i have the same problem. I use the script but it don't work with me ..

Where do you paste de code please ?

Thank's

0 Likes
Mosses_Akizian
Shopify Partner
4 0 1

Maxime– just follow my instructions above plugging Ricky's shared snippet and it should work fine.

Co-Founder of Fiyeli Coffee | Principle Consultant at Mono Commerce
0 Likes
Suture
Shopify Expert
648 0 108

You can add my snippet of code to the "assets/custom.js" file

0 Likes
Ted
Shopify Staff
Shopify Staff
1200 111 125

Hi, Maxime!

I'm just after replying to you here which also uses Ricky's suggested code. The above code that Mosses has provided will work perfectly as well. :-) 

-Ted

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

Maxime_Bérenger
Tourist
2 0 1

Hi ! Yes i show your replaying Ted and it's work very nice now ! 

Very thank you for your replaying guys 

Arach
Tourist
14 0 2

Hi Community!

Thank you Ricky for rising this subject, and everyone else for your contributions.

I have conscienciously followed your instructions but nothing happens.

Attached a screenshot of the code lines I added at the very end of the slideshow.liquid file as recommended by Mosses.

I am using the Narrative theme provided by Shopify.
Anything I am doing wrong or any reco?

Thanks!

Arach
0 Likes