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><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.devanswer.com">Developer Code</a>
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
                });
            });