Create sliders with animated scrolling using Javascript
In this article I would like to share my practical experience in creating animated sliders using JavaScript.
The idea of the slider concludes that it can contain a considerable amount of information, while having a fairly compact size and providing a convenient way to view the data contained in it.
Most recently, doing the work on the layout, I needed to make a block of news feeds with smooth scrolling of headlines left / right (when pressing the corresponding buttons). To solve this problem, I wrote a fairly simple script that implements the scroll animation.
')
I do not know why, but I was very interested in the topic with sliders, so in my free time I continued working in this direction. As a result, after a series of tests, the software implementation of the scroll animation has been significantly improved.
The result of my work is a small script that connects to the page where the slider is located (or several sliders).
All that is needed in order for the slider to work is to create the corresponding object, passing the block identifier in which the slides are located to its constructor, and calling the corresponding methods of the created object in the event handlers of the controls initiating scrolling.
Here is how it looks in practice:
The requirements for the structure and styling of the slider will be described in detail later in the article. They are simple, but their implementation is necessary for the proper operation of the scroll animation mechanism.
I will take as a basis the example above, in which the slider looks like this:
Open the slider's internal device (by setting the overflow property of the sample-slider block and the list of slides to visible ) and define the requirements for the structure and styling:
And so, the slides should be presented as elements of an ordered or unordered list and positioned one after another horizontally from left to right.
The first item in the list is special. It is not visible to the user, however, the animation of the slide scrolling is implemented by manipulating the width of this element.
The list is embedded in the slider block. Its size should be chosen in such a way that in one horizontal line (client area of the list) fit at least the number of slides, for one more number of displayed slides, plus the first invisible list item. So, in my example, three elements are displayed in the slider, and five in the nested list (four slides plus the first special element).
The list itself must be shifted to the left in order to completely hide the first element on the left side, and at least one slide - on the right.
This is done so that during the scrolling, the outgoing slide gradually disappears, and the incoming slide gradually appears.
The last but very important requirement relates to the style design of the first element in the list of slides. It should not contain internal margins and a frame on the right and left sides, but its size must be chosen so that, when the width of this element is zeroed, the first slide completely goes to the left, and the second one becomes the first one.
Consider the Slider object constructor. As a required argument, it takes the identifier of the block in which the list with slides is nested.
Also, in addition to the mandatory, the constructor can take two more optional arguments that determine the smoothness and scrolling speed: shift and delay .
As a result, the constructor function has the following form:
The following are the cases when the slider object will not be created (instead, the constructor will return an empty object):
The following is a list of Slider object methods (in alphabetical order):
Note that if you need to change the default values that determine the smoothness and speed of the slide scrolling animation ( offset and delay ), you must pass the corresponding parameters to the object's constructor.
The slider implementation described above was successfully tested in the following browsers (in the Windows 7 RTM operating system):
I express my gratitude to the following people ( FuN_ViT , Parkim ) for helping to solve the problem with the layout of the example for Internet-Explorer browsers of the version lower than the 8th.
The idea of the slider concludes that it can contain a considerable amount of information, while having a fairly compact size and providing a convenient way to view the data contained in it.
Most recently, doing the work on the layout, I needed to make a block of news feeds with smooth scrolling of headlines left / right (when pressing the corresponding buttons). To solve this problem, I wrote a fairly simple script that implements the scroll animation.
')
I do not know why, but I was very interested in the topic with sliders, so in my free time I continued working in this direction. As a result, after a series of tests, the software implementation of the scroll animation has been significantly improved.
The result of my work is a small script that connects to the page where the slider is located (or several sliders).
All that is needed in order for the slider to work is to create the corresponding object, passing the block identifier in which the slides are located to its constructor, and calling the corresponding methods of the created object in the event handlers of the controls initiating scrolling.
Here is how it looks in practice:
A working example is available at this address . There is also a version in the archive .
The requirements for the structure and styling of the slider will be described in detail later in the article. They are simple, but their implementation is necessary for the proper operation of the scroll animation mechanism.
Structure and styling
I will take as a basis the example above, in which the slider looks like this:
Open the slider's internal device (by setting the overflow property of the sample-slider block and the list of slides to visible ) and define the requirements for the structure and styling:
And so, the slides should be presented as elements of an ordered or unordered list and positioned one after another horizontally from left to right.
The first item in the list is special. It is not visible to the user, however, the animation of the slide scrolling is implemented by manipulating the width of this element.
The list is embedded in the slider block. Its size should be chosen in such a way that in one horizontal line (client area of the list) fit at least the number of slides, for one more number of displayed slides, plus the first invisible list item. So, in my example, three elements are displayed in the slider, and five in the nested list (four slides plus the first special element).
The list itself must be shifted to the left in order to completely hide the first element on the left side, and at least one slide - on the right.
This is done so that during the scrolling, the outgoing slide gradually disappears, and the incoming slide gradually appears.
The last but very important requirement relates to the style design of the first element in the list of slides. It should not contain internal margins and a frame on the right and left sides, but its size must be chosen so that, when the width of this element is zeroed, the first slide completely goes to the left, and the second one becomes the first one.
Software interface
Consider the Slider object constructor. As a required argument, it takes the identifier of the block in which the list with slides is nested.
Also, in addition to the mandatory, the constructor can take two more optional arguments that determine the smoothness and scrolling speed: shift and delay .
As a result, the constructor function has the following form:
The following are the cases when the slider object will not be created (instead, the constructor will return an empty object):
- The identifier for a non-existing item is specified.
- The block with the specified identifier does not contain any child elements of the list, or their number is not more than three (the minimum number of slides is two, plus the first special list element).
- The width of the first element of the list is zero, or not more than the set offset ( shiftDelay ).
The following is a list of Slider object methods (in alphabetical order):
| Method | Description |
|---|---|
| getIdentifier | Returns the ID of the HTML element (slider) with which this object is associated. |
| getMaxShiftDelay | Returns the maximum time delay (in milliseconds) before starting a new phase of the scroll animation cycle. |
| getMaxShiftOffset | Returns the size (in pixels) of the maximum displacement of the slides in one step of the scroll animation loop. |
| getMinShiftDelay | Returns the minimum time delay (in milliseconds) before starting a new phase of the scroll animation cycle. |
| getMinShiftOffset | Returns the size (in pixels) of the minimum displacement of the slides in one step of the scroll animation loop. |
| getMoverWidth | Returns the current width (in pixels) of the first item in the list. It is used mainly by functions scrolling through slides described in the prototype. |
| getShiftDelay | Returns the set time delay (in milliseconds) before starting a new phase of the scroll animation cycle. It is used mainly by functions scrolling through slides described in the prototype. |
| getShiftOffset | Returns the size (in pixels) of the set slide offset in one step of the scroll animation loop. It is used mainly by functions scrolling through slides described in the prototype. |
| slideLeft | Scrolls the slides so that the new slide appears on the left side (i.e., the slides are actually shifted to the right, so that the new content appears on the left). |
| slideRight | Scrolls the slides so that the new slide appears on the right side (i.e., the slides are actually shifted to the left so that the new content appears on the right). |
Test results
The slider implementation described above was successfully tested in the following browsers (in the Windows 7 RTM operating system):
- Mozilla Firefox 3.5.2
- Google Chrome 2.0.172.39
- Opera 9.64
- Microsoft Internet Explorer 8.0.7600.16385 (in IE7 and IE8 modes)
Acknowledgments
I express my gratitude to the following people ( FuN_ViT , Parkim ) for helping to solve the problem with the layout of the example for Internet-Explorer browsers of the version lower than the 8th.
Source: https://habr.com/ru/post/66875/
All Articles