Иногда при создании сайтов нам требуется вывести на его страницах слайдер изображений.
К примеру вы создаете HTML страничку или же Landing Page, или же любой другой сайт, и вам нужно отобразить какую то информацию в виде изображений которые будут перелистываться при клике или же из заданным промежутком времени, тут нам и придет на помощь слайдер изображений.
В принципе слайдер может быть использован не только для изображений а и для любой другой информации, но мы сегодня рассмотрим вариант самого простого слайдера, именно для изображений!
В слайдере который мы сегодня рассмотрим мы будем использовать html, css стили и JavaScript.
Хотя слайдер очень простой в котором код JavaScript занимает всего 3kb, но он прекрасно справляется с такими функциями как перелистывание слайдов, имеет два вида навигации (стрелочки вправо/влево и навигационные квадратики), присутствует небольшой эффект анимации, есть возможность задавать время перелистывания, делать авто прокрутку или же только перелистывать при клике, ну и другие возможности которые мы опишем на странице ниже.
В общем с описанием мы закончили, теперь давайте приступим к реализации и написании нашего слайдера изображений.
1. И так, для отображения слайдера пишем такой HTML код:
|
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="Первое фото" /></li> <li><img src="photos/2.jpg" width="558" height="235" alt="Второе фото" /></li> <li><img src="photos/3.jpg" width="558" height="235" alt="Третье фото" /></li> <li><img src="photos/4.jpg" width="558" height="235" alt="Четвертое фото" /></li> <li><img src="photos/5.jpg" width="558" height="235" alt="Пятое фото" /></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. В самом низу страницы добавляем JS код настроек слайдера:
|
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> |
Описание вышеуказанных настроек:
- id - id элемента где хранится слайдер
- auto - скорость прокрутки слайдов (можно указать целое цисло или же false для отключения)
- resume - продолжать пролистывание после нажатия кнопки (true / false)
- vertical - вертикальная смена слайдов (true / false)
- navid - id списка навигации (квадратики)
- activeclass - название класса который будет добавляться к элементу списка
- position - стартовая позиция (указывается целое число)
- rewind - пролистывать слайды бесконечно, или при переходе например к последнему слайду отматывает назад к первому (true / false)
- elastic - добавляет дергающийся эффект при смене слайдов (true / false)
- left - id кнопки влево
- right - id кнопки вправо
3. Ну и последнее это стили CSS :
|
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; } |
Ну вот в принципе и все, наш слайдер готов, так же вы можете скачать готовый исходник данного слайдера ниже!
Также вы можете скачать готовые исходники ниже.
13 комментариев
Не рабочий этот скрипт
А Вы то его хоть пробовали?
Если он не рабочий то как же он в исходнике работает… Мистика
Где в Вашем HTML коде стрелки (prev/next)?
не совсем понял суть вопроса:
Наверное Вы про это?
и
Скрипт рабочий просто надо еще вам скачать код с jscript.js
Добрый день подскажите я скачал предложенный Вами слайдер что нужно сделать и как чтоб добавить его на страници своего сайта?
Если вкратце то вам нужно скопировать из исходника файлы к себе на сайт, и подключить их на требуемой вами странице, по сути перенести файлы и перекопировать файл index..
Ну или обратится к тому кто понимает что с этим делать. там работы то по сути на пару минут.
как увеличить размер картинки в центре
Все размеры картинки регулируются в самом коде HTML и стилях css, а так же загрузите правильного размера картинку.
Если я правильно вас понял вы как раз имеете виду в центре картинку основные фото слайдера.
Скрипт работает. но первоначально у меня стоит дисплей none. когда кликаешь блок появляется но картинки не меняются
Там по сути не чему не работать… Проверьте нет ли у Вас конфликтов в JS а так же CSS.
При перезагрузке страницы на слайдере справа от фото на короткое время появляется скролл бар. Как от этого избавиться?
Ищите конфликт стилей в своем сайте.