Netflix Slider

index.html

<div class="slider-frame">
    <div class="btn prev"></div>
    <div class="btn next"></div>
    <div class="slider-container">
        <div class="slide">0</div>
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
        <div class="slide">5</div>
        <div class="slide">6</div>
        <div class="slide">7</div>
        <div class="slide">8</div>
        <div class="slide">9</div>
        <div class="slide">10</div>
        <div class="slide">11</div>
        <div class="slide">12</div>
        <div class="slide">13</div>
        <div class="slide">14</div>
        <div class="slide">15</div>
        <div class="slide">16</div>
    </div>
</div>

netflix-slider.markdown

Netflix Slider

A Pen by Peter Bork on CodePen.

License.

script.js

var scaling = 1.50;
//count
var currentSliderCount = 0;
var videoCount = $(".slider-container").children().length;
var showCount = 4;
var sliderCount = videoCount / showCount;
var controlsWidth = 40;
var scollWidth = 0;
    

$(document).ready(function(){
    //$('.slider-container .slide:nth-last-child(-n+4)').prependTo('.slider-container');
    init();
    
});
$( window ).resize(function() {
    init();
});
function init(){
    // elements
    var win = $(window);
    var sliderFrame = $(".slider-frame");
    var sliderContainer = $(".slider-container");
    var slide = $(".slide");
    
    //counts
    var scollWidth = 0;
 
    
    //sizes
    var windowWidth = win.width();
    var frameWidth = win.width() - 80;
     if(windowWidth >= 0 && windowWidth <= 414){
       showCount = 2;
   }else if(windowWidth >= 414 &&  windowWidth <= 768){
       showCount = 3;
   }else{
       showCount = 4;
   }
    var videoWidth = ((windowWidth - controlsWidth * 2) / showCount );
    var videoHeight = Math.round(videoWidth / (16/9));
    
    var videoWidthDiff = (videoWidth * scaling) - videoWidth;
    var videoHeightDiff = (videoHeight * scaling) - videoHeight;
    
  
    
    //set sizes
    sliderFrame.width(windowWidth);
    sliderFrame.height(videoHeight * scaling);
    
    
    //sliderFrame.css("top", (videoHeightDiff / 2));
    
    sliderContainer.height(videoHeight * scaling);
    sliderContainer.width((videoWidth * videoCount) + videoWidthDiff);
    sliderContainer.css("top", (videoHeightDiff / 2));
    sliderContainer.css("margin-left", (controlsWidth));
    
    slide.height(videoHeight);
    slide.width(videoWidth);
    
    //hover effect
    $(".slide").mouseover(function() {
        $(this).css("width", videoWidth * scaling);
        $(this).css("height", videoHeight * scaling);
        $(this).css("top", -(videoHeightDiff / 2));
        if($(".slide").index($(this)) == 0 || ($(".slide").index($(this))) % 4 == 0){
          // do nothing
        }
        else if(($(".slide").index($(this)) + 1) % 4 == 0 && $(".slide").index($(this)) != 0){
            $(this).parent().css("margin-left", -(videoWidthDiff - controlsWidth));
        }
        else{
            $(this).parent().css("margin-left", - (videoWidthDiff / 2));
        }
    }).mouseout(function() {
        $(this).css("width", videoWidth * 1);
        $(this).css("height", videoHeight * 1);
        $(this).css("top", 0);
        $(this).parent().css("margin-left", controlsWidth);
    });
    
    // controls
    controls(frameWidth, scollWidth);
}
function controls(frameWidth, scollWidth){
    var prev = $(".prev");
    var next = $(".next");
    
    next.on("click", function(){
        console.log(currentSliderCount);
        console.log(sliderCount);
        scollWidth = scollWidth + frameWidth;
        $('.slider-container').animate({
            left: - scollWidth
        }, 300, function(){ 
            if(currentSliderCount >= sliderCount-1){
                $(".slider-container").css("left", 0);
                currentSliderCount = 0;
                scollWidth = 0;
            }else{
                currentSliderCount++;
            }
        });        
    });
    prev.on("click", function(){
        scollWidth = scollWidth - frameWidth;
        $('.slider-container').animate({
            left: + scollWidth
        }, 300, function(){ 
            currentSliderCount--;
        });
        //$(".slider-container").css("left", scollWidth);
    });
};

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

*{
    margin: 0;
    padding: 0;
}
.slider-frame{
    background-color: #0f0;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    
    .btn{
        width: 40px;
        height: 100%;
        background: rgba(0,0,0,0.3);
        position: absolute;
        top: 0;
        z-index: 1000;
        &.prev{
            left: 0px;
        }
        &.next{
            right: 0px;
        }
    }
    .slider-container{
        transition: margin-left .2s ease, left .5s ease;
        position: absolute;
        left: 0;
        .slide{
            background-color: #f00;
            float: left;
            position: relative;
            top: 0;
            transition: width .2s ease, height .2s ease, top .2s ease;
            &:nth-child(even){
                background-color: blue;
            }
        }
    }
}