I would like to edit the code on the theme Horizon 2.1.6 so that when I add a featured collection: carousel to the homepage, it will autoplay the products in that collection without having to press an arrow.
@HiddenRose thanks for posting here ,
Please create new one section With customer m slick slider code
You can get the featured collection carousel to autoplay by tweaking the slider initialization. In many themes it looks something like this:
var carousel = new Swiper('.featured-collection-carousel', {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
This snippet makes the carousel slide automatically every 3 seconds.
That said, Horizon sometimes structures its sliders a bit differently, so this may not slot in directly depending on how your theme is set up.
If you can share your preview link, I’ll be able to check the markup/JS structure and give you the exact code that will work for your store. In the meantime, feel free to test the above and let me know how it goes.
Hi @HiddenRose
You can do that by replacing this code in resource-list-carousel.liquid file
{% render 'slideshow',
ref: slideshow_ref,
class: 'resource-list__carousel',
slides: slides,
slideshow_arrows: slideshow_arrows,
auto_hide_controls: false,
infinite: false,
initial_slide: 0,
slide_count: slide_count,
slideshow_gutters: slideshow_gutters
%}
With this code
{% render 'slideshow',
ref: slideshow_ref,
class: 'resource-list__carousel',
slides: slides,
autoplay: true,
autoplay_speed: 4,
slideshow_arrows: slideshow_arrows,
auto_hide_controls: false,
infinite: true,
initial_slide: 0,
slide_count: slide_count,
slideshow_gutters: slideshow_gutters
%}
You can change the number in the line that contains autoplay_speed to adjust the time; currently, 4 means 4 seconds.
Best regards,
Dan from Ryviu: Reviews & QA