Помоигте установить этот слайдер

автор Reos Декабрь 16th 2012, 15:46

Помогите установить этот слайдер http://ruseller.com/adds/adds2251/example/
Напишите что,куда вставлять,пожалуйста=)

В ПА > Оформление > Общая информация > Приветствие на главной странице добавляете скрипт + код слайдера

Код:: <script src="http://yourjavascript.com/222013220212/jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> jQuery(window).load(function() { jQuery('.flexslider').flexslider(); }); </script> <div class="flexslider"> <ul class="slides"> <li> <img src="http://i15.servimg.com/u/f15/17/37/83/89/3d0huh10.jpg" /> </li> <li> <img src="http://i15.servimg.com/u/f15/17/37/83/89/8ai0r110.jpg" /> </li> <li> <img src="http://i15.servimg.com/u/f15/17/37/83/89/qo3vgf10.jpg" /> </li> </ul> </div>

Сохраняете.
Изображения
https://i.servimg.com/u/f15/17/37/83/89/3d0huh10.jpg
https://i.servimg.com/u/f15/17/37/83/89/8ai0r110.jpg
https://i.servimg.com/u/f15/17/37/83/89/qo3vgf10.jpg
заменяете на свои.

Если нужны подписи к изображениям — смотрите туториал http://ruseller.com/adds/adds2251/example/ — в разделе "Дополнительные опции". Там все подробно разъясняется.

2. В CSS ставите настройки:

Код:: /* Необходимые стили для FlexSlider *********************************/ .flexslider {width: 500px; margin: 10px auto; padding: 0;} .flexslider .slides li {display: none;} /* Скрываем слайды доя загрузки JS. Избегаем дергания изображений */ .flexslider .slides img {max-width: 100%; display: block;} .flexslider ul, .flexslider ol {list-style-type: none !important; padding-left: 0px !important;} /* Тема по умолчанию для FlexSlider *********************************/ .flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;} .flexslider .slides li {position: relative;} /* Предполагаемый контейнер для устнановок анимации "slides".*/ .flexslider-container {position: relative;} /* Стиль заголовков */ .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px;} /* Навигация */ .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(http://i15.servimg.com/u/f15/17/37/83/89/bg_dir10.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;} .flex-direction-nav li a.next {background-position: -52px 0; right: -21px;} .flex-direction-nav li a.prev {background-position: 0 0; left: -21px;} /* Управление */ .flex-control-nav {margin-left: -31px; position: absolute; bottom: -30px; left: 50%;} /* set negative margin-left equal to half the width on the control-nav for perfect centering */ .flex-control-nav li {margin: 0 0 0 5px; float: left;} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(http://i15.servimg.com/u/f15/17/37/83/89/bg_con10.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}