Solved

How can I increase slideshow speed in a Narrative theme?

Gasperpremoze
Tourist
5 0 2

Hi there.

In a Narrative theme, the slideshow loops in about 7 seconds rate, but I need it to loop in 1 second rate. How do we make it work? Thank you.

https://koho.si/

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12303 2549 3702

This is an accepted solution.

@Gasperpremoze 

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

  }, 1000)

};

sections.extend('slideshow', slideshowAutoExtension);

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
36854 3637 11976

@Gasperpremoze 

sorry for that issue 

can you please check theme setting may ne allow this option if doesn't so please share your theme.js file so i will check and update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

dmwwebartisan
Shopify Partner
12303 2549 3702

This is an accepted solution.

@Gasperpremoze 

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

  }, 1000)

};

sections.extend('slideshow', slideshowAutoExtension);

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Gasperpremoze
Tourist
5 0 2

@dmwwebartisan 

Thank you dmwwebartisan it works perfectly.

Now there is another issue - the transition between slides. Every time it transit, it flashes a white screen and it feels annoying. Can it transit with a nice fade in 200 milliseconds, without a white screen between?

Thank you.

dmwwebartisan
Shopify Partner
12303 2549 3702

@Gasperpremoze 

Please remove previous js script and add this script

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

  }, 200)

};

sections.extend('slideshow', slideshowAutoExtension);
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Gasperpremoze
Tourist
5 0 2

@dmwwebartisan 

Sorry, i didn't explain the problem very well. The speed of the loop 1000 (1 second) is perfect. But between the transition of the slides, it flashes the white light. It goes like this:

1. SlideA - (1second)

2. Transition - it flashes white color for about 200 (0.2 seconds)

3. SlideB - (1second)

Step "2" is the problem because it flashes the white color between slides and it feels annoying.

 

dmwwebartisan
Shopify Partner
12303 2549 3702

@Gasperpremoze 

If helpful then please Like Solution

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app