← Snippets - Script - Slick Slider Customization

Bordered Slides with the Same Height

You’d think that the adaptive slider height setting would be enough, but with borders and the way the content height can change it might not be that easy. Thanks to flexbox and some careful targeting this is doable!

How To

Styles

.slider-bordered {
  display: none;
  margin: 0 -15px;
  &.slick-initialized {
    display: block;
  }
  .slide {
    padding-right: 15px;
    padding-left: 15px;
    .slide-inner {
      padding: 50px;
      border: 1px solid $gray-200;
    }
  }
  // Making them all the same height
  .slick-track{
    @extend .d-flex;
    .slick-slide{
      @extend .d-flex;
      height: auto;
      @extend .align-items-center;
      @extend .justify-content-center;
      > div:first-child,.slide,.slide-inner {
        @extend .h-100;
      }     
    }
  }
}

Script - sliders.js

This is the else section for the slider (the one that shows on the published page). Note that adaptiveHeight is set to false, because we’re handling it entirely with CSS/flexbox.

$('.slider-bordered').slick({
  dots: false,
  arrows: false,
  infinite: true,
  fade: false,
  speed: 300,
  adaptiveHeight: false,
  autoplaySpeed: 8000,
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: 992,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    },
    {
      breakpoint: 640,
      settings: {
        slidesToShow: 1,
        dots:true
      }

    }
  ]
});

HTML

Here’s an example slider setup you can use. {% raw %}

<div class="slider-bordered mt-2 mt-md-4">
  <div class="slide remove-blank">
    <div class="slide-inner">
      <div data-content-block="borderSlide1" data-content="content" data-editable="editable" class="content">
        {{#page.borderSlide1}}
            {{& content}}
          {{/page.borderSlide1}}
          <!-- @if NODE_ENV!='production' -->
              <h3><img src="https://dummyimage.com/22x22" alt="">A Big Thank You - h2</h3>
              <p class="smallest">We're proud to offer the Fishback Financial Corporation <a href="">Community Fund</a>. Smallest body copy.</p>
              <p><a href="" class="btn btn-primary">CF Application</a></p>
          <!-- @endif -->
      </div>
    </div>
  </div>
  <div class="slide remove-blank">
    <div class="slide-inner">
      <div data-content-block="borderSlide2" data-content="content" data-editable="editable" class="content">
        {{#page.borderSlide2}}
            {{& content}}
          {{/page.borderSlide2}}
          <!-- @if NODE_ENV!='production' -->
              <h3><img src="https://dummyimage.com/22x22" alt="">Upcoming Events</h3>
              <p class="smallest">We don't just do business in the community, we give back. Here's some text about upcoming events. <a href="">Community Fund</a>. Smallest body copy.</p>
              <p><a href="" class="btn btn-primary">news & Events</a></p>
          <!-- @endif -->
      </div>
    </div>
  </div>
  <div class="slide remove-blank">
    <div class="slide-inner">
      <div data-content-block="borderSlide3" data-content="content" data-editable="editable" class="content">
        {{#page.borderSlide3}}
            {{& content}}
          {{/page.borderSlide3}}
          <!-- @if NODE_ENV!='production' -->
              <h3><img src="https://dummyimage.com/22x22" alt="">Safety First</h3>
              <p class="smallest">We provide a number of resources for our customers. Everything from FAQs to financial guidance!</p>
              <p><a href="" class="btn btn-primary">ID Theft Smart</a></p>
          <!-- @endif -->
      </div>
    </div>
  </div>
</div>

{% endraw %}

Example Sites

Tags: bs3, bs4