Horizontal Sliders with Gradients

This often applies to mobile. A horizontal slider with multiple slides showing at once has the leftmost and rightmost slides partially covered up with gradients, to give the appearance as though they’re fading out.

How To

HTML

You’ll need to include a gradient div next to your slider within your HTML.

<div class="pb-8 slider-sub-container">
	<div class="slider-sub-wrapper">
		/* slider goes here */
		<div class="slider-sub-gradient" aria-hidden="true"></div>
	</div>
	<div class="slider-sub-arrows blue-arrows mt-3 mt-md-6 mt-lg-0"></div>
</div>

Styles

Of course, your SCSS will also need to be modified to allow for styling of the gradients. The left and right gradients are added with :before and :after pseudo-classes. If you only need a gradient on one side, you can just comment out the one you don’t need. The widths of the gradients are set using percentages, which can be changed as needed for your design.

.slider-gradient-wrapper {
  position: relative;
  .slider-sub-gradient {
    &:before {
      // Between 768px - 991px
      @include media-breakpoint-only(md) {
        content: '';
        position: absolute;
        top: 0;
        left: -15px;
        bottom: 0;
        width: 35%;
        background: linear-gradient(to right, rgba($white,1) 0%,rgba($white,0) 100%);
      }
    }
    &:after {
      // Between 768px - 991px
      @include media-breakpoint-only(md) {
        content: '';
        position: absolute;
        top: 0;
        right: -15px;
        bottom: 0;
        width: 35%;
        background: linear-gradient(to right, rgba($white,0) 0%,rgba($white,1) 100%);
      }
    }
  }
}

Example Sites

• TLC Community Credit Union (Ads below the rates section. Tablet size only. Gradient only on right side.)
• Central National Bank (Poteau) (Ads below the hero. Tablet size only. Gradients on both left and right.)

Tags: BS3, BS4, slider, slick slider, gradient