Netflix Slider

In this example below you will see how to do a Netflix Slider with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bork, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bork ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Netflix Slider</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      * {
  margin: 0;
  padding: 0;
}

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

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <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>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bork/netflix-slider-zBXwda */
* {
  margin: 0;
  padding: 0;
}

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


/*Downloaded from https://www.codeseek.co/bork/netflix-slider-zBXwda */
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);
    });
};

Comments