Slick fullscreen slider

index.html

<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 -->

script.js

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

});

scripts

<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>

slick-fullscreen-slider.markdown

Slick fullscreen slider

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.

License.

style.scss

@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;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.min.css" rel="stylesheet" />