Kinsey

# Slider Background Change

This effect temporarily adjusts the current page appearance based on the active slide, emphasizing the unique 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 where the background color changes.
  • .js-slider-projects-fullscreen__sidebar – Optional sidebar element. See the right-side 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 set.

# Slide Attributes

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

  • data-slide-background="[color code]" – Slide dynamic background.
  • data-slide-side-background="[color code]" – Sidebar dynamic background. See the right-side 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

Page header adjustments have no effect when the header sticky scene is in progress. This is intentional to prevent possible conflicts 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

← Parent Class Hover →