YogeshChauhan.com

How to create a simple slider with CSS and jQuery?

March 7, 2021

We’re going to modify the following post example and convert the JavaScript code into a jQuery code.

Let’s start with simple HTML:

I have used div tags but you can always swap it with list tags. You can style the listanimate 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. We are NOT setting the opacity property and the transition property in this example as we did in the JS example. Also, add other styles as per your requirements.

We are keeping the image style same 100% and object-fit.

Everything was almost same as the JS example till this point.

Now, the main difference starts…

Let’s hide all children of div#slides and just show the first slide using nth-child.

…and finally, create the function to hide and show the slides one by one. To call the function periodically, we can use setInterval just like we used in JS example.

This is how it will look like afterwards:

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to make flexbox items of the same size?CSSHow to create ‘share on LinkedIn’ link using just HTML?HTMLThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscA complete diagram with building blocks of an Angular applicationAngularThe difference between Class declarations and Class expressions in JavaScriptJavaScriptHow to find the HCF or GCD and LCM of two given numbers using Swift?Swift