Shopify themes, liquid, logos, and UX
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
This is an accepted solution.
You're welcome, check it, if it works, please mark my answer as a solution.
Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,
This is an accepted solution.
Worked perfectly, thank you! 🙂
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>' ); } });
Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,
The code I have provided doesn't cause that issue, remove your edits and use mine.
Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,
This is an accepted solution.
You're welcome, check it, if it works, please mark my answer as a solution.
Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,
This is an accepted solution.
Worked perfectly, thank you! 🙂
Hello Sarhov, I have a similar problem. I want to create a new section featured-collection in order to show the collection products carousel in random order, but I don't find a sorting option or a similar javascript code. I use dawn theme, can you help me please?
Thank you
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024