Change header icons color depending on slide

Store Design
1

Hello everyone!

I’d like to know if it’s possible to set different header icon colors depending on the current slide in a slideshow? I’m using the Dawn theme in my store and I made the header overlaps the slideshow. But in some slides icons have the same color as the top part of the photo, so I want to make the icons visible again.

My store https://soymne.com/

Password skayma

rerf2010rerf_0-1677335052880.png
rerf2010rerf_0-1677335052880.png1872×809 181 KB

2

Yes, it’s possible to set different header icon colors depending on the current slide in a slideshow in the Dawn theme.

You can achieve this using JavaScript to detect the current slide in the slideshow and change the color of the header icons accordingly. Here’s a general approach to achieve this

Here’s an example of how to implement this approach:

  1. In your theme’s stylesheet, set the default color of the header icons:
.site-header__icon {
  color: #fff; /* default color */
}
  1. In your slideshow section in the Dawn theme, add a custom data attribute to each slide element that indicates the color of the header icons for that slide:
  1. In your slideshow section in the Dawn theme, add a custom data attribute to each slide element that indicates the color of the header icons for that slide:
$('.slideshow').on('afterChange', function(event, slick, currentSlide) {
  var $currentSlide = $(slick.$slides[currentSlide]);
  var headerColor = $currentSlide.data('header-color');
  if (headerColor) {
    $('.site-header__icon').css('color', headerColor);
  } else {
    $('.site-header__icon').css('color', ''); // reset to default color
  }
});

This code listens for the afterChange event on the .slideshow element, and then uses the currentSlide parameter to get the current slide element. It reads the value of the data-header-color attribute on the slide element, and if it’s set, it sets the color of the header icons to that value. If the data-header-color attribute is not set for the current slide, it resets the color of the header icons to the default color.