Слайдер с автоматической и ручной прокрутке
 | |
| Вашему вниманию слайдер, который идет в горизонтальном виде, что больше подойдет для тематики кино онлайн или новостные блоги с выводом картинки. Также очень понятный функционал, где присутствую функция для легко и быстро вставлять ползунок, где по клику переходим на заданный материал. Его можно поставить на любую страницу, но больше всего можно видеть на главной странице, где работает как информер, перебирая материал. Тем не менее это очень быстрая навигация, так как пользователи или гости изначально видят изображение, что можно с одного перехода попасть на основу материала. И не нужно забывать про дизайн, который безусловно украсит сайт и даст ему свою оригинальность. Также его можно увидеть на светлом формате интернет сайта, и на темном, где нужно немного изменить палитру цвета, что основном редактируется, когда что-то новое ставится на портал. Так он реально будет выглядеть, как только установите.  Переходим к установке: Первое, что делаем, это нужно скачать архив и загрузите папку в файловый менеджер в папка includes, которую вероятно нужно создать, где в нужное место ставим слайдер. HTML Код <script type="text/javascript" src="/includes/jcarousel/jquery.jcarousel.min.js"></script><link rel="stylesheet" type="text/css" href="/includes/jcarousel/skins/skin.css" /><script type="text/javascript">function mycarousel_initCallback(carousel){// Disable autoscrolling if the user clicks the prev or next button.carousel.buttonNext.bind('click', function() {carousel.startAuto(0);});carousel.buttonPrev.bind('click', function() {carousel.startAuto(0);});// Pause autoscrolling if the user moves with the cursor over the clip.carousel.clip.hover(function() {carousel.stopAuto();}, function() {carousel.startAuto();});};jQuery(document).ready(function() {jQuery('#mycarousel').jcarousel({auto: 1,animation: 8000,wrap: 'last',initCallback: mycarousel_initCallback});});</script><ul id="mycarousel" class="jcarousel-skin-tango">$MYINF_1$</ul> Потом создаем информер с такими параметрами: Информер [ Каталог файлов · Материалы · Дата добавления материала D · Материалы: 20 · Колонки: 1 ] Код <li id="panel_$ID$"> <a title="$TITLE$ | Комментариев: $COMMENTS_NUM$ | Смотрели: $READS$" href="$ENTRY_URL$"> <img src="$IMG_URL1$" alt="" border="0" class="slideitem" width="110"/></a></li> Остается выставить номер созданного информер в первом коде, где станет отображаться слайд. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
