JQuery library: sliders for your site

With the passage of time and the development of technology in thethe areas of web design are changing and the needs / requirements of users to content sites. If earlier it was mainly text content with a small number of thematic images, today the graphic component is the predominant one. It allows you to get a maximum of useful and useful information in a short time, and not waste time reading long texts. In this regard, more and more popular and, moreover, an essential element of web pages are the sliders. They are blocks with varying content in them - from images to links. A modern way to add this web object is to use the JQuery library. Sliders created with the help of this tool, are easy to use, easy to use, and look very impressive. Next, we'll look at how to make these elements of a web page yourself. Thanks to a large number of standardized tools, it becomes possible to implement jQuery sliders of various types and diverse content.

How to add a slider to a web page?

Ways to add sliders to the pagesite a few. Often, you do not even have to write HTML code and go into the script. There are a lot of free libraries that offer users already ready templates, which allow adding jQuery sliders to your site. All that is required of you is to copy it to the source code of your web page and enjoy the result. However, in this case, the possibilities of realizing your creative fantasies are limited. Therefore, it will be superfluous to be able to create this design element yourself. To do this, you need to know how to implement a simple jQuery slider, and you can always complicate it by adding additional elements to the code.

Create a slider yourself: the code in HTML

The first thing to start with is to write down the layout of the future slider.

1. Create a Slideshow block in the HTML file, which will contain all our slides (pictures, etc.).
2. In it we put a list of ul, each item of which will store a separate slide.

Working in CSS

Then we apply the necessary characteristics to itstyle, using a CSS document. It is necessary that the JQuery content slider we created works correctly and has the required form. At this stage, we have the following tasks:

• To make sure that only one slide is displayed in the Slideshow block (the picture or content needed at the moment), and the rest were hidden;
• arrange slides one after the other (from left to right);
• make the ul-container in which the slides are stored, movable (left and right).

To do this, we set the following parameters in the CSS file:

• for Slideshow: overflow-x-scroll, overflow-y - hidden:
• for ul: float - left.

You can also set the width, height, background, and so on.

We write code in jQuery

In HTML and CSS, all necessary changes have been made. It remains to work behind the JQuery code, the sliders in which should have the following parameters:

• slides should be replaced with each other with a certain interval of time;
• When you hover your mouse cursor, their movement should stop.

For this we declare two variables: slidewidth (equal to the length of the slide) and slidertime (specifies the period of the slide change). The timer will be started when the page of the site is fully loaded. To this parameter, we tie the action of hovering the mouse cursor on the slide (which stops the slide change).

Be sure to specify the length of the container ul. It will be equal to the number of slides multiplied by the length of each slide.

We insert the function responsible for changing the slides. That's all, you can check the work of your slider.

Conclusion

In this article, we looked at howindependently create jQuery-sliders for inserting on the page of your site. Using an example of a simple slider implementation, you can create your own variations of its interpretation, making appropriate changes to the source code. This will improve the design and make the use of your site more convenient for visitors.