Горизонтальный слайдер (карусель) для uCoz.

22563 просмотров Alan_Writer 15.10.2012

Скачать 📥

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

Слайдер выводит последние материалы из любого модуля - который вам там нужен, это вы сами конечно решите. Ну и понятно что сами новости в слайдере будут выводится при помощи информера, код этого информера нужно будет вставить в слайдер вместо надписи [ИНФОРМЕР]. Сам шаблон информера я тоже тут выложу.

1. Итак - перейдем к установке слайдера. Первым делом - скачайте архив с файлами, затем в корне Файлового Менджера создайте папку с названием slider и залейте в нее все файлы из архива. Давайте тогда сразу создадим информер который будет выводить последние материалы. Создайте информер того модуля из которого надо выводить материалы, главное там, в пункте кол-во колонок - указать число 1 (остальное сами настройте как надо), ну а в шаблон информера вставьте это (переменные $коды$ там возможно придется изменить, зависит от модуля):
Code
<li class="preview-tumb panel">
<a href="$ENTRY_URL$" >
<img alt="" style="border: 0 none; width: 150px; height: 110px;" src="$SCREEN_URL$"><br>$TITLE$</a>
</li>

2. Установите в необходимое вам место - сам слайдер, вот его шаблон (Не забудьте заменить надпись [ИНФОРМЕР] - на код того информера который вы только-что создали!):
Code
<link rel="stylesheet" type="text/css" href="/slider/slider.css" media="all">
<script type="text/javascript" src="/slider/slider.js"></script>
<script type="text/javascript" src="/slider/ui.js"></script>
<div id="preview-contanier">
<div class="arrow-left"></div>
<div id="preview" class="ie6">
<ul>  
[ИНФОРМЕР]
</ul>
</div>
<div class="arrow-right"></div>
</div>

3. И не забудьте так же в самом скрипте (slider.js) настроить основные параметры под себя. Для этого найдите там отрезок, в котором можно настроить кол-во отображаемых слайдов, число перелистываемых, и скорость. Вот эта часть скрипта, где производятся настройки:
Код
$("#preview").jc({
speed: 1000, // скорость анамации
easing: "easeOutBack",
scroll: 1, // кол-во пролистываемых слайдов
visible: 5, // кол-во отображаемых слайдов
horizontal: "true",
btnPrev: ".arrow-left",
btnNext: ".arrow-right"});

Настроить размеры слайдов, самого блока слайдера и их оформление можно в стилях CSS.

Все, слайдер установлен и должен работать - если вы все сделали правильно!

Оценивайте, оставляйте комментарии, рассказывайте о моем портале каждому встречному, а также ОБЯЗАТЕЛЬНО подписывайтесь на нас - везде где можно подписаться!

Теги: Горизонтальный, слайдер новостей, слайдер для юкоз, для uCoz, Карусель, Слайдер
17 Комментариев
avatar
16
Не могу понять, почему он сам не перелистывается??? Всё сделал как в описании.
avatar
13
Не между, а с левой стороны пустое место и так всегда когда переходишь на страницу со слайдером !
avatar
14
Пиши в ВК, не здесь же переписываться.
avatar
15
Куда в ВК ?
avatar
12
и еще, как убрать пустое место между фото, а то совсем не красиво смотрится ?
Вот на фото видно - http://pixs.ru/showimage/bde4ec1fb3_4322015_20402543.jpg cool
avatar
11
Сделал все работает ! Теперь мне нужно увеличить выделенную рамку.
То есть: та что синим цветом выделяется когда наводишь курсор, просто не полностью название видно. Помогите !!!!
avatar
9
Какие-то видит скрины, а какие то нет, не понятно почему !
avatar
10
Куда ставил покажи.
avatar
8
Как изменить ширину слайда, а то вылазит за рамки и фотки не отображаются !
Коде информера разный URL ставил, не помогает ! Помогите ! wink
avatar
3
Здравствуйте! Подскажите, где в файле slider изменить высоту превью изображений?
avatar
4
Адрес сайта напиши, куда ставил.
avatar
5
Я уже вот этот слайдер поставила fullweb.ucoz.ru/blog/2013-05-19-165
Но проблема осталась, не соображу, как изменить высоту zlt-rybka.ru
avatar
6
Так что ты хочешь конкретно изменить, высоту всего блока со слайдами или самих слайдов? Сами слайды там же все понятно, в стилях находишь класс .infiniteCarousel ul li a img и в его параметрах указаны размеры слайдов (width и height).
avatar
7
Спасибо, разобралась!
avatar
2
есть такая проблема, JS-файл немного ложит сайт прекращает в мобильной версии работать меню, а в обычной кнопка вход, как с этим бороться ???
avatar
1
можно сделать чтоб не 5 фотографий показывало, а 6-8 ?