How To Change Background Colour With Each Slide (Brooklyn Theme)

Store Design
1

Hey Everyone.

I’m hoping someone can help…

I wondered if anyone knows how to change the background colour with each slide change while using the slideshow element in shopify (Brooklyn theme)

Any help would be very much appreciated!

URL: www.notacard.com

Thanks in advance!

1 Like
2

@mrjaengland

oh sorry i can’t see any slider section can you please show me!

3

Hi,

I checked it in my device in that there is no any slideshow section is found.

Thank you.

4

Hi @mrjaengland ,

Are you trying to change the background color of the body?

Screenshot.png
Screenshot.png1891×917 42.5 KB

Please go to theme.js.liquid file, find ‘function SlideshowSection’ and add code here:

Screenshot.png
Screenshot.png1151×587 43 KB

Code:

this.$slideshow.on('beforeChange', function(event, slick, currentSlide, nextSlide){
      if (nextSlide == 0) {
        $('body').css('background-color', '#7fdfd2');
      } else if (nextSlide == 1) {
        $('body').css('background-color', '#01DBC6');
      }
});

You can manually change the color code according to the slider you want.

Hope it helps!