INVERSER
INVERSER
Powerful web-based technologies
Powerful web-based technologies

Скрипт слайдшоу

Если тебе необходимо организовать на своем сайте слайдшоу, то удиви своих пользователей качественным и красивым слайдером, который в действительности является очень оригинальным и на первый взгляд кажется, что он работает за счет Action Script кода, однако, это не так.

AviaSlider – это красивый и функциональный слайдер картинок, способный добавить к твоему сайту удобную прокрутку изображений, сделать web-страницу более информативной и привлекательной.

Сегодня мир интернета расширяется с каждым днем, сайтов становится все больше, а верхние позиции в различных рейтингах занимают именно те, которые преуспели больше, нашли то, что необходимо пользователю и качественно это предоставили. Если твой сайт похож на тысячи других, то вряд ли он станет узнаваемым и популярным. Используй оригинальные компоненты, стилевые решения, технологии, для того, чтобы быть запоминающимся, ведь твой сайт – отображение части твоей души в web-пространстве.

Сегодня мы предлагаем тебе скачать бесплатно AviaSlider и покажем как задействовать его для своего сайта. Прежде всего выясни установлена ли у тебя на сайте библиотека jQuery. Сделать это очень просто. Зайди на свой сайт и нажми сочетание клавиш на клавиатуре CTRL и U. Ты увидишь исходный код сайта, затем поищи в нем при помощи CRTL и F слово jquery. Если оно есть, то первый пункт можешь пропустить. Если ты не знаешь, как добавить и куда этот код, то стоит поучить html :) Скачай через ftp индексную страницу своего сайта (index.php, index.html) и открой через блокнот или NotePad++.

Затем тебе необходимо провести некоторые действия. Следующий код в зависимости от того есть ли у тебя jquery на сайте или нет, следует размещать в любом месте исходного кода html страницы. Т.е. открой файл (например, index.html) и в него копируй следующие строки. Все эти строки отвечают за вывод конкретных файлов. Конечно же, эти файлы должны быть на твоем хостинге или сервере, скачай слайдер и закинь все файлы в нужные директории, поменяй пути к ним. Посмотри как добавлен слайдер в исходном коде примера из архива (скачай ниже). Т.е. все пути - это пути к файлам. Проверяй их доступность. Еще раз: ты можешь посмотреть исходный код примера (ниже VIEW DEMO), нажав клавиши Crtl+U и увидишь все эти же строки. Если есть вопросы - пиши в комментарии.

1. Подключение jQuery

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

2. Добавление JS библиотек:

<script type="text/javascript" src="/jquery01.js"></script>
<script type="text/javascript" src="/jquery02.js"></script>
<script type="text/javascript" src="/custom00.js"></script>

3. Добавление стилей:

<link rel="stylesheet" href="/style000.css" type="text/css" media="screen">
<link rel="stylesheet" href="/prettyPh.css" type="text/css" media="screen">

4. Контейнер со слайдером:

<ul class="aviaslider" id="frontpage-slider">
<li><a href="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds2.jpg" title=""><img src="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds2.jpg" alt="Любой текст :: Который ты только захочешь разместить"></a></li>
<li><a href="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds.jpg" title=""><img src="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds.jpg" alt=""></a></li>
<li><a href="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds3.jpg" title=""><img src="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds3.jpg" alt="Двухэтажный пентхаус с винтовой горкой в Нью-Йорке :: Отличный дизайн квартиры, которая расположена в Нью-Йорке, США, является просто кладезем ценных идей"></a></li>
<li><a href="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds4.jpg" title=""><img src="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds4.jpg" alt=""></a></li>
<li><a href="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds5.jpg" title=""><img src="https://f.usemind.org/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds5.jpg" alt=""></a></li>
</ul>

<ul class="aviaslider" id="frontpage-slider"> - здесь прописан ID и CLASS, это не стоит изменять. Далее идут обычные ссылки на обычные изображения. Ты можешь указать ALT текст для изображений и тем самым получишь красивый его вывод над изображением.

5. Все, после этих манипуляций все должно работать.

Ты можешь настроить слайдер как угодно. Используй код для того, чтобы указать какой CLASS используется у тебя на сайте:

$('#slider1').aviaSlider();

Также можно передать функции слайдеру:

$('#slider1').aviaSlider({option1:"optionValue", option2:"optionValue", option3:"optionValue"});
blockSize: {height: 'full', width:'full'} // значение по умолчанию
blockSize: {height: 80, width:80}
blockSize: {height: 'full', width:20}

Если ты не хочешь использовать список (ul>li), то укажи это в настройках:

slides:"li"//значение по умолчанию
slides:".featured"
slides:"div"

Повторить показ слайдов:

autorotation: true //значение по умолчанию
autorotation: false

Скорость автопрокрутки:

autorotationSpeed:3 //значение по умолчанию
autorotationSpeed:8
autorotationSpeed:20

Управление показом слайдом (внизу кружочки)

slideControlls: 'items' //значение по умолчанию
slideControlls: 'none'

Добавить кнопки управления к html:

appendControlls:"" //значение по умолчанию (если значение отсутствует, то кнопки добавляются после слайдера)
appendControlls:"body"
appendControlls:"#id-of-choice"

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

betweenBlockDelay:60		//значение по умолчанию
betweenBlockDelay:30
betweenBlockDelay:200

Тип анимации для изображений:

transition: 'fade'			//значение по умолчанию
transition: 'slide'
transition: 'drop'

Тип анимации смены изображений:

display: 'diagonaltop'
display: 'diagonalbottom'
display: 'topleft'//значение по умолчанию
display: 'bottomright'
display: 'random'
display: 'all'

Можно также при выборе значения ALL (т.е. использовать все виды), задействовать удобные для тебя виды смены изображений с указанными параметрами:

transitionOrder: ['diagonaltop', 'diagonalbottom','topleft', 'bottomright', 'random'] //значение по умолчанию
transitionOrder: ['random', 'random','topleft']
transitionOrder: ['diagonaltop', 'diagonalbottom','diagonaltop' 'random']

В какую сторону будут меняться изображения:

switchMovement: false		//значение по умолчанию
switchMovement: true

Показывать ALT описания изображений или нет:

showText: true			//значение по умолчанию
showText: false

Прозрачность фона ALT описаний:

backgroundOpacity:0.8	//значение по умолчанию
backgroundOpacity:1
backgroundOpacity:0.2

Пример использования настроек:

$('#droping-curtain').aviaSlider({
blockSize: {height: 'full', width:40},
display: 'topleft',
transition: 'drop',
betweenBlockDelay:80,
animationSpeed: 800,
switchMovement: true,
slideControlls: 'items',
appendControlls: '.aviaslider'
});

Ты можешь посмотреть DEMO, а также посмотреть исходный код и понять как это все работает, если наше описание не подходит. Обрати внимание на то, что lightbox может НЕ работать в зависимости от определенных версий jQuery, которые используешь ты.

AviaSlider

Файлы AviaSlider:

Скачать файл 1
DEMO

Добавить отзыв

INVERSER 2017-04-11 10:33:55
Да.
Андрей 2017-04-11 10:30:03
Ставлю сюда http://www.new-era.me/proizvodstvo1. -ФИЛЬТР-
Я так понял, что библиотека PrettyPhoto является неотделимой частью сладера?
INVERSER 2017-04-10 12:26:34
Андрей, покажите сайт и/или посмотрите консоль CTRL+Shift+C
Андрей 2017-04-10 11:26:45
Меняю все сразу на свои
INVERSER 2017-04-09 16:41:46
Андрей, Вы меняете одно изображение сразу в двух местах?
Андрей 2017-04-08 09:58:59
Добрый день. Не работает слайдер. Если меняю в вашем коде картинки на свои, перестаёт работать. Как исправить можно?
inverser 2015-11-19 09:49:42
Денис, обращайтесь, всегда рад помочь.
Денис 2015-11-19 06:40:18
Спасибо Вам большое!!! Замечательная статья!!! Все прекрасно работает)))
inverser 2015-11-19 01:15:28
Денис, в файле jquery02.js ищите текст:
|parseInt|1000|url|
1000 – это и есть задержка между слайдами.
Денис 2015-11-18 23:08:53
уффф...что-то все равно ничего не выходит...А Вы не могли бы глянуть, как нужно прописать в отдельном файле...я там щас все удалил (settings.js), я хотел сделать, чтобы слайдер быстрее прокручивался, http://vannochka.by/1. -ФИЛЬТР-
inverser 2015-11-18 22:50:02
Если Вы подключили в отдельный файл, то необходимо было сделать так:
(function($)
{
$(document).ready(function()
{//тут код
})
})(jQuery);
inverser 2015-11-18 22:48:25
Денис, а Вы к какому контейнеру применяете настройки?
Денис 2015-11-18 22:45:47
Что-то не срабатывает, вставил для примера ваши настройки в отдельный файл и подключил...ничего не изменилось(((
inverser 2015-11-18 22:39:47
Денис, Вы можете создать отдельный файл JS и добавить в него необходимые настройки, кроме того, можно в существующем файле JS, который прикреплен к странице сделать это. А также разместить код прямо на html странице (в исходном коде).
Денис 2015-11-18 21:53:55
А где же эти настройки прописывать (скорость прокрутки изображений)?
Хостинг SSD, VPS, сервера
от 7.34$/365 дней
подробнее