Random start carousel...

Solved
Tourist
4 1 0

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!

 

 

0 Likes
Shopify Staff
Shopify Staff
290 6 33

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

0 Likes
Highlighted
Shopify Partner
452 78 85

@diseno 

 

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).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
4 1 0
Thank you for your reply! The issue I have is that the random initial value causes a problem with the mobile view of products, ie they don’t start at 0, is there a way to resolve this?

Much appreciate your help!

Simon
0 Likes
Shopify Partner
452 78 85

@diseno 

 

The code I have provided doesn't cause that issue, remove your edits and use mine.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
4 1 0
Brilliant, thank you so much!!!
0 Likes

Success.

Shopify Partner
452 78 85

@diseno 

 

You're welcome, check it, if it works, please mark my answer as a solution.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
1 Like

Success.

Tourist
4 1 0

Worked perfectly, thank you! :-)

0 Likes