Xopus

Main Menu

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund

Xopus

Header Banner

Xopus

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund
CSS
Home›CSS›How to create a Netflix style slider component using CSS and JavaScript

How to create a Netflix style slider component using CSS and JavaScript

By Warren B. Obrien
July 11, 2021
0
0



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

netflix-style-slider-with-navigation-buttons

In hovering flight:

netflix-style-slider-on-hover-with-navigation-buttons

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

HTML code





Netflix Carousel



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

netflix style slider with horizontal scroll bar

In hovering flight:

netflix-style-slider-on-hover-with-scrollbar-horizontal

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

netflix-style-cursor-with-navigation-buttons-using-css-and-javascript

In hovering flight:

netflix-style-slider-on-hover-with-navigation-buttons-using-css-and-javascript

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





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

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.


Neumorphism using HTML, CSS and JavaScript

5 neumorphic design components in HTML, CSS and JavaScript

Keep up to date with the latest trends in web development. Make your designs stand out with neumorphism.

Read more


About the Author

Yuvraj Chandra
(34 published articles)

Yuvraj is an undergraduate computer science student at the University of Delhi, India. He is passionate about Full Stack web development. When he’s not writing, he’s exploring the depth of different technologies.

More from Yuvraj Chandra

Subscribe to our newsletter

Join our newsletter for technical tips, reviews, free ebooks and exclusive offers!

One more step…!

Please confirm your email address in the email we just sent you.

.



Related posts:

  1. What are Cascading Style Sheets and what is CSS for?
  2. Update from the European Commission: The future revision of REACH and the restriction of PFAS | Jones Day
  3. The Greeting Cards Market Expected To Experience High Growth By 2026
  4. Virtual Healthcare Assistant Market to Grow Exponentially Between 2021 and 2028 | Key players – CSS Corp, eGain, idAvatars, Kognito, MedRespond

Recent Posts

  • This Keyboard Shortcut Can Undo Your Most Annoying Browser Mistake
  • UCSF and I-SPY 2 breast cancer researchers develop newly redefined breast cancer response subtypes
  • India-based web design company promises free food to children in need
  • Global Chromium Powder Market Size 2022 Booming By Share, Growth Size, Scope, Key Segments And Forecast To 2029 – Industrial Computing
  • Google Search Adds Author Markup Best Practices

Archives

  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021

Categories

  • Chrome
  • CSS
  • Firefox
  • Fund
  • Schemas
  • Terms and Conditions
  • Privacy Policy