How To
Script
This is the script to add a dynamic pause/play button to a slick slider. The JS can be placed inside the “else” section within the sliders.js file. You will need to create a new copy of this code with unique IDs for each slider that has a play/pause button.
// Hero Slider Toggle Play/Pause
// ==================================================================================================================================
$('#pause-slider').on('click', function() {
$(this).removeClass('active');
$('#play-slider').addClass('active');
$('.slider').slick('slickPause');
});
$('#play-slider').on('click', function() {
$(this).removeClass('active');
$('#pause-slider').addClass('active');
$('.slider').slick('slickPlay');
});
Styles
The CSS can be placed inside of whatever file–I usually place in the home.scss file since that’s where the hero pauseplay button is usually needed. This example has the pause/play button next to the dots in the slick slider. The pause/play buttons are both being created through pure CSS–a CSS triangle for the play button, and two borders for the pause button.
.hero-navigation-outer {
.toggle-autoplay {
background-color: $white;
border: 0;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
padding: 4px;
transition: all .2s ease-in-out;
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
left: 0;
@include hover-focus {
transform: scale(1.2);
}
&:before {
content: '';
display: block;
width: 7px;
height: 7px;
}
&.active {
visibility: visible !important;
opacity: 1 !important;
z-index: 2 !important;
}
&#pause-slider {
&:before {
border-left: 3px solid $default-color;
border-right: 3px solid $default-color;
}
}
&#play-slider {
padding: 4px 3px 4px 5px;
&:before {
border-style: solid;
border-width: 3.5px 0 3.5px 6.5px;
border-color: transparent transparent transparent $default-color;
}
}
}
.slick-dots {
// slick dot styling can go here
}
}
HTML
The HTML can be placed in the mustache file, but make sure it goes BELOW the slider itself. If it goes within the slick slider, it can cause issues where slick tries to create a new slide just for that. The absolute positioning handles the placement of the dots/pauseplay button.
<div class="hero-navigation-outer">
<div class="container">
<div class="hero-navigation">
<button class="toggle-autoplay active" id="pause-slider"><span class="sr-only">Click here to stop the slider's autoplay feature</span></button>
<button class="toggle-autoplay" id="play-slider"><span class="sr-only">Click here to start the slider's autoplay feature</span></button>
</div>
</div>
</div>
Example Sites
Tags: bs3, bs4, slick, slider, pause, play, ada, hero