How to Make a Simple Image Slider With HTML, CSS and jQuery

Picture carousels, picture sliders, no matter why you call them, this mode is so visible on the Internet that almost every website has one. If you are a web developer, you may end up with building one yourself. With this in mind, let's see how to build a simple picture slider using HTML, CSS, and jQuery.

HTML Structure

First, we create a container element that has the class name container. The container contains our pictures. The picture is wrapped with div tags so that the slideshow can be converted to a link, or content other than the picture can be used as the slideshow. The first container div has some inline styles to ensure that the first image in the slider is visible when the page loads. There are also two button elements for manually looping through slideshows based on user requests.

CSS style

Here, we set the picture slider, container div and the width of their internal pictures. It should be noted that all our containers div are set to display: none;. If this is not the case, all our pictures will be visible at the same time. We will use JavaScript to set one container div and the rest remain hidden. display: inline-block;

JavaScript Interaction

First, we need to define some important variables. The first variable is

, which is set to 0. The second variable is currentIndex, which is set to items. This will return a list of containers containing images. The third variable is $('.container div'), which is set to the length of the variable. The last variable tells us the total number of slides in the picture slider. div itemAmtNext, we create a function called "cycleItems". This function will be used to display the correct image while ensuring that other images remain hidden. Inside this function, we create a variable named items. This variable is set to

. The

method provided by jQuery takes an integer and will locate the first item returned by item that matches the integer. Therefore, if $('.container div').eq(currentIndex) is 0, eq will be positioned to the first picture container in the picture slider. Inside our $('.container div') function, the next thing to do is hide all our image containers currentIndex and set $('.container div').eq(currentIndex) to cycleItems. div

To ensure that our image rotates automatically, we need to provide a way to continuously call our cycleItems function after a certain period of time has passed. We do this by creating another variable called autoSlide. This variable stores a setInterval function that takes a delay of 3000 milliseconds, or three seconds. Inside this function, we add 1 to the currentIndex variable so that $('.container div').eq(currentIndex) will always refer to the next container div. Then, we define a very important "if" statement. This statement means that if our currentIndex variable is greater than the total number of pictures in the slider, the variable is reset to zero. If we don't have this if statement, we can't loop through our image list. After the if statement, we call the cycleItems function.

Next, we define the previous and next operations. These define what happens when we click the previous and next buttons. They work similarly to the autoSlide function, except that they cancel the automatic loop when clicked. To manually loop through the slideshow, clicking the next button will add 1 to the currentIndex variable, and clicking the previous button will reduce the currentIndex variable by 1.

Demo

View the demo on CodePen

Extra content

To view the image slider built using only CSS and HTML, check out the demo of Zack Wallace! (The link should be inserted here, and you can provide a link if needed)

FAQ (FAQ)

(This can be rewritten and polished according to the original FAQ part, so that the language expression is more natural and smooth while maintaining the consistency of the content)

Through the above steps, you can create a simple picture slider. Remember, you can adjust your CSS style and JavaScript code to your needs for different effects.

The above is the detailed content of How to Make a Simple Image Slider With HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!