Yogesh Chauhan's Blog

How to create a simple text and image slider using CSS and JavaScript?

in CSS & JavaScript on March 7, 2021

The trick in this simple text slider is when and where to keep the slides. So, hide and show the appropriate slides and that will create the slider effect.

Let’s create the text and image slider together so that we can use whichever one.

Let’s start with simple HTML:

I have used div tags but you can always swap it with list tags. You can style the list, animate the list or few other things with the list items.

Let’s set the box area to border-box and set the main container position to relative and give it a fixed height.

We need to stack the slides on top of each other and we can do that by setting the position of slides absolute. Also, we are setting the opacity as 0 for all slides initially. Also, add other styles as per your requirements. The transition property is to add some animation.

This will hide all slides.

Let’s add the additional class to show those hidden slides and add style for images too.

To set the content center horizontally and vertically, make the slide container flex and add this additional style:

That style will make the first slide show as it has the show class in the container. Now, we just need to add some script to move the class to each slide one by one and hide others. Let’s do that.

The setInterval method will call the function every 2 seconds.

Here’s how the slider will look like at the end:

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPDROP DATABASE (remove a database) from PostgresPostgresSolution for “Yarn build: Failed because of a stylelint error”WordPressWordPress: How to display fields from ACF Flexible Contents?WordPress4 ways to create Date Objects in JavaScriptJavaScriptHow to make flexbox items of the same size?CSS