A Pen by Peter Bork on CodePen.
Created
August 22, 2021 21:13
-
-
Save bcernesto/d0e4dbf8c3f4a5c5e2c6a8a4a6b12bb6 to your computer and use it in GitHub Desktop.
Netflix Slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{ | |
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; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment