Demo for Beautiful Full Width Slider

Preview
Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
/* 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);
}
</style>

</head>
<body>
<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>
<script>
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
                });
            });
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
Other Codes

Rotating Slider

Slider with rotating circular slides and texts.
Slider with Overlay Transition Effect

An slider with interesting transition effect and text on the images.
Circular Slideshow

Circular slider with images and text.
Automatic Slideshow with Rotation

Automatic slider with rotation effect.