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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<link rel="stylesheet" type="text/css" href="styleshet02.css" /> <script type="text/javascript" src="jscript.js"></script> <div id="wrapper"> <div id="container"> <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div> <div id="slider"> <ul> <li><img src="photos/1.jpg" width="558" height="235" alt="First photo" /></li> <li><img src="photos/2.jpg" width="558" height="235" alt="Second photo" /></li> <li><img src="photos/3.jpg" width="558" height="235" alt="Third photo" /></li> <li><img src="photos/4.jpg" width="558" height="235" alt="Fourth photo" /></li> <li><img src="photos/5.jpg" width="558" height="235" alt="Fifth photo" /></li> </ul> </div> <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div> <ul id="pagination" class="pagination"> <li onclick="slideshow.pos(0)"></li> <li onclick="slideshow.pos(1)"></li> <li onclick="slideshow.pos(2)"></li> <li onclick="slideshow.pos(3)"></li> <li onclick="slideshow.pos(4)"></li> </ul> </div> </div> |
2. At the very bottom of the page, add the JS code of the slider settings:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', auto:4, resume:false, vertical:false, navid:'pagination', activeclass:'current', position:0, rewind:false, elastic:true, left:'slideleft', right:'slideright' }); </script> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
#wrapper { margin: 50px auto; width: 673px; } #container { background: #fff; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; height: 235px; padding: 32px; position: relative; } .sliderbutton { cursor: pointer; float: left; height: 235px; width: 25px; } #slideleft { background: url(images/icons.gif) -50px -265px no-repeat; } #slideleft:hover { background-position: -0 -265px; } #slideright { background: url(images/icons.gif) 0 90px no-repeat; } #slideright:hover { background-position: -50px 90px; } #slider { float: left; height: 235px; overflow: auto; position: relative; width: 558px; } #slider ul { left: 0; list-style: none; position: absolute; top: 0; } #slider li { float: left; height: 235px; width: 558px; } .pagination { height: 25px; list-style: none; position: absolute; right: 61px; top: 40px; } .pagination li { background: #ccc; border: 1px solid #fff; cursor: pointer; float: left; height: 8px; margin: 0 4px 0 0; width: 8px; } .pagination li:hover, li.current { background: #fff; } |
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.
No Comment
You can post first response comment.