Слайдер картинок, изображений и других элементов HTML
Чтобы привлечь и удержать новых пользователей применяют различные техники. Одна из самых популярных - сделать ротатор или слайдер изображений, div блоков.
Как сделать слайдер
Умные вебмастера, чтобы привлечь и удержать новых пользователей применяют различные техники. Одна из новых и самых популярных — сделать ротатор или слайдер каких-либо изображений (картинок). Такой слайдер можно увидеть например на сайте знакомств Mail.ru или на доске бесплатных объявлений Torgash.by
Сделать слайдер
Создаем на своем хостинге папку script и распаковываем в нее архив
Подключаем файлы архива:
Перед закрывающим тегом HEAD вставляем строки:
<script type="text/javascript" charset="utf-8" src="//www.ваш_сайт/script/jquery-1.4.4.min.js"></script> <link rel="stylesheet" type="text/css" href="//www.ваш_сайт/script/slider.css" /> <script type="text/javascript" charset="utf-8" src="//www.ваш_сайт/script/jquery.jcarousel.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap: 'circular' }); }); </script>
Устанавливаем блок слайдера:
В нужном вам месте страницы вставляем код самого слайдера:
<div class="aligncenter"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><a href="ссылка на 1 страницу"><img decoding="async" src="адрес 1-й картинки" border=0></a></li> <li><a href="ссылка на 2 страницу"><img decoding="async" src="адрес 2-й картинки" border=0></a></li> <li><a href="ссылка на 3 страницу"><img decoding="async" src="адрес 3-й картинки" border=0></a></li> <li><a href="ссылка на 4 страницу"><img decoding="async" src="адрес 4-й картинки" border=0></a></li> <li><a href="ссылка на 5 страницу"><img decoding="async" src="адрес 5-й картинки" border=0></a></li> </ul></div>