How to create a Netflix style slider component using CSS and JavaScript
The Netflix slider component is one of the most popular slider components on the internet. This slider component allows users to horizontally scroll content and hover over items to see a preview.
It looks nice? Now let’s get into the code. You can use any of these scripts to create a Netflix style slider component as you like.
Netflix style slider component with navigation buttons using pure CSS
In hovering flight:
Use the following HTML and CSS snippets to create the above Netflix style slider component.
HTML code
Netflix Carousel
NETFLIX
CSS code
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: #000;
}
h1 {
font-family: Arial;
color: red;
text-align: center;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100%);
overflow: hidden;
scroll-behavior: smooth;
}
.wrapper section {
width: 100%;
position: relative;
display: grid;
grid-template-columns: repeat(5, auto);
margin: 20px 0;
}
.wrapper section .item {
padding: 0 2px;
transition: 250ms all;
}
.wrapper section .item:hover {
margin: 0 40px;
transform: scale(1.2);
}
.wrapper section a {
position: absolute;
color: #fff;
text-decoration: none;
font-size: 6em;
background: black;
width: 80px;
padding: 20px;
text-align: center;
z-index: 1;
}
.wrapper section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}
.wrapper section a:nth-of-type(2) {
top: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}
@media only screen and (max-width: 600px) {
a.arrow__btn {
display: none;
}
}
In hovering flight:
Use the following HTML and CSS snippets to create the above Netflix style slider component.
HTML code
Netflix Carousel
Pure CSS Netflix Video Carousel
Top Gear
Top Gear
Top Gear
Top Gear
Top Gear
Top Gear
Top Gear
CSS code
body,
html {
padding: 0 10px;
margin: 0;
background: #0e0f11;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
a:link,
a:hover,
a:active,
a:visited {
transition: color 150ms;
color: #95a5a6;
text-decoration: none;
}
a:hover {
color: #7f8c8d;
text-decoration: underline;
}
.contain {
width: 100%;
}
.row {
overflow: scroll;
overflow-y: hidden;
width: 100%;
}
.row__inner {
transition: 450ms transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 140.625px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
transition: 450ms all;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 140.625px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.tile__details:before {
content: 'â¶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
transform: scale(1.5);
opacity: 1;
}
.tile:hover~.tile {
transform: translate3d(125px, 0, 0);
}
Netflix style slider component with navigation buttons using CSS and JavaScript
In hovering flight:
Use the following HTML, CSS, and JavaScript snippets to create the above Netflix-style slider component.
HTML code
Netflix Carousel
Going In Style
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Boss Baby
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Going In Style
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Boss Baby
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Going In Style
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Boss Baby
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Going In Style
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Boss Baby
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
CSS code
body {
background-color: #343434;
margin: 0;
padding: 0;
margin: auto;
}
div.items {
white-space: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
overflow: hidden;
display: flex;
align-self: center;
}
div.items:hover .item {
opacity: 0.3;
}
div.items:hover .item:hover {
opacity: 1;
}
div.control-container {
height: 300px;
position: absolute;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
div.container {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 300px;
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
div.left-scroll {
left: 0;
}
div.left-scroll i {
transform: translate(-60%, -50%);
}
div.right-scroll {
right: 0;
}
div.right-scroll i {
transform: translate(-40%, -50%);
}
div.scroll {
position: absolute;
display: inline-block;
color: #f6f6f6;
top: 50%;
transform: translate(0, -50%);
width: 60px;
height: 60px;
border: 1px solid #f6f6f6;
border-radius: 60px;
margin: 0 5px;
z-index: 951;
}
div.scroll i {
font-size: 30px;
position: relative;
left: 50%;
top: 50%;
}
.item {
position: relative;
align-self: center;
width: 200px;
height: 200px;
margin: 0 3px;
transition: all 0.3s ease-in-out;
cursor: pointer;
z-index: 899;
}
.item:hover {
transform: scale(1.5);
margin: 30px;
opacity: 1;
z-index: 950;
}
.item:hover .opacity-none {
opacity: 1;
}
.item .item-load-icon {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.item .opacity-none {
opacity: 0;
}
.item img.item-image {
width: 200px;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
}
.item .item-title {
color: #f6f6f6;
position: absolute;
margin: 5px 0;
padding: 10px 0;
width: 100%;
left: 50%;
top: 0;
transform: translate(-50%, 0);
background: rgba(0, 0, 0, 0.5);
text-align: center;
}
.item .item-description {
color: #f6f6f6;
font-size: 12px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
white-space: pre-wrap;
width: 100%;
background: rgba(0, 0, 0, 0.5);
margin: 5px 0;
padding: 10px 0;
}
.button {
position: absolute;
color: #f6f6f6;
font-size: 30px;
border: 1px solid #f6f6f6;
width: 60px;
height: 60px;
border-radius: 60px;
z-index: 950;
background-color: rgba(0, 0, 0, 0.7);
transition: all 0.3s ease-in-out;
}
.button i {
position: relative;
top: 50%;
left: 50%;
transform: translate(-35%, -55%);
z-index: 950;
}
.button:hover {
box-shadow: 0px 0px 50px #FFFFFF;
}
JavaScript code
function MouseWheelHandler(e, element) {
var delta = 0;
if (typeof e === 'number') {
delta = e;
} else {
if (e.deltaX !== 0) {
delta = e.deltaX;
} else {
delta = e.deltaY;
}
e.preventDefault();
}
element.scrollLeft -= (delta);
}
window.onload = function() {
var carousel = {};
carousel.e = document.getElementById('carousel');
carousel.items = document.getElementById('carousel-items');
carousel.leftScroll = document.getElementById('left-scroll-button');
carousel.rightScroll = document.getElementById('right-scroll-button');
carousel.items.addEventListener("mousewheel", handleMouse, false);
carousel.items.addEventListener("scroll", scrollEvent);
carousel.leftScroll.addEventListener("click", leftScrollClick);
carousel.rightScroll.addEventListener("click", rightScrollClick);
setLeftScrollOpacity();
setRightScrollOpacity();
function handleMouse(e) {
MouseWheelHandler(e, carousel.items);
}
function leftScrollClick() {
MouseWheelHandler(100, carousel.items);
}
function rightScrollClick() {
MouseWheelHandler(-100, carousel.items);
}
function scrollEvent(e) {
setLeftScrollOpacity();
setRightScrollOpacity();
}
function setLeftScrollOpacity() {
if (isScrolledAllLeft()) {
carousel.leftScroll.style.opacity = 0;
} else {
carousel.leftScroll.style.opacity = 1;
}
}
function isScrolledAllLeft() {
if (carousel.items.scrollLeft === 0) {
return true;
} else {
return false;
}
}
function isScrolledAllRight() {
if (carousel.items.scrollWidth > carousel.items.offsetWidth) {
if (carousel.items.scrollLeft + carousel.items.offsetWidth === carousel.items.scrollWidth) {
return true;
}
} else {
return true;
}
return false;
}
function setRightScrollOpacity() {
if (isScrolledAllRight()) {
carousel.rightScroll.style.opacity = 0;
} else {
carousel.rightScroll.style.opacity = 1;
}
}
}
If you’d like to check out the full source code used in this article, here’s the GitHub repository.
To note: The code used in this article is licensed under the MIT license.
Add a neumorphic touch to your website
Neumorphism is a new design trend that combines flat design and skeuomorphism. It’s a minimal way of designing with soft extruded plastic, almost 3D style. You can give a neumorphic touch to the components of your website using only HTML, CSS and JavaScript.
Read more
About the Author