← Snippets - Script - Slick Slider Customization

Slider Falling Out of the Container

This type of slider is tricky to pull off, and has a lot of caveats, but we can make it work if the design calls for it.

Caveats

The slider cannot autoplay (and as a result cannot have a pause/play button).

Because it cannot autoplay, it will need arrows / dots (or both) in order to satisfy ADA requirements.

The slider cannot loop infinitely.

How To

Script - scripts > sliders.js

Here is an example of what your slider code could look like. Explanations for key pieces are included below.

$('.resources__slider').slick({
   accessibility: !inCms,
   adaptiveHeight: !inCms,
   dots: true,
   appendDots: '.resources__slider-dots',
   arrows: false,
   autoplay: false,
   autoplaySpeed: 8000,
   cssEase: 'linear',
   infinite: false,
   fade: false,
   slidesToShow: 3, // needs it set to 3 to allow the off-the-edge setup
   responsive: [{
         breakpoint: 992,
         settings: {
            slidesToShow: 2
         }
      },
      {
         breakpoint: 540,
         settings: {
            slidesToShow: 1,
            appendDots: '.resources__slider-mobile-dots',
         }
      }
   ]
});

As noted above, it uses dots to satisfy the ADA requirement. The autoplay setting is false, as is infinite.

For all sliders, fade should be set to false, regardless of if it falls off the edge or not.

The slidesToShow property is set to 3 (or whatever you need it to be as per design) regardless of if the user is in or out of the CMS. If set to .length of available slides in the CMS, it will become very difficult to edit.

When responding, the slides shown decreases with the size of the window to allow things to fit properly.

CSS

Here is an example of how the CSS for your slider could look. Explanations of the key pieces are below.

.resources {
	position: relative;
	overflow: hidden;
	&__slider {
		opacity:0;
		min-height:200px;
		max-height:200px;
		margin: 0;
		&.slick-initialized {
		  opacity:1;
		  min-height:100px;
		  background:transparent;
		  max-height:none;
		}
		.slick-list {
			overflow: visible;
		}
		&-associated {
			z-index: 1;
			background-color: $white;
			position: relative;
			&:before,&:after {
				// ≥ 768px
				@include media-breakpoint-up(md) {
				 	content: '';
				 	height: 100%;
				 	background-color: $white;
				 	position: absolute;
				 	top: 0;
				 	bottom: 0; 
				}
			}
			&:before {
				width: 100%;
				left: -100%;
			}
			&:after {
				width: 15px;
				right: -15px;
			}
		}
	}
}

First, the wrapper div for the slider (.resources) must have overflow: hidden; on it, or there will be horizontal scrolling.

The properties on __slider and &.slick-initialized are properties that allow it to hide on initial load of the page, and then fade in once the slider is fully loaded. This prevents the page from showing all the slides stacked/unstyled initially, and then “snapping” to the correct view once the page is fully loaded.

The .slick-list class needs overflow: visible; set on it - this is the piece that controls the look of the slides falling off the edge.

This particular slider was in a col class with another col class next to it that contained text, which is the &-associated piece. That area was given a background and before/after pseudo elements to hide the slider that would normally appear behind the text as the slider traveled further to the left. That overlap would normally be stopped by the overflow on the slick-list class, but since we need slick-list to have overflow set to visible, we needed to come up with another solution so that the text wouldn’t get overlapped.

Example Sites

Tags: bs4, slick, slider