How to Create a Slider using HTML and CSS?

JavaScript Course With Certification: Unlocking the Power of JavaScript

Sliders are a set of frames, wherein each frame can be traversed respectively. Frames in Sliders can be images, videos, or even HTML elements (as in the case of testimonials or reviews). Sliders are present on several modern-day websites. Sliders are used by a developer when they have to convey information related to the website but do not want it to take much space.

For example, let's say a developer is developing a product website, then they might want to showcase their testimonials or reviews to the user so that they can trust them and buy their product. The developer can create a slider where users can navigate and read each review easily. The same can be done with product images as well, where a developer can create a slider of product images so that the user can have a 360-degree view of the product.

Pre-requisites

We will learn how to create a basic CSS image slider using HTML, CSS, and Javascript. To fully grasp what is going on and what we are doing, there are certain concepts, that you should know beforehand. Let's have a look at them.

  • HTML : You should have a basic knowledge of HTML, such as elements and tags. We would be using a variety of tags and elements for creating a slider, so you should know what is the role of each tag or element in our slider.
  • CSS : We will use CSS extensively for creating the slider. You should be aware of several intermediate concepts of CSS such as stacking, z-index, position, and animations. These all will be required when creating the slider.
  • Javascript : You should be aware of basic javascript such as the variable declaration, for-loop usage, and DOM manipulation. These would be used for manipulating the slider and creating the effect.

Once, you are familiar with all these concepts, let's create a slider. We will be going step-by-step exploring each concept and why are we doing what we are doing.

Step 1: Create the Basic Layout of the Image Slider using HTML Code

Let's create the basic skeleton of our slider. Sliders are a set of frames as we told you above. We will be creating a CSS image slider.

First, we will create the parent div that will contain slider images and functionality. We will also add certain styling such as background changing color and adjusting the height and width of the parent div .

Once, this has been done, let's move on to the next part.

Step 2: Add Prev and Next Buttons

Sliders have two buttons previous and next. These are used to traverse through frames of sliders. We will add basic buttons to our parent div. These buttons will help the user navigate through the images of the carousel. For simplicity, we will be using < and > as button text which will depict the previous and next respectively.

In addition to adding basic HTML buttons, we would also be styling them a bit so that they are vertically center aligned w.r.t center div. This is done so that scrolling through the slider becomes easier. We will use relative positioning to vertically align the buttons.

output-creating-basic-layout-of-image-slider

Step 3: Add the Required Images and Text to the Slider

Once we have added buttons, now it's time to add images. We will be using flower images to create a CSS image slider. The images will be stacked onto each other with the help of position and z-index. Since we need only one image to be visible, we will use a main class and set its display to visible. The rest images will have their display hidden to prevent them from appearing to the user.

The Slider will also have text which will display which image the user is currently accessing. It will help the user to get an idea of how many images are present in the carousel and their order.

output-add-required-image-and-text

Step 4: Activate the Two Buttons using JavaScript Code

We have created our slider class and added all images to it. Now we need to activate the previous and next buttons. We will be using javascript.

First, we need to add an event listener to these buttons. Every time, a user clicks on to previous or next button, an action should be taken corresponding to that button. So how are we going to do it?

We have used the main class to depict which image should be visible to the user. We need to control which image will have this class. Every other image will be hidden and only the image with the main class will be visible to the user. We will use DOM Manipulation to achieve this. DOM Manipulation will help us to remove the main class from an existing image and add it to a new image.

Now to determine which image should have the main class we will use the event listeners of the previous and next buttons. First, we need to get all the images present in the slider. We can see that the parent slider-carousel has images div . We can get this by using query Selector in DOM. Now once we have all image div we need to select the right one and add the main class to it. The rest will have no main class and hence will be invisible to the user. We can initialize a variable that will point to 0 initially. This variable will tell us which image is currently visible to the user. Every time the user clicks next or previous we will increase or decrease the value of the variable accordingly. If the value is 0 and the user clicks on the previous we will change the value to ( number of images div- 1 ). Similarly, if the variable is at the last image and the user clicks next, we will change the value to 0.

Congratulations, you have created CSS Slider using HTML, CSS, and Javascript.

Slide Show Functionality

Our Slider is currently using manual control to work. This means, that until the user clicks on the previous or next button, the image won't change. However, most of the sliders present online do not work like this. They have a slide show effect which allows them to change frames automatically after a set time has passed.

We can do that too in our slider. Using javascript, we can use the setInterval function that will automatically call the next function after a set time. This will help the slider to work automatically and change the slider after a set time has passed.

The Navigation Dots

Apart from using caption or Image text in your slider, you can also use navigation dots. Navigation dots works similarly to text or caption. They tell the user which frame they are currently accessing. Navigation dots are used in many modern sliders as they are convenient and easy to build. Navigation dots are mostly radio buttons.

A benefit of using navigation dots is that it allows the user to access any frame of the slider without any issue. Unlike the common slider where the user has to access each image one by one, navigation dots allows the user to visit any frame or image by clicking on the navigation dot corresponding to that image.

The basic principle behind the navigation dots is similar to that of slider images. The current image will have a corresponding navigation button that will have an active class. Once the image changes, the active class will be transferred or added to the current image and current navigation dot.

Alternate Example

Sliders created using Javascript are good as long as javascript is enabled in the browser. As soon as the user turns the javascript off, the slider will no longer work since it uses javascript to achieve slider functionality.

It is not necessary to use javascript for making sliders. You can even make a slider using HTML and CSS only. All you have to figure out is how you will work when the user will click on the previous or next button. A slider created using HTML and CSS will use less browser memory and will work even if javascript is disabled in the browser.

You can use attributes and their properties to make an active class. For the navigation button, you can create an active class that works when the button or dot is clicked. This works similarly to that in Javascript, however, instead of using DOM manipulation, we will be using CSS functionality such as target, etc to achieve this.

We have created a sample slider for you using HTML and CSS. We have used pseudo-active classes such as check to determine which navigation dot the user has clicked most recently. Then corresponding to that we show the image to the user. For every image, we have set margin and padding, since we are not hiding the images.

  • Sliders are a set of frames, wherein each frame can be traversed respectively.
  • They are used in many modern-day websites to show reviews or testimonials.
  • To make a slider the user should be aware of concepts such as HTML tags, CSS concepts such as stacking, positioning, etc, and basic javascript such as variables and DOM manipulation.
  • Sliders work by having an active class that has its display on. The rest of the frames have their display turned off. When a user navigates via a button or dots, we change the element that will have the active class using DOM manipulation.
  • If the user does not have javascript enabled in the browser, then the slider will not work.
  • You can use just HTML and CSS to create Slider. This will save browser memory and computational time. It will also work in every browser that supports HTML and CSS.
  • CSS Formatter
  • 90% Refund @Courses
  • CSS Frameworks
  • JS Frameworks
  • Web Development

Related Articles

  • Solve Coding Problems
  • How to create Responsive Profile Card using HTML and CSS ?
  • How to create a Share Button with different Social Handles using HTML & CSS ?
  • How to align Text in React Material UI?
  • Apply Glowing Effect to the Image using HTML and CSS
  • How to get the number of lines in a file using PHP?
  • Random Quote Generator Using HTML, CSS and JavaScript
  • Different types of module used for performing HTTP Request and Response in Node.js
  • How to determine the user IP address using node.js ?
  • How to change body class before component is mounted in react?
  • How to make Drawer using Material UI ?
  • Disadvantages of using for..in loop in JavaScript
  • How to find relevant emoji from text on the command-line?
  • Chrome Inspect Element Tool & Shortcut
  • Jekyll Vs WordPress
  • How to create three boxes in the same div using HTML and CSS ?
  • How To Troubleshoot Common HTTP Error Codes ?
  • Top 6 Extensions for Web Developers in VSCode
  • How to align a logo image to center of navigation bar using HTML and CSS ?
  • How to parse float with two decimal places in JavaScript ?

How to create a working slider using HTML and CSS ?

A slider is a sequence of frames that can be navigated in order. Firstly, you need to input the basic HTML code and then add radio buttons for the frames using the “type” attribute as “radio”. Then, design each frame in sequence. You can adjust the frames’ positions using “margin-left” and navigate them using both radio buttons and control labels.

Additionally, you can include images instead of text in each frame. This approach is beneficial because it reduces the browser’s memory usage and computational power required. This article will explain how to create a slideshow using only HTML and CSS.

  • Set up a container with radio inputs (`frame1`, `frame2`) to control slides.
  • Design slides inside the container with unique frame classes (e.g., `frame_1`, `frame_2`). Customize content, like headings.
  • Use CSS for smooth sliding effects. Adjust the `.inner` class’s `margin-left` property to shift between frames.
  • Implement control buttons and bullets with labels associated with radio inputs. Customize appearance and position.
  • Ensure responsiveness by adjusting styles in the media query for a user-friendly experience on smaller screens.

Example: In this example, we will see how to create a working slider using HTML and CSS.

1-(4)

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now !

Looking for a place to share your ideas, learn, and connect? Our Community portal is just the spot! Come join us and see what all the buzz is about!

Please Login to comment...

  • Technical Scripter 2020
  • Technical Scripter
  • Web Technologies
  • Web Templates
  • pankaj_gupta_gfg
  • Top 12 AI Testing Tools for Test Automation in 2024
  • 7 Best ChatGPT Plugins for Converting PDF to Editable Formats
  • Microsoft is bringing Linux's Sudo command to Windows 11
  • 10 Best AI Voice Cloning Tools to be Used in 2024 [Free + Paid]
  • Dev Scripter 2024 - Biggest Technical Writing Event By GeeksforGeeks

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

How to Create a Range Slider in HTML + CSS

Danielle Richardson Ellis

Published: July 11, 2023

Can you imagine the burden of increasing your computer volume with a dropdown  selection box? How about inputting text or numbers to leave a review instead of clicking on your star rating? I am sure you can imagine how much more inconvenient it would be compared to using the range slider you normally have access to.

CSS Slider Input Range illustration

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

  • Coding to Convention
  • Being Browser-Friendly
  • Minimizing Bugs
  • Optimizing Performance

You're all set!

Click this link to access this resource at any time.

Download Now: 50 Code Templates [Free Snippets]

What is a range slider in HTML?

Think of a range slider as an input that allows you to select a value by manipulating a sliding control or bar. This control can move either to the right or left, allowing you to select from a range of values. It's akin to the sliders you'd find when adjusting your computer's volume or brightness levels. Sometimes, the slider may have icons on one or both ends of the bar, allowing users to select a specific range with the help of JavaScript.

Range sliders are especially useful when:

  • You are aware of the upper and lower limits of the range.
  • You need access to a broad range of numbers.
  • You expect the user to frequently adjust their input (e.g., volume control).

So, let's create an HTML and CSS file and dive right into it!

Creating a Slider with HTML + CSS

Html slider input.

To begin, paste the following code into your coding environment of choice. For quick results, CodePen is a great option. The results show a basic slider that can adjust from 0 to 200.

See the Pen html slider: basic example by HubSpot ( @hubspot ) on CodePen .

HTML Breakdown

Now, let's dissect this code:

  •  <div class="slider"> - The class name " slider"  is wrapping all the HTML code in this div for CSS styling purposes. We will call this class in our CSS file.
  • <input type="range">  - The "range" input type allows you to specify a numeric value which must be no less and no more than a given value. In our case, we will use the input to create a slider control. The default range is 0 to 100. You can set restrictions on accepted numbers using the attributes below.
  • min - the minimum value allowed in the range. The default is 0.
  • max - the maximum value allowed in the range. The default is 100.
  • step - the legal number of intervals within the range. The default is 1.
  • value - the default value or starting value once the page is loaded. The default value is halfway between the minimum and maximum number in most cases but you have the option to change it to whatever you like. In our example, once the page is loaded, the slider button should already be at 100.
  • oninput="rangeValue.innerText = this.value"> , <p id="rangeValue">10</p>  - The range input doesn't present a numerical readout of it's value by default. Therefore, we assigned the variable "oninput" to the rangeValue in order to view the range of numbers. The <p id> tag simply prints the numeric value on the screen.

CSS Slider Input Range

As you can see, a very basic slider can be created with only HTML. However, we may want to add a more positive visual impression to enhance the user's experience. This can be done by pasting the following CSS code to your coding environment. The results will display a colored range slider with a border around it.

In the HTML code we created a class name "slider" and added CSS styling to everything within the class. Feel free to adjust the CSS code to your liking.

More Slider Examples  

If you would like to customize your slider further, take a look at these examples. 

Creating a Range Slider With Tick Marks

Tick mark sliders are beneficial if you need a range slider with more precision. In this example, we will build a volume control. Take a look below.

See the Pen html slider: slider with intervals by HubSpot ( @hubspot ) on CodePen .

Creating a Vertical Range Slider

A vertical range slider is excellent for preserving space on your webpage. Take a look on how you can create a numeric vertical slider in the below example.

See the Pen html slider: vertical by HubSpot ( @hubspot ) on CodePen .

Build Robust Applications with HTML Slider

Range sliders have an advantage over a simple input field when you need access to a wide range of numbers. This is because it can reduce the number of unnecessary errors due to inaccurate entries. There are many cases where you can use a range slider such as volume control, ratings, scores, weight limits, and the list goes on. Enjoy applying your own custom range slider styles to the awesome website you will build.

New Call-to-action

Don't forget to share this post!

Related articles.

15 Essential HTML Certifications

15 Essential HTML Certifications

4 Ways to Get a URL for an Image

4 Ways to Get a URL for an Image

The What, Why, & How of Making a Favicon for Your Website

The What, Why, & How of Making a Favicon for Your Website

How to Create a Landing Page in HTML

How to Create a Landing Page in HTML

5 Easy Ways to Insert Spaces in HTML

5 Easy Ways to Insert Spaces in HTML

How to Use HTML Picture Tag

How to Use HTML Picture Tag

Everything You Need to Know about HTML Navigation Bars (+Code)

Everything You Need to Know about HTML Navigation Bars (+Code)

The HTML details Tag: Simple Examples for Web Designers

The HTML details Tag: Simple Examples for Web Designers

How to Use the hr Tag in HTML: Your Guide to Web Page Dividers

How to Use the hr Tag in HTML: Your Guide to Web Page Dividers

HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]

HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]

Dozens of free coding templates you can start using right now.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

31 Bootstrap Sliders

Collection of free Bootstrap slider code examples: with thumbnails, auto, testimonials, vertical, full page , etc. Update of May 2020 collection. 10 new items.

Related Articles

  • CSS Sliders
  • jQuery Sliders
  • Tailwind Sliders
  • March 5, 2021
  • demo and code
  • HTML / CSS / JS

About a code

Give your users full control over your content with this free slider with navigation template. It is a Bootstrap snippet that promises a great performance across all devices and platforms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: icomoon.css, owl.carousel.css, animate.css, jquery.js ,popper.js, owl.carousel.js

Bootstrap version: 4.5.3

With this massive and attention-grabbing free split-screen slideshow template, you can display different visual content distinctively. The snippet features a slider with vertical transition, title, text and a CTA button.

  • February 23, 2021

Take your customer’s feedback showcase to the next level with this attention-grabbing free thumbnail carousel slider snippet.

  • December 22, 2020

When rocking multiple images in a slideshow, use this free thumbnail carousel template to offer everyone a quick preview. The tool works great for any type of website, acclimatizing to your theme easily due to the modern design.

Instead of rocking boring testimonials on your website, introduce this free client feedback carousel template instead. It features a split-screen design, one side for adding an image and the other for text.

Dependencies: ionicons.css, owl.carousel.css, animate.css, jquery.js ,popper.js, owl.carousel.js

Mix and match images with text and CTAs cleverly with this free split-screen carousel template. It features a horizontal positioning on desktop but changes to vertical on mobile, making it fully responsive.

  • December 21, 2020

Create an impactful and memorable first impression with this free full-screen carousel template. It is 100% responsive, working on smartphones, tablets and desktops.

Demo image: Bootstrap 4 Simple Image Slider

  • BBBootstrap Team

Bootstrap 4 Simple Image Slider

Bootstrap 4 simple image slider with thumbnails.

Dependencies: jquery.js

Bootstrap version: 4.4.1

Demo image: Bootstrap 4 Auto Slider

  • April, 2020

Bootstrap 4 Auto Slider

Bootstrap 4 auto slider with Font Awesome icons.

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.3.1

Demo image: Bootstrap 4 Testimonials Auto Slider

Bootstrap 4 Testimonials Auto Slider

Bootstrap 4 testimonials auto slider with image and content.

Demo image: Bootstrap Slider Quotes

  • Bootstrapious
  • February 12, 2020

Bootstrap Slider Quotes

  • tutorialrepublic

Bootstrap Elegant Image Slider

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.5.0

Bootstrap Carousel with Title Text and Description

Demo image: Bootstrap 4 Slider Testimonials with Dots

Bootstrap 4 Slider Testimonials with Dots

Demo image: Bootstrap 4 Carousel Slider

  • November, 2019

Bootstrap 4 Carousel Slider

Bootstrap 4 carousel slider with thumbnails.

Demo image: Bootstrap 4 Image Slider

  • August, 2019

Bootstrap 4 Image Slider

Bootstrap 4 image carousel slider with description.

Demo image: Bootstrap 4 Full Page Image Slider Header

  • Start Bootstrap
  • May 8, 2019

Bootstrap 4 Full Page Image Slider Header

A Bootstrap 4 header with a full page height image slider, navigation, and page content.

Demo image: Bootstrap 4 Half Page Image Slider Header

Bootstrap 4 Half Page Image Slider Header

A Bootstrap 4 header with a half page height image slider, navigation, and page content.

  • January 31, 2019

Slider Vertical - Bootstrap 4

Dependencies: anime.js, jquery.js

Bootstrap version: 4.1.3

  • October 10, 2018
  • HTML / CSS (SCSS) / JS

Responsive Bootstrap Slider with Slick

Responsive horizontal timeline using Slick.

Dependencies: slick.css, jquery.js, slick.js

Demo image: Bootstrap 4 Thumbnail Carousel

  • August 10, 2018

Bootstrap 4 Thumbnail Carousel

Dependencies: jquery.js, popper.js

  • March 6, 2018

Vertical Slider Bootstrap 4

Bootstrap version: 4.0.0

Demo image: Fullscreen Slider

  • Christian Carlsson
  • June 12, 2017

Fullscreen Slider

Bootstrap version: 3.3.7

Demo image: Bootstrap Carousel Slider

  • May 30, 2017

Bootstrap Carousel Slider

Demo image: Bootstrap Slider Full Screen

  • afmarchetti
  • September 20, 2016

Bootstrap Slider Full Screen

Bootstrap slider full screen with animations.

Dependencies: animate.css, jquery.js

Demo image: Touch Mobile Bootstrap Slider Gallery

  • Hugh Balboa
  • April 4, 2016

Touch Mobile Bootstrap Slider Gallery

Simple bootstrap slider with touch enabled.

Bootstrap version: 3.3.6

Demo image: Animated Slider

  • ALIMUL AL RAZY

Animated Slider

Dependencies: swiper.css, font-awesome.css, jquery.js, swiper.js, tweenmax.js

Bootstrap version: 4.1.1

Demo image: Responsive Image Slider

Responsive Image Slider

Demo image: Zoom Image Slider

  • Anirudha Bhowmik

Zoom Image Slider

Dependencies: jquery

Tabbed Macbook Mockup Slider

Bootstrap version: 3.3.0

Demo image: Colourful Tabbed Slider Carousel

  • BhaumikPatel

Colourful Tabbed Slider Carousel

Bootstrap version: 3.0.3

How to Create a Slideshow with HTML, CSS, and JavaScript

A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.

For this tutorial you can create a slideshow by following these simple steps:

Write some markup

Write styles to hide slides and show only one slide..

To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.

Change the slides in a time interval.

The first step to changing which slides show is to select the slide wrapper(s) and then its slides.

When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval.

Keep it in mind that when you remove an active class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.

Codepen example following this tutorial

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

CSS Image Sliders

This article demonstrates how to create several CSS image sliders for your webpage. Included are code walkthroughs and other slider examples.

A CSS image slider is a crucial part of any website or app. Sliders allow you to compact graphical information in a fun interactive way. The majority of the time, sliders are helpful to websites because they can be used to showcase different products or other relevant content to the visitor.

What Is an Image Slider in CSS?

Creating an image slider with bullet points, creating an automatic image slider, creating an image slider with links, creating an image slider with nav buttons, other examples.

An image slider is an animated HTML fragment used to display images, text, and videos as a slide show. The slider is typically made of frames that can be viewed independently. It is like a small viewport or screen that contains all the slides. Sometimes slides are on an automatic timer that changes to the next slide after some time. Other times there are controls that allow a user to adjust the content manually.

CSS Image Slider With Bullet Points

Let’s start by creating a basic image slider using only CSS. This slider will have bullet points to toggle between the three images.

First, we want to create the HTML outline. This outline includes <span> , <img> , and <a> elements.

The second step is applying styles to the <a> navigation links and setting the animation transition for each slide as it moves into view.

CSS Automatic Image Slider

Sometimes we want to create an image slider that doesn’t have controls. We can achieve this by using CSS @keyframe animations to create a timer that controls each slide. The keyframes will use the background-position property to move a single image from left to right.

To begin, we’ll create a single HTML div element.

The next step is to add the CSS styles and the @keyframe animations to animate the single-frame slider.

CSS Image Slider With Jump Links

Sometimes it is necessary to create a slider with links to jump to individual slides. The links can be made with <a> elements (anchor links) to jump to the correct slide. The link elements are then styled up to create buttons with numbers.

The slides are boxes and use CSS flexbox to create a row and overflow to control how many boxes are visible.

For the transition effect between slides, use the CSS scroll-snap-type and then scroll-behavior with its value set to smooth . The smooth value results in a smooth animation that jumps to the next slide whenever clicking any of the links.

Additionally, we can style up a scroll bar as an optional control and add the overscroll-behavior property to make it swipeable.

Now let’s create the links and slides semantically.

Next, we will need the buttons, positioning, slides, and scrollbar styles.

CSS Image Slider With Autoplay and Navigation Buttons

In this following code walkthrough, we can spice an image slider up with autoplay and navigation buttons. A cool thing about this example is the autoplay animation stops once a user interacts with the slider. When creating this example, we’ll rely on the scroll-snap-align property and the ::after and ::before pseudo-elements. We’ll also use two SVGs embedded in the background-image: url(svg) for the navigation arrows.

Let’s create the elements.

We must add the element’s styles to get the autoplay animation and navigation arrows working.

Here is a collection of sliders from around the web you can use in your project. The CSS sliders provided will be written in CSS and HTML, with sometimes JavaScript mixed in. Using these examples is relatively easy as long as you have some experience in HTML, CSS, and JavaScript. Included are links with examples and code for use on your website.

HTML CSS Driven Responsive Image Slider

About Project

Html css driven responsive image slider.

HTML CSS Driven Responsive Image Slider is a project on codepen.io which uses CSS keyframes to generate a sliding animation. This example uses HTML figure and figcaption elements to markup the image element. Also, when the screen is resized, the slider resizes to fit the screen horizontally.

  • Dudley Storey
  • Examples and Code

Responsive Image Slider

Responsive Image Slider

Responsive Image Slider is a project on codepen.io which uses CSS and JQuery to animate a solid rectangle slider. You can add your images to fill in the colored backgrounds of each slide. The project uses CSS transitions on the next and previous button’s opacity for a fade-in, fade-out hover effect.

  • David Fitas

Pure CSS Featured Image Slider

Pure CSS Featured Image Slider

Pure CSS Featured Image Slider is a project on codepen.io which uses pure CSS to create an image slider. The image slider has a picture frame border representing a real-world art frame. Addionally, the CSS slider contains round black buttons at the frame’s bottom to navigate the slides. This example only uses 24 lines of HTML.

  • Joshua Hibbert

GSAP Slider

GSAP Slider

GSAP Slider is a project on codepen.io which uses CSS, GSAP JavaScript library, and JQuery to create an exceptional CSS slider. The slider includes navigation buttons and snippet of text with a read more link. The slider works on multiple screen sizes. This example also uses CSS flex to layout the content within each slide and to place each slide in a row.

  • Goran Vrban

Slicebox 3D Image Slider

Slicebox 3D Image Slider

Slicebox 3D Image Slider is a project on codepen.io which uses CSS, JQuery Slicebox library, and Jquery to create a 3D rotating image slider. This image slider scales to fit the screen as the screen size changes. Also, this project includes buttons to navigate the image slides left or right. Included in the CSS styles is a special transition. The transition is preserve-3d which makes the child element keep it’s 3D position.

  • codefactory

CSS Only Image Slider

CSS Only Image Slider

CSS Only Image Slider is a project on codepen.io which contains two image slides. A slide is loaded in via an animation when a user clicks on one of the buttons. The animation slices two images down the middle and blurs the slide to the next one. This animation is created without the CSS keyframes at-rule .

  • Damián Muti

Canvas Image Slider

Canvas Image Slider

Canvas Image Slider is an image slider on codepen.io which uses CSS and the GSAP Tweenmax JavaScript library to create a multilayered lens. The slider moves the layers in lens focus as the animation traverses to the next slide. Next, the slider blurs the layers and loads the next image from the opposite direction. Addionally, the lens slider is responsive to different screen sizes.

  • Dario Fuzinato

Image Slider With Masking Effect

Image Slider With Masking Effect

Image Slider With Masking Effect is a project on codepen.io in which an image slider is designed as a card. The card uses a CSS drop shadow to create a raised effect, as if the slider is floating above the document. You can navigate the different slides when clicking the arrows inside the card. When the slider loads in new text, the text fades into view. This project uses a cool CSS transition style called cubic-bezier which is a type of easement when transitioning the slides.

  • Bhakti Pasaribu

Flexbox Image Slider

Flexbox Image Slider

Flexbox Image Slider is a project on codepen.io in which an image slider is created using CSS flexbox. The slider includes navigation buttons outside of the slider frame. When hovering over the navigation buttons, the buttons scale up, which causes the buttons to enlarge as the cursor hovers over the button. The scale animation is made using the CSS transform translateX.

  • Katherine Kato

Fullscreen Image Slider

Fullscreen Image Slider

Fullscreen Image Slider is a project on codepen.io where the author has created a fullscreen image slider. When the slider is resized using the screen or viewed on a different device, the slider resizes the fill the entire screen. The project uses pure JavaScript the give the buttons the ability to control the slider direction. Event listeners are attached to each navigation button and trigger the JavaScript custom slide function.

  • Brad Traversy

Modular Responsive Image Slider

Modular Responsive Image Slider

Modular Responsive Image Slider is a project on codepen.io that expands to the full page. The image slider is responsive and resizes to fit different screen sizes. This project is modular, which means you can stack the sliders like blocks to build different row lengths or even a grid. When clicking on the navigation dots, the dots pulse with an animation effect to reflect the click. Also, when hovering over the slider, the navigation arrows slide and fade into the viewport to become clickable.

  • Eric Porter

Auto Generated Responsive CSS Slider

Auto Generated Responsive CSS Slider

Auto Generated Responsive CSS Slider is a project on codepen.io which utilizes only images for each slide of the slider. The slider is responsive and resizes to fit different screen sizes. This example uses CSS translate3d and CSS keyframe at-rules to control the slide animations.

Image Slider CSS Only

Image Slider CSS Only

Image Slider CSS Only is a project on codepen.io, which is built with only HTML and CSS. You can add images to this slider by extending the HTML code and CSS classes that reference a new slide. The user can change the content on the slider by using the white navigation circles in the middle bottom portion of the CSS slider.

Pure CSS3 Responsive Slider

Pure CSS3 Responsive Slider

Pure CSS3 Responsive Slider is a project on codepen.io, which is created in pure CSS. This slider includes left and right navigational arrows and navigation dots in the middle bottom portion of the slider. To animate the slider, it uses a CSS keyframe at-rule to fade in the image when the user changes the slide. The fade in effect is made by using the CSS opacity property and mixing in an ease-in-out CSS transition.

  • Mayur Birle

Image Slider With Mobile Swipe

Image Slider With Mobile Swipe

Image Slider With Mobile Swipe is a project on codepen.io which uses HTML, CSS, and JavaScript. The image slider includes an automatic sliding animation which is triggered every 4 seconds by a JavaScript variable (“let interval = 4000”). The slides can be switched by swiping the screen when using this image slider with a mobile device. This functionality is created by using the touchend JavaScript event listener.

Onboarding Screens

Onboarding Screens

  • Demo and Code

Information Card Slider

Information Card Slider

Image Comparison Slider

Image Comparison Slider

  • Mario Duarte

Before After Image Slider (Vanilla)

Before After Image Slider (Vanilla)

  • Huw Llewellyn

Javascriptless Before_After Slider

Javascriptless Before_After Slider

  • Matthew Steele

Split-Screen UI

Split-Screen UI

  • Envato Tuts+

Before & After Slider Gallery With SVG Masks

Before & After Slider Gallery With SVG Masks

  • Craig Roblewsky

HTML5 Before & After Comparison Slider

HTML5 Before & After Comparison Slider

HTML5 Video Before-and-After Comparison Slider

Linear Slider With SplitText Effect _ Greensock

Linear Slider With SplitText Effect _ Greensock

Smooth 3D Perspective Slider

  • Alex Nozdriukhin

Fullscreen Hero Image Slider (Swipe Panels Theme)

Fullscreen Hero Image Slider (Swipe Panels Theme)

  • Tobias Bogliolo

Responsive Parallax Drag-slider With Transparent Letters

Responsive Parallax Drag-slider With Transparent Letters

  • Ruslan Pivovarov

Popout Slider

Popout Slider

  • Nikolay Talanov

Fancy Slider

Gray & White – Skewed Slider With Scrolling

Gray & White – Skewed Slider With Scrolling

  • Victor Belozyorov

Pokemon Slider

Pokemon Slider

Slider Parallax Effect

Slider Parallax Effect

  • Manuel Madeira

Slider with Ripple Effect v1.1

Slider with Ripple Effect v1.1

  • Pedro Castro

Clip-Path Revealing Slider

Clip-Path Revealing Slider

Full Page Slider

Full Page Slider

  • Joseph Martucci

Full Slider Prototype

Full Slider Prototype

  • Glauber Sampaio

Greensock Animated Slideshow [Wip]

Greensock Animated Slideshow [Wip]

Pure CSS Slider With Custom Effects

Pure CSS Slider With Custom Effects

Fullscreen Drag-Slider With Parallax

Fullscreen Drag-Slider With Parallax

Actual Rotating Slider

Actual Rotating Slider

  • Tyler Johnson

CSS Carousel With Keyboard Controls

CSS Carousel With Keyboard Controls

  • David Lewis

CSS Slider – Pure CSS – #10

CSS Slider – Pure CSS – #10

  • Ivan Grozdic

Pure CSS Slideshow

Pure CSS Slideshow

  • Charanjit Chana

Pure CSS Carousel

Pure CSS Carousel

Slider With Complex Animation and Half-Collored Angled Text

Slider With Complex Animation and Half-Collored Angled Text

  • CSS Carousels
  • CSS Image Galleries
  • CSS (Cascading Style Sheets)

Found a content problem with this page?

  • Edit this page on GitHub.
  • Report the content issue.
  • View the source on Github.
  • Give a content or feature suggestion.

Keep up to date on web dev

with our hand-crafted newsletter

  • WordPress Theme
  • Plugin Elementor
  • Plugin Gutenberg

In This Article

What is a website slider, eye-catching slider website examples, 6. diagonal website slider, 7. webgl slider, disadvantages using website sliders, when to use website sliders, how to use website correctly, advantages of a well designed slider example, related articles, 12 amazing slider website designs [examples & when to use].

Luke Embrey Avatar

Updated on: February 08, 2024

Web design techniques exist in many forms in today’s world, trends move fast and change all the time. The same goes for web design patterns, some people love certain trends and some people hate certain trends. Some can really engage users and others can end up distracting users and annoying them, pushing them away.

One web design technique is sliders.

They allow for content to be displayed in a way that maximizes the space on the screen. A lot of information can be shown with the use of a great slider website .

However, it’s best to understand what they are and when they are useful, they can easily become annoying and poorly timed.

It is an element on a web page that slides left or right (or even any other direction!) It’s a way to display content on a page in one area where the content can fly into place, displaying huge amounts of content in one area.

Sliders are basically a slideshow of information that can be a combination of images, text, icons, and links, etc. One famous slider example is a website carousel which can be used to display multiple images across the width of a screen in one area.

An example might be a carousel of products with a text description or a showcase of a portfolio:

Carousel of Products Example

Check out what is a slider? if you still need some more clarification on this.

We’ve seen an example of one of the most famous types of slider websites, that is a carousel of images and text but there are many more slider types to learn.

Let’s go through some inspiring examples you can use yourself in your own design and get ideas from.

1. Zara Website Slider

Your browser does not support the video tag.

Zara is a worldwide well-known clothes brand that has decided to make their whole website a full screen slider. This can be a powerful tool from the marketing perspective and, at the same time, provide a modern user experience that will for sure create an impact on their visitors and potential clients.

This kind of website sliders got popular after Apple used the same website layout for their iPhone 5C and the same sliding technique. (Also used by the BBC website , The Telegraph , Dreamworks and many other big brands)

If you are interested in this kind of design, you can replicate it by using the fullPage.js JavaScript component . If you use WordPress, check out the Elementor and Gutenberg plugins for it.

2. Split Sliding Website

Unlike traditional sliders that have one single sliding element, Split Theme splits the screen in two and slides each of them in opposite directions. This ends up creating an interesting effect that some websites can benefit from.

You can get this effect by using multiScroll.js component for JavaScript or the Split Theme from Themify .

3. Squarespace Website Slider

This lovely design from Squarespace really shows how good it looks when you combine great photos with the slider design. The large stunning images are easy to navigate and this design is a great way to show off a portfolio that could look as awesome as these 9 unbeatable online portfolio examples .

If you want to achieve something similar you’ll find many possible components on our curated list of jQuery carousel plugins

4. Dreamworks Website Slider

A great example with how lots of sliders and carousels can be used to make a really effective website that is extremely interactive.

Using sliders and carousels can enable you to include a lot of images in one place, users can slide through interactive content and decide what they want to click.

Unlike the previous slider, this one will slide 3 items at once, making it faster to navigate.

Check out our curated list of jQuery carousel plugins if you want you are interested in building something similar.

5. Xiaomi Website Slider

Unlike other traditional sliding carousels, Xiami uses a website slider that fades between slides. This creates a simple, fast, and less distracting slider that serves the same purpose.

If you are into full screen pages, you can get something similar by using fullPage.js together with the Fading Effect extension .

This is a much less conventional slider yet a beautiful one. This diagonal slider adds a different touch and will certainly create an impression on any visitor.

WebGL Sliders usually mean one thing: beautiful animations. And this case won’t be different. The WebGL slider for Webflow provides multiple effects on each of the clonable demos and they are all quite impressive!

8. LookBack Slider Website Design

LookBack Slider Website Design Example

Slider website design is all about having that perfect animation and impressive transitions without being annoying. One area of business that gets this right is the fashion industry, they have used this LookBack design to show off their products.

A LookBack design is where the images are auto-played vertically in opposite directions.

If you are looking for amazing slider effects you can get inspired by these 20 animated sliders .

9. Interactive Text and Image Slider

This slider website example shows how well a slider works with text and buttons that the user can interact with. The image can engage the user with the text and act as a Call To Action (CTA) as well. You can use these CSS Button hover effects to animate your buttons.

10. Full Screen Scrollable Slider Design

This website uses a full screen slider design, has multiple pages or steps, and allows the user to navigate by simply scrolling.

If you are looking for a website slider solution to do something similar, you may be interested in fullPage.js as mentioned before. This would allow you to easily create full screen scrollable pages.

11. Amazon eCommerce Image Slider Design

Amazon eCommerce Image Slider Design Example

Both Amazon and other online retailers use an image slider, they are effective and a great way to quickly make a website interactive. Illustrations combined with large images allow a reader to understand what the product is all about with little text, which is what eCommerce is all about. User conversations and sliders can help you do that.

12. Full Width Slider Website Design

This is a more traditional kind of slider. It’s a basic carousel of items with a small zoom/scale effect combined with an opacity/fading one.

It’s the combination of these two effects that makes it look a bit more modern than the average carousel.

Website sliders can be a useful tool to engage users and keep them interested in the content being displayed but sliders get their fair share of hate and there is a good reason for that. They must be used properly and with the right content.

Some arguments against website sliders are that they can be confusing , they present users with multiple options at once and users might not be sure how to navigate the web page. Leading to a poor user experience (UX) and degraded user retention. Each slider option is seen as equal because the content can not always be seen right away, making the user feel like they don’t know which way to go. Sometimes it can be unclear.

If sliders are not used correctly, some users end up viewing them as adverts or popups and end up trying to skip them and get passed to the “real” content of the website.

Website Sliders can slow down a web page as well, lots of sliding images and text can be heavy on the browser can cause performance issues, this will often impact SEO and user conversion rates very quickly. Most of the time users will click away if they don’t understand or get what they want within seconds of your website loading.

Most users hate auto-playing videos because they are annoying and get in the way, the same can be said for website sliders. Sometimes static images and text copy are just easier to navigate and scroll through, the user can understand the information straight away.

However just because there are some negatives against website sliders, it doesn’t mean they have positives or that they can’t be used in an effective way. It’s about using them at the right time with the best content that suits them.

We’ve learned about the negative impacts of sliders and we’ve learned about the positives of sliders, so when should you use them? Let’s go through some more examples of good use cases for sliders.

Before we go onto some good examples of website sliders, let’s understand the basics are how to use them correctly

Website sliders should be used at the right time, in the right place. Sliders can be good when used to save space, if you have a lot of information to display, a slider is a simple, responsive way to get content displayed across multiple devices, efficiently.

Website Sliders help consolidate web content into one location , saving time on scrolling or height bloated pages when there is a lot of content to show.

Animation and transition effects help engage users and keep them interested . Visuals between slides keep users viewing only the content they need while they consume it, once they have finished they can easily move on to focus on new content, without previous content getting in the way.

Slider websites take full advantage of the entire screen space , this is good for mobile devices as small screens benefit from content that utilizes the full browser viewport. Images and text can be bigger and easier for viewing, especially for accessibility reasons.

When used correctly, website sliders prevent users from being distracted, content is kept in view for what they need at that time, so it is easier to digest subjects, videos or images.

Now we can see some great examples of how and when to use website sliders

1. Use Easy-To-Navigate Sliders

They are not right for every design or structure, think of sliders as a way to enhance content or engage users into a particular topic, not as a way to display the content you didn’t have a plan for.

Make sure sliders don’t distract or annoy users by restricting information or reducing how quickly users can access information. The navigation path for sliders must be clear and easy to navigate, not confusing.

You want the animations and transitions to be quick, smooth, and lag-free , so don’t go too crazy with these, remember every device needs to handle each animation as well. A simple fade and short transition will be enough to get the effect across, otherwise, it might look tacky.

Easy-To-Navigate Sliders Example

Take the above example, we can clearly see that a slider is being used. At the bottom left we can see circles which quickly indicate it is content to slide to, on the bottom right we have a numbered system to see where we are, it’s quick to understand what is going on.

It’s important to make sure you have a clear indicator with arrows or numbers for easy navigation. Mobile devices should be able to swipe and navigate that way. It is probably best to turn on auto-play, this can make users feel on edge because the timer effect gets annoying when reading content and it just moves without warning. Auto-playing is only useful for smaller content or when moving through images or logos.

2. Use Website Sliders to Tell a Story

A visitor who sees a large amount of information, lists, images or steps, etc. It can be overwhelming for a user and it is hard for them to follow along, whereas a slider website design can help tell a story.

For example, a slider like fullPage.js can be used to help showcase product or service features to a user, especially something that is already engaging like a video game. A slider can offer an easy-to-navigate set of steps to follow , keeping only the required information in view for the user.

A good use for telling a story is onboarding new users or employees, a slider is interactive and easy to navigate without overwhelming the user with information.

3. Use Sliders to Help Viewers Understand Quicker

As I’ve said before, a slider is a great way to consolidate and display large amounts of information into one place and split up large chunks of text or diagrams. A slider can easily be used as a hero header for a website, helping the user understand much quicker what the website has to offer.

Often a user that comes onto a website wants to know straight away what the website does and what benefits it gives them. A slider can be a quicker way to reassure a user what they came for. It provides a brief overview of content or features in a consumable manner, it allows visitors to make a quicker decision on the information they have been given.

Sliders are great on websites that get updated often. Sliders can be used as focus points for new information or content. Allowing users to get the latest updates without navigating to a lengthy article at first.

Mentioned throughout this article is a slider project called fullPage.js and it contains multiple features which help it stand out from many slider projects. With all the negative points about sliders, fullPage.js is only positive, it doesn’t break any of the rules of a good slider.

The example below shows how fullPage.js makes it easy to navigate , nothing is confusing to us at a glance. We have big easy to use arrows and we can quickly understand where we are in the slider navigation with the dots on the right side of the page.

Well Designed Slider Example

Again, the animations and transitions are simple , smooth, and not crazy. They don’t distract from the content and help create a focal point for the user.

And best of all the whole thing is responsive and touch-ready for mobile devices. It works as well as it does on the desktop as it does on mobiles.

We can easily add content to the slider website page and we have multiple ways of expanding so the design doesn’t become cluttered as we can continue up, down, or left and right.

Not every website will benefit from using a slider-based design, you need the right content and use cases so that you don’t misuse the slider design. It can be a powerful and engaging element when used correctly, which we covered in this article.

Don’t rely on the user’s instincts: make sure any slider has clear navigation and layouts , otherwise, they will get confused and click away. It is important for sliders to fit within your brand and design, otherwise, they will look tacky and like you just didn’t know what to do for a specific page.

Delays are problematic and should probably be disabled, let the user navigate through in their own time, don’t annoy or rush them through information.

Use website sliders to tell a story and help the user navigate through large amounts of information and images. Sliders are a great way to create a focal point that is dynamic and interactive.

More articles which you may find interesting.

  • Amazing WordPress Slider Plugins
  • Fullscreen Slider [Webflow]
  • Create a Slider With Pure CSS
  • Create a Slider With JavaScript

Luke Embrey

Luke Embrey

Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK. You can find out more about him at https://lukeembrey.com/

Don’t Miss…

what is a slider share

A project by Alvaro Trigo

Slider Revolution

Slider Revolution

More than just a WordPress slider

Amazing homepage slider examples from modern websites

A great way to advertise your brand and showcase your business philosophy is by using homepage sliders, or carousels.

slider for website code

Finding the perfect homepage slider for your website can pose a challenge. However, finding some examples, or templates from modern websites can give you inspiration.  

Sliders will display the key information about your website featuring important images, therefore conveying the message to readers. A homepage is meant to impress visitors, turning them into potential customers.

Modern website designers have found several interesting ways to incorporate sliders into their own web page design. Webpage sliders help shift the focus of the reader to content that’s highly important, therefore increasing revenue.  

In this article created by our team behind Slider Revolution, we will discuss several exceptional homepage slider examples to give you some inspiration.

When Should You Use Sliders?

What do sliders accomplish?

  • Sliders provide an eye-catching way to display content
  • They engage users and inspire them to take action
  • They save space on your homepage, allowing you to create a visually-pleasing website

Generic sliders will not work for all websites. Some will look great, while others will need some specific adjustments.

First, establish the primary goal of your website. Then, clearly identify your brand, and how to use sliders accordingly.

When sliders are used to enhance your brand image, they can be a fantastic way to get more conversions and impress users. However, if they are just thrown onto the website without any thought, they can be an unnecessary distraction.  As stated earlier, what works for one website might not work for another.

A homepage slider shows consumers what their options are, and gives an overview, helping them to decide what action to take next.

There are many different types of sliders to choose from. For example, there are sliders that present a slideshow activating only when the user clicks on a tab or button. Some of the biggest and most popular websites have used sliders successfully, attributing to their webpages’ success.

Amazing Homepage Slider Templates and Website Slider Examples

The following are some of the best homepage slider templates to choose from.

Cinematic Wildlife Slider

Effortlessly craft stunning presentations using this slider designed with photography in mind, complete with a user-friendly YouTube video popup feature.

Coffee Shop Split Screen Slider

With its captivating animated elements and sleek design, this slider is sure to catch the attention of your coffee shop visitors. Its simple customization options make it the ideal template for showcasing a wide range of products!

Modern Portfolio Showreel Slider

Display stunning videos and photography using this sleek slider with a contemporary user interface and impactful typography. It is an ideal choice for any creative professional aiming to showcase their work beautifully.

Portal Effect Hero Slider

Utilize the powerful hero slider module with a captivating portal effect to create an impressive landing page or showcase your products in a visually striking manner anywhere on your WordPress website.

Motion Blur Portfolio Showcase

Experience the elegance of this pristine showcase slider, featuring an optional video popup and a stylish motion blur transition. Complete with a logo and menu, it stands ready to bring your boldest ideas to life in a visually captivating manner.

Big Summer Sale

Responsive homepage slider

Enhance your e-commerce website with the captivating Big Summer Sale Shop Slider! Its stunning design is sure to grab attention. Plus, with our user-friendly color skin system, you can easily change the vibrant red highlight color with just two clicks using our editor.

Isometric Slider

Isometric Slider

Discover a vibrant and dynamic isometric slider template that allows you to customize every aspect, including colors and screen content, to suit your preferences perfectly.

Woo Commerce Slider

Woo Commerce Slider

Experience the exceptional animation of the Woo Commerce Slider template, available in both static and dynamic versions. Its unique design is sure to captivate your audience and enhance your online store.

Real Estate Slider Template

Real Estate Slider Template

Elevate your real estate and realtor website with an elegant showcase slider. This slider offers flexibility and customization options, allowing you to tailor it to your specific needs and create a visually stunning presentation.

Design visually attractive and high-performing websites without writing a line of code

WoW your clients by creating innovative and response-boosting websites fast with no coding experience. Slider Revolution makes it possible for you to have a rush of clients coming to you for trendy website designs.

Art Gallery Slider

Art Gallery Slider

This art gallery slider is excellent for displaying art in a very sophisticated style. If you are going for web sliders that look great, this is one to take into account.

Nature Explorer Slider

Nature Explorer Slider

Experience the wonders of nature with the Nature Explorer Slider Template, enhanced by the captivating Distortion and Particle Effects Add-Ons. Immerse yourself in a visually stunning journey through the beauty of the natural world by showcasing website image sliders that look amazing.

Cube Animation Slider

Cube Animation Slider

Embrace the modernity of a slider that combines dynamic text elements, captivating cube animations, and a striking call-to-action button into a modern website slider design. This slider is designed to engage your audience and drive them towards action.

Tech Showcase Slider

Tech Showcase Slider

Experience the timeless elegance of this home slider module, adorned with sleek device mockups and enhanced by a seamless parallax effect. Immerse yourself in a visually stunning journey that combines modern design with a touch of classic allure.

Retouch Before After Slider

Retouch Before After Slider

Enhance your photography website with the Retouch Before & After Slider Template, a fantastic addition that incorporates our renowned Before & After Add-On. This template allows you to showcase your retouching skills and impress your visitors with stunning visual comparisons.

3D Parallax Cubes Slider

3D Parallax Cubes Slider

Prepare to captivate your website visitors with the mesmerizing 3D cubes parallax effect, creating an awe-inspiring introduction that will leave a lasting impression. Get ready to open their eyes to an extraordinary online experience.

Cinematic Slider

Cinematic Slider

Stand out from the crowd with this slider that commands attention through bold texts and a cinematic transition effect. Let your content make a powerful impact and leave a lasting impression on your audience.

Restaurant Menu Slider

Restaurant Menu Slider

Introduce your restaurant-themed website in style with the Restaurant Menu Header. This modern sliders collection is the ideal choice for showcasing your delicious dishes, featuring smooth transitions that add a touch of elegance. It is also a versatile option for usage in digital signage, making it a perfect fit for various promotional displays.

Great Homepage Slider Website Examples

The following are some examples of websites that have awesome homepage slider designs.

Pierre

The Pierre website displays their content in an enticing way, creating a delightful atmosphere.

The NoMad Hotel

The NoMad Hotel

The Nomad hotel website is an excellent example of a modern way to display your hotel photos by using this slider.

Tea Round App

Tea Round App

This Tea Round App features content in small beautiful details, such as paper notes, and gradient buttons.

Decor8

The Decor8 blog showcases latest posts with this user friendly slider. Having hundreds of blog posts can be overwhelming, thus this slider helps organize them making it more enticing for readers.

This slider gives the option to display the most recent posts, or to display your most popular blogs.

Waunakee

This example is functional yet unique, due to the website slider ’s location.

Au Lit Fine Linens

Au Lit Fine Linens

Au Lit Fine Linens use photography sliders to create an intimate atmosphere, by using soothing colors such as gray and beige.

HELLO! LUCKY

HELLO! LUCKY

Hello ! Lucky is a playfully designed website, displaying adorable illustrations. Yet it skillfully doesn’t compromise usability.

Portage Youth Soccer

Portage Youth Soccer

Portage Youth Soccer websites proves less is more, by using simple shapes that help focus directly on the topic.

Revelry

It is essential to incorporate a stylish homepage slide design into a fashion website. This will aid in displaying the art and fashion articles.

CG Schmidt

This is a video-like slider that incorporates unique transitions, making the video slider feel more natural.

Jax Vineyards

Jax Vineyards

The transparent backdrop makes this slider elegant and stylish.

And that’s the end of our website slider examples.

Slide

FAQs about homepage sliders

1. what are homepage sliders and why are they used on websites.

Homepage sliders, sometimes referred to as picture carousels or sliders, are a number of moving images or pieces of content that are prominently displayed on the homepage of a website.

They are frequently used to highlight special offers, promotions, or significant announcements. They can also be used to highlight important messages or calls to action on a website and provide visual appeal to the design.

2. How many slides should a homepage slider have?

Depending on the objectives and layout of the website, a homepage slider may have a different amount of slides. To avoid overwhelming customers or lengthening the load time of the website, it is generally advised to keep the number of slides to a minimum. Make sure there are no more than five slides in the slider as a general rule.

3. What is the recommended size for images in a homepage slider?

Depending on the style and design of the website, a homepage slider’s recommended picture size may change. However, it is generally advised to use high-quality images with file sizes under 1MB and that are web-optimized. To ensure that consumers don’t have to wait too long for the slider to load, it’s critical to strike a balance between image quality and website loading time.

4. Can homepage sliders slow down the loading time of a website?

If homepage sliders are not properly optimized, they might increase the time it takes for a website to load. Slower load times can be attributed to large graphics, autoplay features, or excessive animation. To prevent the slider from having a detrimental effect on the functionality of the website, it is crucial to optimize the slider’s images and settings.

5. Should homepage sliders autoplay or require user interaction?

The objectives and user experience of the website might determine whether homepage sliders should autoplay or demand user participation. While automatically playing sliders can be effective at grabbing users’ attention, they can also be annoying to those who prefer to view content at their own pace. A better user experience may result from allowing consumers to adjust the slider.

6. Are there any best practices for designing a homepage slider?

The use of high-quality photographs, limiting the number of slides, avoiding excessive motion or effects, and making sure the slider is user-accessible are just a few of the best practices for building a homepage slider. When designing the slider, it’s crucial to keep the website’s objectives and user experience in mind.

7. How can I track user engagement with my homepage slider?

Tracking user interaction with a homepage slider can be done in a number of ways, such as by employing website analytics tools, keeping an eye on click-through or conversion rates, or by asking users for feedback or surveys.

Website owners can optimize the user experience by tracking user interaction to better understand how visitors are using the slider.

8. Is it better to use text or images in a homepage slider?

The objectives and layout of the website can influence whether text or images should be used in the homepage slider.

While text can be more informative and effectively convey important messages, images sometimes are more visually appealing and attention-grabbing. A homepage slider that is more interesting and powerful can be made by balancing the use of text and graphics.

9. Can homepage sliders negatively impact a website’s search engine optimization (SEO)?

Homepage sliders may have a negative effect on a website’s SEO if they are not properly optimized. The search engine rankings of the website may suffer as a result of large images, excessive animation, or delayed loading times.

To prevent a detrimental effect on the website’s SEO, it’s crucial to optimize the slider’s images and settings.

10. Are there any alternatives to using homepage sliders for displaying content on a website’s homepage?

The use of static photos, videos, or hero sections as content display options on a website’s homepage is a few alternative to homepage sliders.

Without the potential limitations of homepage sliders, such as long loading times or low user engagement, these alternatives may be more effective at communicating critical messages and call-to-action buttons to users.

The website’s objectives and user experience should be taken into account while choosing the appropriate way for content display on the homepage. Finding the best solution for their needs can be accomplished by trying out various strategies.

Ending thoughts on using a homepage slider

Every website is unique, catering to different consumers. Any great website should always be designed with the user in mind. When sliders are used correctly, they add a layer of creativity and flexibility to a website. The site will look more dynamic, spacious, and elegant.

If you enjoyed reading this article about using a homepage slider, you should check out this article on how to add a slider in WordPress .

We also wrote about similar topics like using the particle effect in web design, using a hero slider , a video slider (see the pattern here?). But also about the Ken Burns effect that we use in some of our slider templates, using a product carousel , as well as WordPress themes with sliders included, WordPress video background , website sliders , and slider animation examples.

FREE: Your Go-To Guide For Creating Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

slider for website code

Moritz Prätorius

To construct is the essence of vision. Dispense with construction and you dispense with vision. Everything you experience by sight is your construction.

If you have any questions or comments regarding this blog's posts, please don't hesitate to comment on the post or reach out to me at [email protected] .

Liked this Post? Please Share it!

slider for website code

3 thoughts on “ Amazing homepage slider examples from modern websites ”

My name is John Brandenburg of ACME Logo. I wanted to drop an example of a slider I built using Slider Revolution for my client at http://www.motili.com . I’m not sure if you showcase your customers work or not but I am quite proud of how their home page hero slider turned out and would love it if you took a look at http://www.motili.com . This site’s home page slider was designed with responsiveness in mind yielding device specific positioning and it works flawlessly. I have been a designer/dev for 30 years and I used to love doing work in Flash. It was very refreshing to see some of the things Flash offered being possible again using Slider Revolution.

If I have sent this to the wrong place I apologize and would appreciate if you could lead me in the right direction if you have a customer showcase.

Thanks for any consideration and for making an awesome product for us to work from.

Hi John, thanks for sharing your outstanding work with us! The Slider Revolution module looks stunning on all possible sizes, kudos! Can we post it as a great example of Slider Revolution “in the wild”, maybe with a quote from your comment?

Cheers, Dirk @ Slider Revolution

A huge collection of free website templates for your next project.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

From The Blog

Stunning architecture website templates to make your business stand out, the financial website templates you need for a professional online presence, eye-catching css charts that will revamp your data reporting, popular resources, optimizing load speed and performance, quick setup – slider revolution, create a basic responsive slider, get productive fast.

slider for website code

Join over 35.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.

Privacy Overview

35+ CSS Slideshows - Free Code + Demos

Collection of 35+ css slideshows. all items are 100% free and open-source. the list also includes simple css slideshows, responsive, animated, and horizontal., 1. slideshow vanilla js w/ css transition.

Custom slideshow with staggered transitions. Built in vanilla JS.

2. Untitled Slider

A small experiment which quickly turned into something more.

3. Parallax Slideshow

4. css-only slideshow.

An idea for a page header slideshow for a project at work that eventually ended up moving in another direction.

5. Rotating Background Image Slideshow

6. slideshow with html/css (any javascript).

SlideShow made with HTML/CSS. Any javascript code is used

7. Spooky Scary Clip Text

Spooky CSS only image slideshow with text clipping 🎃

8. Slideshow Concept (No JS)

CSS and HTML Only Slideshow Concept

9. Silhouette Zoom Slideshow

Slide show where the person in the current frame is used to zoom into the next frame

10. Geometrical Birds - Slideshow

83 triangles morphing and changing color into different birds Polygonal birds Free Vector in Animals by freepik.com

11. Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

12. Slideshow Parallax With TweenMax

13. split slick slideshow.

Vertical slideshow in split screen

14. Slideshow Presentation

Navigate using the up and down arrow keys.

15. Dual Slideshow Demo

Just playing around with a dual pane slideshow concept.

16. A Slideshow With A Blinds Transition

The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath (link to tutorial).

17. Split-screen Slideshow

18. ken burns effect css only.

Ken Burns effect CSS only

19. Slick Slideshow With Blur Effect

New pen using the best slideshow plugin ever: Slick http://kenwheeler.github.io/slick/

20. CSS Fadeshow

This is an extended version of my Pure CSS Slideshow Gallery (http://codepen.io/alexerlandsson/pen/RaZdox) which comes with more and easier customisation and previous/next buttons.

21. Tweenmax Slideshow

A customizable slideshow tweenmax

22. Nautilus Slideshow

23. pure css slideshow gallery.

Responsive slide gallery Navigation and PREV-NEXT buttons created with ♥ and nothing but CSS

24. HTML And CSS Slideshow

A very simple slideshow using only HTML and CSS animating. It does not have back/forward buttons or fancy effects. Included Javascript can be used to calculate clicks on each image but is optional. Uses just one DIV with two sections of CSS.

25. Responsive CSS Image Slider

More details on my blog

26. Pure CSS Slideshow

Using CSS only, I created a slideshow that uses pseudo classes to achieve the next and previous functionality.

27. Pure CSS Image Slider

28. css image slider w/ next/prev btns & nav dots.

A 100% pure CSS image slider with next/previous buttons, nav dots and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.

29. Slider CSS Only

Only CSS slider responsive left/right button navigation dots navigation

30. Auto/Manual Image Slideshow

This is an auto/manual image slideshow that automatically starts and slides through images every 10 seconds, but you can also use the left/right arrows to switch through manually as well. When you click on one of the arrows, the slideshow auto timer will reset the 10 second timer. There ar... Read More

31. CSS Image Slider

32. mobile first product slideshow widget.

Built with Mike Alsup's (malsup) Cycle2 plugin for jQuery, this experiment features a mobile first product slideshow with some neat typography.

33. CSS Slideshow Text

Horizontal slideshows, 1. css-only slideshow, 2. rotating background image slideshow, 3. slideshow with html/css (any javascript), 4. spooky scary clip text, 5. slideshow concept (no js), 6. silhouette zoom slideshow, 7. geometrical birds - slideshow, 8. bubble slideshow component, 9. slideshow parallax with tweenmax, 10. split-screen slideshow, 11. ken burns effect css only, 12. slick slideshow with blur effect, 13. css fadeshow, 14. tweenmax slideshow, 15. nautilus slideshow, vertical slideshows, 4. split slick slideshow, 5. slideshow presentation, 6. dual slideshow demo, 7. a slideshow with a blinds transition.

W3.CSS Colors

Web building, w3.css slideshow.

slider for website code

Manual Slideshow

Displaying a manual slideshow with W3.CSS is very easy.

Just create many elements with the same class name:

JavaScript Explained

First, set the slideIndex to 1. (First picture)

Then call showDivs() to display the first image.

When the user clicks one of the buttons call plusDivs() .

The plusDivs() function subtracts one or  adds one to the slideIndex.

The showDiv() function hides ( display="none" ) all elements with the class name "mySlides", and displays ( display="block" ) the element with the given slideIndex.

If the slideIndex is higher than the number of elements (x.length), the slideIndex is set to zero.

If the slideIndex is less than 1 it is set to number of elements (x.length).

Advertisement

Automatic Slideshow

slider for website code

To display an automatic slideshow is even simpler.

You only need a little different JavaScript:

HTML Slides

The slides do not have to be images.

They can be any HTML content:

Lorem ipsum

Slideshow caption.

slider for website code

Add a caption text for each image slide with the w3-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right or middle):

Slideshow Indicators

An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.

slider for website code

Another example:

Images as Indicators

An example of using images as indicators:

Multiple Slideshows on the Same Page

To operate multiple slideshows on one page, you must class the members of each slideshow group with different classes:

Animated Slides

Slide or fade in an element from the top, bottom, left or right of the screen with the w3-animate-* classes.

slider for website code

Faded Animation

The w3-animate-fading class fades an element in and out (takes about 10 seconds).

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

Advertisement

First date? Try a PowerPoint presentation

Copy the code below to embed the wbur audio player on your site.

<iframe width="100%" height="124" scrolling="no" frameborder="no" src="https://player.wbur.org/endlessthread/2024/02/16/tenet-slideshow-date"></iframe>

  • Dean Russell
  • Amory Sivertson
  • Ben Brock Johnson
  • Emily Jankowski

Two people sitting in a restaurant, with one holding several printed slides.

When Jason Carman and Harpriya Bagri met, they had different takes on the film  Tenet .

Directed by Christopher Nolan,  Tenet  is considered one of the most confusing major movies. Harpriya was not a fan of its mind-boggling time-travel plot. Jason, though?

He proposed a date. They would get pizza, and he would explain the film. Harpriya agreed. But when she showed up, she did not expect to see Jason holding 29 printed slides from a presentation called " Tenet for Dummies." She also didn't know that Jason was filming.

The video of the date was later posted to X and watched 3.7 million times. Some might see the premise as a recipe for disaster. Others, a recipe for love. So which one was it?

  • Jason and Harpriya's date video
  • Jason's Tenet slide show
  • The X conversation that inspired the date
  • " Tenet , the definitive explanation " (Film Colossus)
  • " Can someone explain tenet very simply to me please? " (Reddit)

Full Transcript:

This content was originally created for audio. The transcript has been edited from our original script for clarity. Heads up that some elements (i.e. music, sound effects, tone) are harder to translate to text.

Ben Brock Johnson: Amorous Sivertson, happy belated St. Valentino's Day to you.

Amory Sivertson: Benjamin Brockis Johnsonite, back at you.

Ben: And with that in mind, what is the strangest date you've ever been on?

Amory: Probably like, I'm gonna say some dude thinking that we were on a date talking to me about something that he thought that I was interested in, and I wasn't, and we weren't. What about you?

Ben: I took out a girl named Amanda. We went to the movies, and we watched The Sixth Sense .

Amory: Classic love story.

Ben: Classic love story, and we also broke into a Speedbowl.

Amory: Is that like a go-kart?

Ben: No, it's like, you know, low-level race car — it's not the Indy 500. I don't know anything about cars.

Amory: The AAA of race car driving.

Ben: Something like that. Yeah, and she climbed over the fence with me. We definitely trespassed, and it was, like, one of those things where, like, I wanted it to be on, but I didn't know it was on, but it was definitely on. Looking back on it, it was on. But I just dropped her off and was like, "Have a good night. I hope maybe someday you'll consider dating me. OK. Goodbye."

Amory: And you lived happily ever after.

Ben: Yeah, I think she did. She certainly did.

Amory: You did, too. Your wife is one of my favorite things about you.

Ben: Yeah. But my wife didn't live "happily ever after" after. That's the problem for her.

I don't know if either of our dates would've ever gone viral, at least not as viral as the date we're talking about today.

Jason Carman: This whole, like, little Twitter virality stint was basically me capitulating to Twitter every step of the way.  

Ben: I — that, that actually worries me deeply. 

Jason: Me, too.

Amory: Jason Carman lives in San Francisco. He makes documentaries about tech startups. He also launches rockets into space. Big X — Twitter — user.

Ben: And he's single.

Ben: So, what — how's dating? How's it going? 

Jason: (Laughs.) Dating... (Laughs.)

Ben: Jason is in his early 20s, what he describes as a transitional period in the dating scene. He says standing out from the endless feed of men online is more important than ever.

Jason: Everyone's beginning to, like, realize, Oh, dating is no longer just like a fun after high school, in-college thing. So, thinking about it differently has kind of been a trip.

Ben: We better get serious; put together some PowerPoints now.

Jason: That's what I thought.

Amory: Oh yes, and his creative approach to dating has recently earned him a bit of a reputation, one he's not so sure about.

Jason: I don't know if I want to be totally known as the PowerPoint dating guy.

Ben: Too late, my friend! Jason Carman is the PowerPoint dating guy. Why?

Amory: Because about a month ago, Jason decided to go on a first date, and, instead of the usual thing — "Where'd you grow up?" "How many siblings do you have?" — he opted to give a lengthy PowerPoint presentation, a slide show.

Ben: And he filmed it for all the world to see!

Amory: Some might call it an odd approach to wooing. Others?

Jason: I guess it's the modern version of going and, I don't know, fighting a knight, fighting for one's honor. The modern version of that is making a PowerPoint.

Ben: Killing a woolly mammoth and bringing it back or something.

Jason: Yeah.

Amory: I'm sure those knights would really appreciate this comparison .

Amory: Today, Endless Thread listeners, we bring you the story of one date, two people, and 29 slides that caught the attention of millions online.

Ben: This is "Dinner and a (Slide) Show."

Harpriya Bagri: I had seen some of his stuff on Twitter before, so I kind of knew of him just through the Twitterscape.

Amory: Harpriya Bagri is a software engineer, also in the Bay Area. She works with artificial intelligence. And if you're wondering, we interviewed Harpriya and Jason separately.

Amory: Harpriya, how would you describe your dating life? 

Harpriya: You know, not great.

Amory: Can AI help with that? 

Harpriya: You know, funny that you mentioned that. I also made an AI agent to background-check my Hinge dates for me.

Ben: How's that working out for you? Harpriya and Jason didn't meet on Hinge. Their meet-cute was a tad more old fashioned.

Harpriya: There was this party. Jason was there. That's how we met. I was telling him about how I really enjoyed his videos and stuff, and he had read my blog.

Jason: She's great. She's very smart, and we're both nerds in the best sense of that. I mean, we met at a tech-optimism dinner party at my house.

Amory: A tech-optimism dinner party. Yes, you heard that correctly. They talked about things like AI, podcast audio quality, and they were hitting it off. Then they got to a somewhat contentious subject, one that would go on to have a rather big effect on their soon-to-be romantic lives.

Harpriya: If I recall correctly, it was him that had brought it up.

Jason: This movie comes up with me a lot in conversation. And I just think it's great. I don't know how. I don't intentionally bring it up. That would be really concerning for my future dating, but —

Harpriya: I had just seen it like a few weeks before that, just very recently. And I was just telling him how it was cool and all, but it wasn't like other Christopher Nolan movies. Maybe some of it went over my head. I didn't really enjoy it as much as I hoped to.

[ Fay : All I have for you is a gesture in combination with a word: Tenet.

Protagonist: That's all they've told you?]

Jason: Tenet is the most underrated Christopher Nolan movie, and hated in many ways. 

Ben: For the uninitiated, Tenet is a nearly 3-hour action movie written and directed by Christopher Nolan, the guy who brought us mind-bending films like Inception , Memento , Interstellar , Oppenheimer .

Amory: And, Ben, as you know, I am the uninitiated. I have never seen Tenet .

Ben: On this timeline.

Amory: (Laughs.) How would you describe the plot of Tenet ?

Ben: Uh, there's, um, some good guys and some bad guys, but there's one good guy. And he's trying to travel through time to stop the end of the world. And there's a machine. There's, like, a machine they have to go through to, like, to go through time. And there's a lot of discussion about entropy, which I don't really understand. And yeah, that's what I got. How'd it go? How'd that go for you?

Amory: (Laughs.)

[ Protagonist : I need some idea of the threat we face.  

Barbara: As I understand it, we're trying to prevent World War III.  

Protagonist: Nuclear holocaust.

Barbara: No. Something worse.]

Amory: Apparently, this movie is not for everyone.

Harpriya: It was very slow for probably a good chunk of it — probably a majority of it. I think I didn't see how certain things added up. 

Ben: But it is the movie for Jason.

Jason: I think it's like the most unique take on time travel that I've ever seen in a movie, and I think that's what makes it so cool.

Ben: They have a lot in common, clearly.

Amory: A lot in common. They're both at the tech-optimism party talking about Tenet . Harpriya's like, Mmm, yeah, too confusing, too long. I don't get what all the fuss is about. Normally, this might elicit a head nod and a new topic.

Ben: But Jason had been in this situation before!

Harpriya: He ended up telling me that he had an ex-girlfriend who he explained the movie Tenet to, and he made this whole, like — he did a presentation on it or something. And I was like, Oh, interesting. I didn't think I would be at the end of another presentation in the near future, but I thought it was funny in the meantime.

Ben: Fast forward a couple weeks, and Jason is on X or Twitter or whatever, and he jumps into thread with some randos about, obviously, Tenet . One tweet has a video of a Peloton instructor ranting about the movie mid-workout.

[Peloton instructor (via @JacobOller ): Did anybody see this besides me? Because I need a manual. Someone's got to explain this.]

Ben: And so he ends up tweeting someone else, to say.

Jason: I have these slides I made for a date three years ago. And people didn't believe me. I went to bed, woke up, the tweet was mini-viral. Posted the slides. That went very viral. And then some guy replied, "You should record yourself on a date doing the slides," which I proceeded to do.

Amory: Jason is, among other things, a self-described content creator. And he knew Harpriya had recently started to make her own content. So, Jason got an idea.

Harpriya: He had just, like, texted me, being like, Oh, do you remember when I was telling you about Tenet , blah, blah blah? And he was like, How about I give you the presentation? Do you wanna go on a date? And I was like, OK, that's fine. 

Jason: She didn't know at the time that it was gonna be recorded. But I'd met her a few times. She seemed cool. I knew she was thinking about getting into content.

Harpriya: He was very explicit to not go on Twitter beforehand.

Jason: I was just like, I know she would be interested in doing something like this once she knew what it really was. And this is another thing I like about Tenet's approach, is much of it is covert.

Harpriya: I literally thought we were just gonna talk about the movie. But, no, it was a lot more than that.

Amory: A lot more than that. Here we go!

Ben: How the date went down, in a minute.

[SPONSOR BREAK]

[ Jason : People didn't think I was serious about making a slideshow about the movie Tenet . But I did. I have it here.]

Amory: So what happens when a guy goes on a date with a PowerPoint presentation and secretly records the whole thing?

Ben: He might get beat up. He also might get 3.7 million views , obviously. But let's not get ahead of ourselves.

[Jason: And so I asked a friend of mine who I met a few weeks ago, a girl named Harpriya. I texted her last night, Do you want to come to a date, and I'll give you my Tenet presentation? So that's what's going to happen since everyone has asked to, well, see the presentation. So, here we go.]

Amory: OK, so she was warned. A presentation is on the dinner table, is on the menu.

Ben: He asked for consent before he gave her his Tenet presentation.

Amory: So, about an hour before the date, Jason sets up at an Italian restaurant, Norcina, in San Francisco's Marina District. He got seats in front of a floor-length window.

Ben: Meanwhile, two friends with cameras and audio equipment hide behind an outdoor dining booth across the street. Secrecy is critical.

Jason: There was an area mic I hid under a flower vase right there. The restaurant was in on it.

Ben: Oh my goddddd!

Jason: So, the cameras were set up, and we were worried about the glare of the lighting. It was all stressful. We were having some issues with audio. Then, eventually, we got everything straight.

Amory: As for Harpriya?

Harpriya: I had researched the restaurant beforehand. I was really excited to eat food and, you know, get to know him better.

[Jason: Hey, how's it going? 

Harpriya: Hi.

Jason: Nice to see you.

Harpriya: Good to see you.

Jason: Thanks for coming.]

Ben: The date starts like a lot of first dates: kinda awkward. There's some nervous, small talk — about spritzes.

[Jason: I'm normally not like a spritz-flight guy, but it's really good here. And a friend, maybe you got a one, so I don't know what to do. Like spritzes at all before.  

Harpriya: What is a spritz?]

Ben: Great question.

Amory: Harpriya, I'm with you, girl.

Ben: But also, I'm in. I wish someone would take me out for a spritz flight.

Amory: Let's do that after this. Let's get a spritz.

Ben: A spritz flight.

Amory: So there's also this kind of vibe, like they both know something is odd. Then, Harpriya notices that Jason is holding something — a folder.

Jason: And I don't think she knew what was in it. She was looking at it a little bit, and then I held it up.

Harpriya: And he pulls out like 29 pages or something of these printed slides. And yeah, I was laughing, a little confused. And I was like, Is this serious? Is this partly a joke? But then, he was committed. 

Amory: There's like a weird joke in here, like, "And then he pulled out his slides!" It's like, "Oh gosh, no."

[Harpriya: Oh, you're serious. 

Jason: Yeah. Yeah. I mean —

Harpriya: You printed it out? I knew you said you had a presentation. I did not think —  

Jason: Yeah. I thought it'd be, like, weird if it was like, I don't know — I just printed the slides. It's only, like, 29 slides.]

Jason: She looks over her shoulder, almost like, I'm not sure for what. Was she looking for help? Was she looking to leave? Was she looking like — what was it?

Harpriya: Yeah, I was like, You know, let's just go with it. Let's just dive right in.

Ben: The slide show is titled, " Tenet for Dummies ." And it starts with text explaining, quote, "If you're reading this, you probably didn't understand the film Tenet ... It's OK!... you're just not as film smart as you thought."

Harpriya: "You're not the film expert you think you are," or something like that. He had all these, like, jokes in the beginning. And I was like, What are you trying to do?

Amory: Oh, boy.

Harpriya: I was like, This could be going very downhill if you're starting off with that slide.

Amory: Oh, I would agree, yes.

[Jason: I made these like three years ago. This is sassier than, uh, it's — you know, this is not about you. It's about the theoretical person who doesn't understand Tenet , which is I think most of the population.

Harpriya: OK. OK. You know what? Let's keep going. Yeah.]

Jason: I was just so nervous. I was trying my best to be myself, but not be too loud, be loud enough for the audio. Also just, like, the slides suck. The slides are not meant for this.

Amory: This video, we should say, is 17 minutes long, so it's edited.

Ben: Can't believe she stayed that long. Shocking.

Amory: Well, the date was longer. This is the edited version, and I have to admit, when I watched this for the first time, I kind of thought the whole thing was a setup. I thought Harpriya had to have been in on it.

Amory: You could say that there's romantic chemistry and you want to see where this goes. There's another part of me that's like, Hmm, this is something that we could make content around together, and it could do really well. You know what I mean?

Jason: Well, if anything, the first.

Amory: Whatever he told you, what he pulled out was not what you were expecting?

Harpriya: No, no, no, no. I literally thought we were gonna talk about it.

Ben: Regardless, the date doesn't seem like it's starting well for Jason, the guy who said "you're not as film-smart as you think you are." Until...

Jason: The first time it happened where she actually got interested was the palindrome. 

Harpriya: He showed this very ancient artifact where it said, it said "tenet," and I think that pulled me in.

Amory: This slide shows a matrix carved into stone. It was discovered in the ruins of Pompeii and later found elsewhere. It kind of looks like a secret code.

Ben: There are five words in the matrix. And they all can be read backwards and forwards. The word in the center is "tenet."

[Jason: No one knows what it is. 

Harpriya: Where is it? 

Jason: It's everywhere. They have it on doors. They have it on buildings.]

Harpriya: Wait, I didn't know this. Like, that was really cool.

Ben: This is where having seen the film actually helps, Amory, because the whole movie is about time inversion ...

[Barbara: It's inverted. Its entropy runs backwards. So to our eyes, its movement is reversed.]

Ben: ...which is different than the time travel we usually imagine, where we get in a machine, press some buttons, and go ride a dinosaur.

[Barbara: Don't try to understand it. Feel it.]

Jason: And then the next slide, I think she remembered that it was a PowerPoint slide on a movie on a date and went back to being like, Um, what?

[Harpriya: How many slides in are we?

Jason: Probably like halfway there.

Harpriya: Halfway there.

Jason: Part two, part six, but...]

Jason: I was like, Oh my God, these slides are just monotonous and unclear and slow. And, like, I'm getting bored, and I'm getting out of it. And so I quickly just like — I was like, OK, this happened, this happened, this happened. And then when I did that, went through four slides that I didn't think were that important very willy-nilly, she was like, Wait, what was that one?

Amory: "That one" was a pretty cool slide, actually. Kind of a timeline of the whole movie, showing at what point the characters are going forwards and backwards.

Ben: If you ever get confused watching this movie, this is the slide to look at.

Harpriya: He talked about that machine that reverses the entropy. And they don't really show this as much in the movie, which is why I think that was a big point of confusion for me, is when they go backwards in time, they're reliving every day at the same unit of time. Like, a second is a second, but backwards.

Ben: And this is the moment that things really took off.

Jason: The awkwardness was gone at that point. And it was just like, I want to see this PowerPoint thing through and then talk about time travel theory at the end. 

Harpriya: And so we got really into it. We got into all these details, and it was connecting together and it had a lot of like lightbulb moments talking about what that could mean and what our theories were on whether or not it exists.

[Jason: I guess my question is, do you think time travel is real?  

Harpriya: Well, I think the whole point is, like, time is relative.  

Jason: Yeah, subjective and relative. Lots of different — yeah. 

Harpriya: You time-travel backwards. Now, there's two of you. 

Jason: I don't see why that wouldn't happen.]

Harpriya: But yeah, I think it was really cool to be able to talk about it just because I feel like it's not a topic I normally talk about.

Amory: Ah, that first date. Romance.

Ben: True love.

Amory: True love.

Ben: Eventually this PowerPoint date kind of morphs. They get pizza. They put down the slides. They eat. All of a sudden, it's just like a normal date.

Amory: Except for the secret camera part.

Jason: Once the pizza moment happened, I started laughing like the way that you do when you say "cut" kind of thing. I started laughing and said into my mic, "OK, guys, I think we did it." And then, at that point, she totally knew what was going on.

Harpriya: And I was like, "I had a little bit of a feeling!" I did!

Amory: Whoa, that was at the end of the date?

Jason: And I was like, "Are you? I could totally delete the footage. Like, seriously, it's no problem. Like, I don't even know if it went well." And she was like, "Let's just see it. Like, let's go look at it."

Harpriya: And later on in the night, we went over to Jason's apartment, and I watched him edit this whole thing, shrink it down to 17 minutes.

Amory: Oh my god, that night?

Harpriya: Yes. That night. (Laughs.)

Ben: Interesting.

Amory: No, it'll be really cool. I'm gonna give you my presentation. Then we'll go back to my apartment, and you can watch me edit the footage of the date that I recorded that I didn't tell you that I was recording until the end. No notes. Sounds like —

Ben: Oh, lovely. Can't wait to come up to your place and have a drink.

Ben: Jason uploaded the video the next day.

Jason: And that was terrifying. Thankfully, I think it went OK and wasn't horrible, per se.

Ben: People liked it! Sixteen thousand people, to be precise. Millions watched.

Amory: But some people were not huge fans.

Amory: Yes, believe it or not, some took issue with the surreptitious filming.

Harpriya: A lot of my friends have asked me that question, like, Were you offended or, you know, whatever else? Like, some of my friends clearly would not be cool with it. But no, I thought it was funny. I genuinely thought it was funny.

Ben: Others saw the very premise as a bad idea. Like the definition of mansplaining.

Harpriya: I can see why people think that. But I think in reality it honestly didn't feel like that at all. It was definitely more of a conversation. It was funny. And then there was a lot of banter and back-and-forth. I don't think he's a mansplainer. I think he's a great guy.

Jason: I think it's a person thing. I wouldn't try this on a blind date with someone off of a dating app or just a random person — like, I knew Harpriya was someone that would appreciate something like this. 

Amory: I want to know what movie Harpriya would explain to you.

Jason: It would be funny to do it and have people vote who did better. I think she would do better, 100%. But that would be, that would be a great follow up.

Harpriya: My favorite movie in the whole world is Cars , like the Disney Pixar movie.

Amory: Yes! I've never seen it, but I love this. I love that we are miles away, seemingly, from Tenet .

Harpriya: It's not just this animation about talking cars. It's, I feel like, so deep and has a lot of philosophical meaning to it that people miss. So I would love to give a presentation about Cars . I feel like I can really talk about that movie a lot.

Ben: Oh man, all I have to say, Harpriya is "ka-chow."

[Lightning McQueen: Me. You. Dinner. Pah-ka-chow. Cha-chow. Pah!

Sally Carrera: What that? Ow. Ouh. Please. Ugh.]

Ben: In the end, they both said the date was a learning experience. Not just about Tenet . They learned some other things, too.

Jason: If you're someone who's already anxious and paranoid about what people think of what you're saying, which I certainly am as well, then your problem is definitely not worrying about saying too much. You just need to be out there and confident in what you're saying or your PowerPoint presentation.

Harpriya: Maybe, it's like, in an odd way, the bar of a fun date is higher. It could be so dynamic. It doesn't have to be like, "How many siblings do you have?" "What's your favorite color?" Especially to understand why someone likes something so much is truly a reflection of themselves that you don't get from the very basic conversations of how many siblings you have and your favorite color and all those basic questions.

Ben: The Tenet date was a few weeks ago. Has there been a second date?

Jason: Uh, no. We have been talking a lot about things, but there's not been a second date.

Harpriya: Jason and I have kept in touch via text. And we'll see. I don't know.

Amory: Well, now you have a Cars presentation that you have to put together and give.

Harpriya: I know. So that's tempting. I think I'll — do I tell him? Should I tell him or just invite him?

Amory: Just invite him.

Harpriya: Give him a taste of his own medicine.

Ben: I have to say Amory, that when we first talked to Jason, there were like so many red flags for me where I was like, Here's a guy who — he's explaining a movie to this woman, he's subjecting this poor woman to 29 slides of explanation on their first date. But the more that we talked to Jason, I was like, You know what? This guy's a nice guy, I think. He's actually a nice guy, and it was really nice to hear Harpriya say like, No, I was good with this. And to me it's just a reminder that, you know, true love is very subjective. And also, Harpriya, I really look forward to the Cars slide-deck explanation. My kids would also love that.

Amory: Yeah, I think Harpriya is smart as hell, and I think if she had really been miserable, she would've left. And I guess my only thought is that like a date is not, Let me tell you about this thing. A date is maybe. Let's each tell each other about a thing.

Amory: If we can go back in time, time travel, we can do this date again!

Ben: Oh, let's see it happen.

Amory: And they can each give their presentation, and then they will live happily ever after if they so choose to.

Amory: Endless Thread is a production of WBUR in Boston.

Ben: (Speaks "backwards.”) It was produced by (speaks "backwards").

Amory: Are you trying to say his name backwards?

(Ben speaking "backwards" in reverse.)

This episode was produced by Dean Russell. It was co-hosted by Ben Brock Johnson. And...

Amory: ...Amory Sivertson. Mix and sound design by Emily Jankowski.

Ben: The rest of our team is Katelyn Harrop, Samata Joshi, Frannie Monahan, Matt Reed, Grace Tatter, and Paul Vaitkus.

Amory: If you have a PowerPoint presentation that you want us to hear, invite us out. We'll give you one as well.

Ben: Take us out for a spritz flight for crying out loud.

Amory: It's about time, don't you think?

Amory: Yeah, just email Endless Thread at WBUR.org. That's how the best dates start.

Ben: Yeah, you don't, you don't even have to call or text. You can just email us. It's fine.

Headshot of Dean Russell

Dean Russell Producer, WBUR Podcasts Dean Russell is a producer for WBUR Podcasts.

Headshot of Amory Sivertson

Amory Sivertson Senior Producer, Podcasts Amory Sivertson is a senior producer for podcasts and the co-host of Endless Thread.

Headshot of Ben Brock Johnson

Ben Brock Johnson Executive Producer, Podcasts Ben Brock Johnson is the executive producer of podcasts at WBUR and co-host of the podcast Endless Thread.

Headshot of Emily Jankowski

Emily Jankowski Sound Designer Emily Jankowski is a sound designer for WBUR’s podcast department. She mixes and designs for Endless Thread, Last Seen and The Common.

More from Endless Thread

IMAGES

  1. How to Create a Responsive HTML Slider for your Website?

    slider for website code

  2. How to create a Slider/Carousel in HTML with just 5 lines of code.

    slider for website code

  3. 36 How To Create Slideshow Carousel Using Html Css And Javascript

    slider for website code

  4. 30 Bootstrap Slider Examples For Modern Versatile UI Designing

    slider for website code

  5. How to Create a Responsive HTML Slider for your Website?

    slider for website code

  6. Image Slider with Controls using HTML CSS & JavaScript

    slider for website code

VIDEO

  1. Vertical Slider using HTML, CSS & JavaScript

  2. How to make testimonial slider in html

  3. Responsive Image Slider

  4. CSS slider follow #coding #css #code #htmlcsscode #html #webdevelopment #webdesign #css3

  5. Image Slider Using HTML , CSS & JavaScript

  6. Basic website slider with html/css #shorts

COMMENTS

  1. Responsive Slider Examples For Modern Websites

    A Curated Selection of Slider HTML CSS Responsive Examples Code Snippets There's a rich assortment of CSS sliders out there waiting for you to explore. They cater to a wide range of slider features you typically come across on websites. Delicious full-width slider Get Slider Revolution and use this template

  2. 110+ Perfect CSS Sliders (Free Code + Demos)

    2. Image Comparison Slider A simple and clean image comparison slider, fully responsive and touch ready made with css and jquery. Author: Mario Duarte (MarioDesigns) Links: Source Code / Demo Created on: August 14, 2017 Made with: HTML, SCSS, Babel Tags: css, jquery, responssive, frontend, interactive 3. Javascriptless Before/After Slider

  3. 110+ CSS Sliders

    Welcome to our updated collection of hand-picked free HTML and CSS slider code examples. These examples have been carefully curated from various online resources, including CodePen, GitHub, and more. This August 2023 update brings you 11 new items to explore and implement in your projects.

  4. How To Create a Slideshow

    1 / 4 Caption Text Try it Yourself » Create A Slideshow Step 1) Add HTML: Example <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides fade"> <div class="numbertext"> 1 / 3 </div> <img src="img1.jpg" style="width:100%"> <div class="text"> Caption Text </div>

  5. 10 Best Responsive HTML5 Sliders for Images and Text ...

    1. Royal Slider: Touch-Enabled HTML Slider Image Gallery Royal Slider is the top-selling and best HTML slider you find on CodeCanyon. This HTML slider is an image gallery and content slider plugin with animated captions, responsive layout, and touch support for mobile devices. This image slider in HTML has a 4.75-star rating.

  6. How to Create a Slider using HTML and CSS?

    These would be used for manipulating the slider and creating the effect. Once, you are familiar with all these concepts, let's create a slider. We will be going step-by-step exploring each concept and why are we doing what we are doing. Step 1: Create the Basic Layout of the Image Slider using HTML Code. Let's create the basic skeleton of our ...

  7. Amazing CSS Slideshow Examples You Can Use In Your Website

    CSS slideshow examples dot the web, showcasing how code breathes life into static pages. They're more than eye-candy; they're the silent narrators of stories told through images and animations. In the dance of pixels we're about to unpack, discover the steps to crafting your own digital ballet. From HTML5 standards to CSS3 transitions ...

  8. How to create a working slider using HTML and CSS

    <html> <head> <title>GeeksfoGeeks</title> <style> #frame { margin: 0 auto; width: 800px; max-width: 100%; text-align: center; } #frame input [type=radio] { display: none; } #frame label { cursor: pointer; text-decoration: none;

  9. How to Create a Range Slider in HTML + CSS

    Feel free to adjust the CSS code to your liking. More Slider Examples . If you would like to customize your slider further, take a look at these examples. Creating a Range Slider With Tick Marks. Tick mark sliders are beneficial if you need a range slider with more precision. In this example, we will build a volume control. Take a look below.

  10. 31 Bootstrap Sliders

    Collection of free Bootstrap slider code examples: with thumbnails, auto, testimonials, vertical, full page, etc. Update of May 2020 collection. 10 new items. rokr March 5, 2021 Links demo and code Made with HTML / CSS / JS About a code Slider V18 Give your users full control over your content with this free slider with navigation template.

  11. Create a slider with pure CSS

    Step 1 - create your slider layout. First you need to create a space for your slider to go into, and of course, some slides! slider-container is just the element on your site that you want the slider to go in. slider is like the 'screen', or the viewport that will display all your slides. slides will hold your slides.

  12. 25+ Slider HTML CSS Responsive Examples

    Demo/Code. 19. Slider Transitions CSS and JavaScript. An image carousel is an ideal extra for practically any site page and may give it a cleaned and master look. To be sure, even the most central web design will appear to be astonishing with joining a practical slide show up.

  13. How to Create a Slideshow with HTML, CSS, and JavaScript

    For this tutorial you can create a slideshow by following these simple steps: Write some markup <!DOCTYPE html> <html lang="en">

  14. How to Create an Image Slider or Slideshow

    Image Slider or Image Carousel is a way to display multiple website images. Fancy pictures can attract a lot of visitors to the website. Usually, image sliders are created with the help of JavaScript, but with the release of CSS3, this can also be done by using pure CSS3.

  15. 30+ HTML CSS Slider Examples Code Snippet

    Demo/Code. 7. Web Slider with HTML and CSS. Yarden is a cool looking slider idea. The vogue plan of this layout makes it an ideal alternative for introductions and for picture sliders. Marsh strong writings are unmistakably readable even on the picture foundation sliders. Slide changes are fast and the activity impacts are utilized distinctly ...

  16. CSS Image Sliders

    Included are code walkthroughs and other slider examples. A CSS image slider is a crucial part of any website or app. Sliders allow you to compact graphical information in a fun interactive way. The majority of the time, sliders are helpful to websites because they can be used to showcase different products or other relevant content to the visitor.

  17. 12 Amazing Slider Website Designs [Examples & When to use]

    One web design technique is sliders. They allow for content to be displayed in a way that maximizes the space on the screen. A lot of information can be shown with the use of a great slider website. However, it's best to understand what they are and when they are useful, they can easily become annoying and poorly timed. What is a Website Slider?

  18. How to Create a Responsive HTML Slider for your Website?

    Install Smart Slider 3. Create your HTML slider or import one from the Template Library. Customize your slider. Export it as HTML. Use the codes on your website. 1. Install WordPress or Joomla on localhost. For creating a HTML slider you will need a WordPress or Joomla platform which you can install on localhost.

  19. 25+ JavaScript Slider Code Examples

    Demo/Code. 17. Pokemon Slider Code Snippet. The designer has utilized the Pokemon idea in this slider, other than this is a basic slider that you can use in a wide range of websites. The 60:40 split-screen style design, gives you a sufficient measure of room for the two pictures and content substance.

  20. Amazing homepage slider examples from modern websites

    Design visually attractive and high-performing websites without writing a line of code. WoW your clients by creating innovative and response-boosting websites fast with no coding experience. Slider Revolution makes it possible for you ... and a striking call-to-action button into a modern website slider design. This slider is designed to engage ...

  21. 35+ CSS Slideshows

    1. Slideshow Vanilla JS W/ CSS Transition Custom slideshow with staggered transitions. Built in vanilla JS. Author: Riley Adair (RileyAdair) Links: Source Code / Demo Created on: January 1, 2018 Made with: HTML, CSS, Babel 2. Untitled Slider A small experiment which quickly turned into something more. Author: Nathan Taylor (nathantaylor)

  22. W3.CSS Slideshow

    W3.CSS Slideshow - W3Schools W3.CSS Slideshow is a tutorial that teaches you how to create a stylish and responsive slideshow with W3.CSS, a modern CSS framework. You will learn how to use W3.CSS classes, animations, transitions, and buttons to create a slideshow that works on different devices and screen sizes. You will also see examples of different slideshow effects and themes that you can ...

  23. 11 Inspiring Slider Examples for Your Next Website

    2. Product Carousel. Spice up your product showcase with the Full Width Product Carousel template, a cool slider that effortlessly combines style and practicality. By using the Carousel slider type, this template offers a visually stunning full-width layout, ideal for showcasing products and captivating your audience.

  24. ESP32 Web Server with Slider

    Will guide you to build a web server-controlled PWM in ESP32. Jan 14, 2024 • 320 views • 0 respects

  25. First date? Try a PowerPoint presentation

    Instead of a typical first-date conversation, he presented 29 slides about his favorite movie. The internet loved it. But did his date?