Narrative slideshow mobile text heading

DavidTowcester
Shopify Partner
30 0 3

Hope someone can help!

I was kindly referred to some JS to autoplay the slideshow in the Narrative theme.

It works really well BUT, in mobile view, the Text heading is not autoplaying with the slides. You still have to manually swipe them across. This isn't a problem with the desktop version, but it needs a bit of code for the text to auto scroll with the slide. The code I have to do this is below, but can anyone suggest what to do to make the mobile element work?

Thanks

Dave

This was added to Custom.js section in ASSETS:

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

}, 4000)

};

sections.extend('slideshow', slideshowAutoExtension);

KetanKumar
Shopify Partner
18850 1978 6981

@DavidTowcester 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

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
0 Likes
DavidTowcester
Shopify Partner
30 0 3

Thanks for helping, I really appreciate it.

https://hophero.myshopify.com/

hero1

KetanKumar
Shopify Partner
18850 1978 6981

@DavidTowcester 

Thanks for store url bt sorry your store is password protect 

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
0 Likes
DavidTowcester
Shopify Partner
30 0 3

Sorry password is hero1

0 Likes
KetanKumar
Shopify Partner
18850 1978 6981

@DavidTowcester 

you have used desktop content its easy for your and much better way

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
0 Likes
DavidTowcester
Shopify Partner
30 0 3

But it doesn't work in mobile. Do you have a solution for this?

0 Likes
KetanKumar
Shopify Partner
18850 1978 6981

@DavidTowcester 

Yes look like this 

KetanKumar_0-1621608495141.png

 

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
0 Likes
DavidTowcester
Shopify Partner
30 0 3

 

But in mobile mode the message is underneath the slideshow images, and the message doesn't scroll with the image slideshow?

DavidTowcester_0-1621610208761.png

 

0 Likes
DavidTowcester
Shopify Partner
30 0 3

Looking at your mobile version it works, but mine doesn't seem to. How did you get it working at your end?

0 Likes