Слайдер картинок, изображений и других элементов 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>