How to fix random start carousel issue on Brooklyn home page?

[diseno]

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!

[sarhov · Accepted solution]

@diseno 

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

[Elle]

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

[sarhov]

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

[diseno]

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

[sarhov]

@diseno 

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

[diseno]

Brilliant, thank you so much!!!

[sarhov · Accepted solution]

@diseno 

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

[diseno · Accepted solution]

Worked perfectly, thank you! 🙂

[prestigehome]

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