Hi,
I've managed to enlarge the Brooklyn home page carousel and use this code in the .js file to randomise the initial slide:
initialSlide:(2*Math.floor(Math.random() * 34))
Unfortunately this has broken the product image carousels in mobile product view as it must use this variable as well, I've hunted to try and see how it works but am stuck. Could anyone suggest a workaround?
Much appreciated!
Solved! Go to the solution
Hi, @diseno
Elle here from Shopify!
I've moved your post to the Design board as you're more likely to get a response here!
Cheers,
Elle
Elle | 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
sarhov is here...
Open theme.js file,
There find this part of code.
/* * Init slick slider * - Add any additional option changes here * - https://github.com/kenwheeler/slick/#options */ settings.$element.slick({ accessibility: settings.accessibility, arrows: settings.arrows, dots: settings.dots, slide: '.hero__slide', /* eslint-disable shopify/jquery-dollar-sign-reference */ prevArrow: $('.slick-prev'), nextArrow: $('.slick-next'), appendDots: $('.hero__dots-wrapper'), /* eslint-enable shopify/jquery-dollar-sign-reference */ adaptiveHeight: false, draggable: false, fade: true, focusOnChange: settings.focusOnChange, autoplay: slickTheme.cache.$hero.data('autoplay'), autoplaySpeed: slickTheme.cache.$hero.data('autoplayspeed'), onInit: this.onInit, onBeforeChange: this.beforeChange, onAfterChange: this.afterChange, customPaging: function(slick, index) { var labelString = index === 0 ? slickTheme.vars.activeSlideA11yString : slickTheme.vars.loadSlideA11yString; return ( '<a href="#Hero" aria-label="' + labelString.replace('[slide_number]', index + 1) + '" data-slide-number="' + index + '" data-slide-pagination aria-controls="SlickSlide' + (index + 1) + '"></a>' ); } });
Now put this code after onInit...
initialSlide: Math.floor(Math.random() * 4),
The number 4 is for generating number in 4, so if you have 3 slides, change this to 3.
So the final version of this chunk of code should look like this.
/* * Init slick slider * - Add any additional option changes here * - https://github.com/kenwheeler/slick/#options */ settings.$element.slick({ accessibility: settings.accessibility, arrows: settings.arrows, dots: settings.dots, slide: '.hero__slide', /* eslint-disable shopify/jquery-dollar-sign-reference */ prevArrow: $('.slick-prev'), nextArrow: $('.slick-next'), appendDots: $('.hero__dots-wrapper'), /* eslint-enable shopify/jquery-dollar-sign-reference */ adaptiveHeight: false, draggable: false, fade: true, focusOnChange: settings.focusOnChange, autoplay: slickTheme.cache.$hero.data('autoplay'), autoplaySpeed: slickTheme.cache.$hero.data('autoplayspeed'), onInit: this.onInit, initialSlide: Math.floor(Math.random() * 4), onBeforeChange: this.beforeChange, onAfterChange: this.afterChange, customPaging: function(slick, index) { var labelString = index === 0 ? slickTheme.vars.activeSlideA11yString : slickTheme.vars.loadSlideA11yString; return ( '<a href="#Hero" aria-label="' + labelString.replace('[slide_number]', index + 1) + '" data-slide-number="' + index + '" data-slide-pagination aria-controls="SlickSlide' + (index + 1) + '"></a>' ); } });
The code I have provided doesn't cause that issue, remove your edits and use mine.
Success.
You're welcome, check it, if it works, please mark my answer as a solution.
Success.
Subject | Author | Posted |
---|---|---|
13m ago | ||
15m ago | ||
16m ago | ||
16m ago | ||
19m ago |