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



‹















›


‹















›


‹















›

CSS code

Related: Sleek CSS Gradient Background Examples

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

Related: How To Build Your First React App With JavaScript

In hovering flight:

Use the following HTML and CSS snippets to create the above Netflix style slider component.

HTML code

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.

Related: How to Create a Digital Clock Using HTML, CSS, and JavaScript

HTML code

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

Related: How to Create a JavaScript Slideshow in 3 Easy Steps

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