Random start carousel...

[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!

[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! :-)