How to fix mobile button description not shifting in narrative slideshow autoplay?

Store Design
1

So although there have been a few threads about this, none of the provided codes work fine.
I used this:

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

The problem: On Mobile, the button description and the button do not shift (look at the three dots and notice with the next selected slide the description+button does not move into the middle of the screen. The images shift as expected, On desktop it works fine. Here are some screenshots.
Thanks for help!
Best,
CW

IMG_5177.jpg
IMG_5177.jpg750Ă—606 20 KB

IMG_5178.jpg
IMG_5178.jpg750Ă—678 20 KB

IMG_5176.jpg
IMG_5176.jpg750Ă—562 14.2 KB

1 Like
2

@Chris236

sorry for that issue

can you please try this code

https://github.com/Maxosys/Shopify-Theme/blob/master/sections/slideshow.liquid

3

shall I just add it to the bottom of the slideshow.liquid?

1 Like
4

@Chris236

try to replace whole slideshow section code

5

Thank you, but unfortunately it does not work. It breaks the entire slide show (not even the pictures are displayed).

Screenshot 2021-12-06 at 19.06.10.png
Screenshot 2021-12-06 at 19.06.10.png2638Ă—674 6.28 KB

1 Like
6

@Chris236

oh sorry for that

it can be done new customization slideshow section

1 Like
7

what do you mean by “it can be done new customization slideshow section”?

8

Do you mean that I should create a new section (with your code) and replace the old one?

9

@Chris236

i mean redevelop slideshow section