Hovering on the animated thumb-buttons will pause the slider and continue from the place when it was paused.
A Pen by Saikat Chakrabortty on CodePen.
<div class="container"> | |
<div id="slick"> | |
<div> | |
<div class="img--holder" style="background-image: url(http://placehold.it/1920x1080);"></div> | |
</div> | |
<div> | |
<div class="img--holder" style="background-image: url(http://placehold.it/1920x1080/849695/ffffff);"></div> | |
</div> | |
<div> | |
<div class="img--holder" style="background-image: url(http://placehold.it/1920x1080/978298/000000);"></div> | |
</div> | |
</div> | |
<div style='position: absolute; top: 10px;'>jhjhsdjh | |
<!-- this is a fixed element --> | |
</div> | |
<!-- /#slick --> | |
</div> | |
<!-- /.container --> |
/** | |
* @fileoverview Slick fullscreen slider | |
* | |
* @author Alex Pivtorak <alex.pivtorak@gmail.com> | |
* @version 0.7 | |
*/ | |
'use strict'; | |
jQuery(function($) { | |
var el, set, timeRemain, sliderContinue; | |
// App | |
var Application = { | |
settings: { | |
sliderAutoplaySpeed: 7000, | |
sliderSpeed: 1200 | |
}, | |
elements: { | |
slider: $('#slick'), | |
slickAllThumbs: $('.slick-dots button'), | |
slickActiveThumb: $('.slick-dots .slick-active button'), | |
}, | |
init: function() { | |
set = this.settings; | |
el = this.elements; | |
this.slider(); | |
}, | |
/** | |
* Slider | |
*/ | |
slider: function() { | |
el.slider.on('init', function() { | |
$(this).find('.slick-dots button').text(''); | |
Application.dotsAnimation(); | |
}); | |
el.slider.slick({ | |
arrows: false, | |
dots: true, | |
autoplay: true, | |
autoplaySpeed: set.sliderAutoplaySpeed, | |
fade: false, | |
speed: set.sliderSpeed, | |
pauseOnHover: false, | |
pauseOnDotsHover: true | |
}); | |
$('.slick-dots').hover( | |
function() { | |
var trackWidth = $('.slick-dots .slick-active button').width(); | |
$('.slick-dots .slick-active button').stop().width(trackWidth); | |
el.slider.slick('slickPause'); | |
clearTimeout(sliderContinue); | |
}, | |
function() { | |
Application.dotsAnimation(timeRemain); | |
var trackWidth = $('.slick-dots .slick-active button').width(); | |
sliderContinue = setTimeout(function() { | |
el.slider.slick('slickNext'); | |
el.slider.slick('slickPlay'); | |
}, timeRemain); | |
} | |
); | |
el.slider.on('beforeChange', function() { | |
$('.slick-dots button').stop().width(0); | |
}); | |
el.slider.on('afterChange', function() { | |
$('.slick-dots button').width(0); | |
Application.dotsAnimation(); | |
}); | |
}, | |
/** | |
* | |
* @param remain {number} | |
*/ | |
dotsAnimation: function(remain) { | |
if (remain) { | |
var newDuration = remain; | |
} else { | |
var newDuration = set.sliderAutoplaySpeed; | |
} | |
$('.slick-dots .slick-active button').animate({ width: '100%' }, | |
{ | |
duration: newDuration, | |
easing: 'linear', | |
step: function(now, fx) { | |
var timeCurrent = Math.round((now*set.sliderAutoplaySpeed)/100); | |
timeRemain = set.sliderAutoplaySpeed - timeCurrent; | |
} | |
} | |
); | |
}, | |
}; | |
//Init | |
Application.init(); | |
$(window).load(function() { | |
$('.slick-slide .img--holder').height($(window).height()); | |
}); | |
$(window).resize(function() { | |
$('.slick-slide .img--holder').height($(window).height()); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.min.js"></script> |
Hovering on the animated thumb-buttons will pause the slider and continue from the place when it was paused.
A Pen by Saikat Chakrabortty on CodePen.
@import "compass"; | |
@import "compass/reset"; | |
@import "compass/css3"; | |
// Clearfix | |
.cf { | |
&:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
} | |
// Border box | |
*, *:before, *:after { | |
box-sizing: border-box; | |
} | |
.container { | |
position: relative; | |
} | |
.slick-dots { | |
@extend .cf; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
padding: 0 3px; | |
li { | |
cursor: pointer; | |
float: left; | |
width: 33.3%; | |
background: #000; | |
padding: 0; | |
border-right: 1px solid #fff; | |
&:last-child { | |
border: none; | |
} | |
&, & button { | |
outline: none; | |
} | |
button { | |
background: #99B386; | |
border: none; | |
width: 0px; | |
height: 10px; | |
padding: 0; | |
cursor: pointer; | |
display: block; | |
} | |
} | |
} | |
.slick-slide .img--holder { | |
background-repeat: no-repeat; | |
background-position: 50% 50%; | |
background-size: cover; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.min.css" rel="stylesheet" /> |