s3slider jQuery плагин

s3Slider jQuery плагин сделан на основе скрипта слайд-шоу от jd.

Если вам нужно что-то подобное для вашего сайта, то s3Slider как раз то, что вам нужно.

Как это работает

Все очень просто. Во-первых, подключите библиотеку jQuery, затем и скрипт s3Slider в head разделе сайта.

jQuery можно скачать с домашней страницы.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

П'омните: Для корректной работы скрипта, должен соблюдаться ряд правил.

HTML

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
              <img src="#" />
           <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
              <img src="#" />
           <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

Пояснение

Если вы установили основной DIV ID, как s3slider, как мы cделали здесь, то это имя, должно быть префиксом и для всех других классов и ID для этого конкретного слайд-шоу. Например, если вы установите ID для основных DIV, как 'your_name', то внутренний ID должен быть 'your_nameContent' и классом '.your_nameImage', как в приведенном выше примере.

Во-вторых, каждый '.your_nameImage' элемент должен иметь потомка span.

Кроме того, последний DIV с классом 'clear' также должен иметь класс '.your_nameImage'.
Если вы этого не сделаете, то последние изображение не будет показано в слайд-шоу.

CSS

#s3slider {
 width: 400px; /* important to be same as image width */
 height: 300px; /* important to be same as image height */
 position: relative; /* important */
 overflow: hidden; /* important */
}

#s3sliderContent {
 width: 400px; /* important to be same as image width or wider */
 position: absolute; /* important */
 top: 0; /* important */
 margin-left: 0; /* important */
}

.s3sliderImage {
 float: left; /* important */
 position: relative; /* important */
 display: none; /* important */
}

.s3sliderImage span {
 position: absolute; /* important */
 left: 0;
 font: 10px/15px Arial, Helvetica, sans-serif;
 padding: 10px 13px;
 width: 374px;
 background-color: #000;
 filter: alpha(opacity=70); /* here you can set the opacity of box with text */
 -moz-opacity: 0.7; /* here you can set the opacity of box with text */
 -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
 opacity: 0.7; /* here you can set the opacity of box with text */
 color: #fff;
 display: none; /* important */
 top: 0;
 /*
 если
 top: 0;  -> бокс с текстом появится вверху картинки
 если
 bottom: 0;  -> бокс с текстом появится внизу картинки
 */
}
.clear {
 clear: both;
}

Затем, нужно инициализировать s3Slider и установить продолжительность показа одной фотографии (значение в миллисекундах).

JS

$(document).ready(function() {
$('#s3slider').s3Slider({
 timeOut: 4000
});
});

Также есть еще подборка десятки лучших jQuery слайдеров.