# Slider Background Change

The effect allows to temporary adjust the current page appearance depending on the currently active slide. This emphasizes the different look and feel of portfolio projects.

# Markup

<section
  class="js-slider-background bg-portfolio-1 section section-dynamic-background section-fullheight section-slider-projects-fullscreen" 
  data-arts-os-animation="true"
  >
  ...
  <!-- slider IMAGES -->
  <div class="swiper-container js-slider-projects-fullscreen__images">
    <div class="swiper-wrapper">
      <!-- item -->
      <div 
        class="swiper-slide" 
        data-slide-background="var(--color-portfolio-1)" 
        data-slide-theme="dark" 
        data-slide-header-theme="dark" 
        data-slide-header-logo="primary" 
        data-slide-side-background="var(--color-light-1)"
        >
        ...
      </div>
      ...
    </div>
  </div>
  <!-- - slider IMAGES -->
  ...
  <!-- slider SIDE BACKGROUND -->
  <div class="js-slider-projects-fullscreen__sidebar bg-white-1 slider-projects-fullscreen__sidebar section-dynamic-background"></div>
  <!-- - slider SIDE BACKGROUND -->
</section>

# Elements

  • .js-slider-background – outer section. The background color is changed here.
  • .js-slider-projects-fullscreen__sidebar – optional sidebar element. See the rightside element on this page: 📄 001-portfolio-fullscreen-slider-background-color-1.html
  • .js-slider-projects-fullscreen__images – images slider.
  • .swiper-slide – slider item (slide) with data- attributes where the effect is being set.

# Slides Attributes

The color fields accept a color HEX or RGB code or a pre-defined color CSS variable.

  • data-slide-background=[ color code ] – slide dynamic background.
  • data-slide-side-background=[] – sidebar dynamic background. See the rightside element on this page: 📄 001-portfolio-fullscreen-slider-background-color-1.html
  • data-slide-theme=[dark | light] – dynamic color theme for the outer section.
  • data-slide-header-theme=[dark | light] – dynamic color theme for the page header.
  • data-slide-header-logo=[primary | secondary] – dynamic logo version for the page header.

WARNING

The page header adjustments have no effect when the header sticky scene is in progress. This is done intentionally to prevent the possible conflict with the sticky color theme.

# Showcase

  • 📄 001-portfolio-fullscreen-slider-background-color-1.html
  • 📄 002-portfolio-fullscreen-slider-background-color-2.html
  • 📄 006-portfolio-fullscreen-slider-horizontal-cards.html
  • 📄 009-portfolio-halfscreen-slider-vertical-1.html
  • 📄 010-portfolio-halfscreen-slider-vertical-2.html
  • 📄 011-landing-page-1.html