ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Слайдер с автоматической и ручной прокрутке

Слайдер с автоматической и ручной прокрутке

Слайдер с автоматической и ручной прокрутке
Вашему вниманию слайдер, который идет в горизонтальном виде, что больше подойдет для тематики кино онлайн или новостные блоги с выводом картинки. Также очень понятный функционал, где присутствую функция для легко и быстро вставлять ползунок, где по клику переходим на заданный материал. Его можно поставить на любую страницу, но больше всего можно видеть на главной странице, где работает как информер, перебирая материал.

Тем не менее это очень быстрая навигация, так как пользователи или гости изначально видят изображение, что можно с одного перехода попасть на основу материала. И не нужно забывать про дизайн, который безусловно украсит сайт и даст ему свою оригинальность.

Также его можно увидеть на светлом формате интернет сайта, и на темном, где нужно немного изменить палитру цвета, что основном редактируется, когда что-то новое ставится на портал.

Так он реально будет выглядеть, как только установите.

Красивые слайдеры и слайд-шоу

Переходим к установке:

Первое, что делаем, это нужно скачать архив и загрузите папку в файловый менеджер в папка 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>

Остается выставить номер созданного информер в первом коде, где станет отображаться слайд.
07 Января 2019 Загрузок: 19 Просмотров: 2151 Комментариев: (4)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 4
noavatar
DImas99 24 Февраля 2020 05:431
0
Не работает, вроде установил все верно
-SAM-
-SAM- 24 Февраля 2020 08:232
0

Ошибка в материале всё же есть была:
Код
<ul id="mycarousel" class="jcarousel-skin-tango">$MYINF_1$</li></ul>
</li> - лишний кусок, что шёл от последнего пункта списка (в шаблоне информера есть уже, что если потом так сделать, то будет два закрывающих в конце кода).
noavatar
DImas99 24 Февраля 2020 14:094
-1
Все залито правильно все пути я заменил, проверить можно. Так же убрал код проблема не решилась
Kosten
Kosten 24 Февраля 2020 13:533
0
Ошибку исправлена, но здесь нужно сказать, что с ошибкой выводился слайдер, хотя с другой стороны пользователю нужно проверить, установка не сложная. Где нужно создать информер по данным, которые прописаны с последующем его установки по месту и все!
avatar