How to create a simple picture slider
Image slider in JavaScript
Creation, development, manufacturing sites | WEB-STYDIA.COM

5/54 ratings

Sometimes when creating sites we need to display on its pages an image slider.

For example, you create an HTML page or Landing Page, or any other site, and you need to display some sort of information in the form of images that will be scrolled through a click or from a given time interval, then the image slider will come to our aid.

In principle, the slider can be used not only for images a and for any other information, but today we will consider the version of the simplest slider, namely for images!

In the slider that we'll look at today, we'll use html, css styles and JavaScript.

Although the slider is very simple in that the JavaScript code takes only 3kb, but it does a great job with such functions as slide-browsing, has two kinds of navigation (right / left arrows and navigation squares), there is a small animation effect, it is possible to set the paging time, do auto Scrolling, or just scrolling at a click, well, and other opportunities that we will describe on the page below.

In general, with the description we have finished, now let's start to implement and write our image slider.

1. And so, to display the slider, we write this HTML code:

2. At the very bottom of the page, add the JS code of the slider settings:

Description of the above settings:

  • id - id of the element where the slider is stored
  • auto - the speed of the slide scrolling (you can specify an integer number or false to disable)
  • resume - continue scrolling after pressing the button (true / false)
  • vertical - vertical slide change (true / false)
  • navid - id of navigation list (squares)
  • activeclass - the name of the class that will be added to the list item
  • position - starting position (an integer is specified)
  • rewind - to scroll through the slides indefinitely, or when going for example to the last slide, rewind to the first (true / false)
  • elastic - adds a twitching effect when changing slides (true / false)
  • left - id of the button to the left
  • right - id of the button to the right

3. Well, the last thing is CSS styles:

Well, basically everything, our slider is ready, you can also download the finished source of this slider below!

You can also download ready-made sources below.

You may also like

No Comment

You can post first response comment.

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.