Adaptor или очень красивый jquery 3D слайдер!

Как должен выглядить HTML для работы плагина.

Он очень легкий и предлагает вам несколько опций настройки включая скорость переходов, задержку между слайдами, возможность включать/отключать автоматическое переключение, а также возможность «замораживать» переключение при наведении курсора мыши.

Adaptor также предоставляет управление пользовательскими событиями вроде переключения на желаемый слайд, отображение предыдущего/следующего слайда, воспроизведение и паузу. Ниже приведен HTML код для правильной настройки слайдера.

Код
<div><!-- works as a viewport for the 3D transitions -->
<div><!-- the 3d box -->
<figure><!-- first slide -->
<img src="img/slide-1.png">
<figcaption>This is slide one's description</figcaption>
</figure>
<figure>
<img src="img/slide-2.png">
<figcaption>This is slide two's description</figcaption>
</figure>
<figure>
<img src="img/slide-3.png">
<figcaption>This is slide three's description</figcaption>
</figure>
<figure>
<img src="img/slide-4.png">
<figcaption>This is slide four's description</figcaption>
</figure>
</div>
</div>


Правильный CSS код.

Код
.slider-viewport, .content-box, .slide { width: 600px; height: 400px }
.content-box { overflow: hidden } /* stop slides overflowing */


Подключение JQuery.

Подключите последнюю версию JQuery и сам плагин box-slider-all.jquery.min.js.

Код
<script src="js/jquery.min.js"></script>
   
<script src="js/box-slider-all.jquery.min.js"></script>


Затем добавьте на страницу следующий код:

Код
$('.content-box').boxSlider({
   
autoScroll: true
   
, timeout: 5000
   
, speed: 1200
   
, pauseOnHover: true
   
});

  • FalleN

  • 7603

  • 1

  • 279
Теги: jQuery, слайдер, 3D

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!