Sliders are one of the most impressing parts of homepages. They are designed to preview special parts of the site, such as news, products and etc. in a glance. The following code is a full width slider which is simple but power full. It has a navigation arrow. When a user hovers it, it shows a part of the next image. Enjoy!
HTML
<!-- This script got from www.devanswer.com -->
<div class="slider-wrapper">
<div class="slider">
<div class="slider--item" style="background-image: url(http://devanswer.com/codes/files/slider-1.jpg)">
</div>
<div class="slider--item" style="background-image: url(http://devanswer.com/codes/files/slider-2.jpg)">
</div>
<div class="slider--item" style="background-image: url(http://devanswer.com/codes/files/slider-3.jpg)">
</div>
<div class="slider--item" style="background-image: url(http://devanswer.com/codes/files/slider-4.jpg">
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
/* Slider */
.slick-slider
{
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slider-wraper {
width: 100vw;
height: 100vh;
}
.slider--item {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
.slick-slide {
position: relative;
outline: none;
z-index: 1;
}
.slick-slide.slick-current {
z-index: 2;
}
.slick-arrow {
position: absolute;
width: 150px;
top: 0;
height: 100%;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0);
text-indent: -9999px;
z-index: 999;
cursor: pointer;
}
.slick-arrow:before {
content: "";
position: absolute;
display: block;
width: 42px;
height: 42px;
top: 50%;
margin-top: -21px;
-webkit-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-khtml-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-moz-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-ms-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-o-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
}
.slick-arrow:after {
content: "";
position: absolute;
display: block;
height: 2px;
width: 160px;
top: 50%;
background-color: white;
-webkit-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-khtml-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-moz-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-ms-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
-o-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
opacity: 0;
}
.slick-arrow.slick-prev {
left: 0;
}
.slick-arrow.slick-prev:before {
border-top: 2px solid white;
border-left: 2px solid white;
left: 50px;
-webkit-transform: rotate(-45deg);
-khtml-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.slick-arrow.slick-prev:after {
left: 300px;
}
.slick-arrow.slick-prev:hover:before {
left: 120px;
}
.slick-arrow.slick-prev:hover:after {
left: 113px;
opacity: 1;
width: 80px;
}
.slick-arrow.slick-next {
right: 0;
}
.slick-arrow.slick-next:before {
border-bottom: 2px solid white;
border-right: 2px solid white;
right: 50px;
-webkit-transform: rotate(-45deg);
-khtml-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.slick-arrow.slick-next:after {
right: 300px;
}
.slick-arrow.slick-next:hover:before {
right: 120px;
}
.slick-arrow.slick-next:hover:after {
right: 113px;
opacity: 1;
width: 80px;
}
.slick-dots {
padding: 0;
margin: 0;
width: 100%;
position: absolute;
bottom: 30px;
text-align: center;
}
.slick-dots li {
display: inline-block;
vertical-align: middle;
margin: 0 6px;
}
.slick-dots li.slick-active button {
background-color: white;
height: 14px;
width: 14px;
}
.slick-dots li.slick-active button:hover {
background-color: white;
}
.slick-dots li button {
outline: none;
display: block;
width: 18px;
height: 18px;
border: 1px solid white;
background-color: rgba(255, 255, 255, 0);
text-indent: -9999px;
border-radius: 100%;
cursor: pointer;
-webkit-transition: all, 0.2s, ease-in 1s ease-in-out;
-khtml-transition: all, 0.2s, ease-in 1s ease-in-out;
-moz-transition: all, 0.2s, ease-in 1s ease-in-out;
-ms-transition: all, 0.2s, ease-in 1s ease-in-out;
-o-transition: all, 0.2s, ease-in 1s ease-in-out;
transition: all, 0.2s, ease-in 1s ease-in-out;
}
.slick-dots li button:hover {
background-color: rgba(255, 255, 255, 0.5);
}Javascript
var $slider = $('.slider');
var $slickTrack = $('.slick-track');
var $slickCurrent = $('.slick-current');
var slideDuration = 900;
//RESET ANIMATIONS
// On init slide change
$slider.on('init', function(slick){
TweenMax.to($('.slick-track'), 0.9, {
marginLeft: 0
});
TweenMax.to($('.slick-active'), 0.9, {
x: 0,
zIndex: 2
});
});
// On before slide change
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
TweenMax.to($('.slick-track'), 0.9, {
marginLeft: 0
});
TweenMax.to($('.slick-active'), 0.9, {
x: 0
});
});
// On after slide change
$slider.on('afterChange', function(event, slick, currentSlide){
TweenMax.to($('.slick-track'), 0.9, {
marginLeft: 0
});
$('.slick-slide').css('z-index','1');
TweenMax.to($('.slick-active'), 0.9, {
x: 0,
zIndex: 2
});
});
//SLICK INIT
$slider.slick({
speed: slideDuration,
dots: true,
waitForAnimate: true,
useTransform: true,
cssEase: 'cubic-bezier(0.455, 0.030, 0.130, 1.000)'
})
//PREV
$('.slick-prev').on('mouseenter', function(){
TweenMax.to($('.slick-track'), 0.6, {
marginLeft: "180px",
ease: Quad.easeOut
});
TweenMax.to($('.slick-current'), 0.6, {
x: -100,
ease: Quad.easeOut
});
});
$('.slick-prev').on('mouseleave', function(){
TweenMax.to($('.slick-track'), 0.4, {
marginLeft: 0,
ease: Sine.easeInOut
});
TweenMax.to($('.slick-current'), 0.4, {
x: 0,
ease: Sine.easeInOut
});
});
//NEXT
$('.slick-next').on('mouseenter', function(){
TweenMax.to($('.slick-track'), 0.6, {
marginLeft: "-180px",
ease: Quad.easeOut
});
TweenMax.to($('.slick-current'), 0.6, {
x: 100,
ease: Quad.easeOut
});
});
$('.slick-next').on('mouseleave', function(){
TweenMax.to($('.slick-track'), 0.4, {
marginLeft: 0,
ease: Quad.easeInOut
});
TweenMax.to($('.slick-current'), 0.4, {
x: 0,
ease: Quad.easeInOut
});
});