Резиновый слайдер FlexSlider - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Слайдер для сайта uCoz » Резиновый слайдер FlexSlider

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Резиновый слайдер FlexSlider

Адаптивный слайдер FlexSlider с резиновыми свойствами


Логотип FlexSlider



Слайдер с адаптивными свойствами будет изменять свои размеры относительно свободного пространства окна. Изначальные размеры изображений не имеют значения и будут масштабироваться согласно устанавливаемым размерам по месту. FlexSlider может использоваться как слайдер для видео, применяя в качестве слайдов видео проигрыватели. Резиновый слайдер имеет большое количество настроек, при помощи которых Вы сможете настроить воспроизведение на своё усмотрение. По умолчанию, готовый код для установки полностью настроен, Вам останется поместить его в требуемое место, изменить путь к используемым слайдам и радовать посетителей своими творениями. Форма комментариев ВКонтакте предназначена для краткого диалога о материале, для получения дополнительной информации технического характера нужно использовать стандартную форму комментариев.





Функциональные настройки FlexSlider

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


Функция Описание функции
animation: "slide",

Применяемый тип анимации для смены слайдов, можно применить значение fade.

slideshow: true,

Автовоспроизведение слайдов, по умолчанию включено, можно отключить значением false.

easing: "linear",

Функция изменения поведения анимации, подробнее о возможностях и применяемых значениях Вы можете узнать из статьи:

  • jQuery UI Easing
  • .

    direction: "horizontal",

    Вы можете установить направление движения изображений горизонтально или вертикально используя значение vertical.

    reverse: false,

    Реверсивное движение изображений, по умолчанию отключено, чтобы включить измените на true.

    startAt: 0,

    Слайдер может начинать показ изображений с любого указанного в числе, по умолчанию ноль, значит с первого в коде.

    slideshowSpeed: 3000,

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

    animationSpeed: 600,

    Скорость интенсивности анимации указанное в миллисекундах.

    randomize: false,

    Если Вы хотите чтобы изображения менялись в случайном порядке, установите значение true.

    pauseOnAction: true,

    Пауза в смене изображений при использовании элеменов управления слайдером, для отключения используйте false.

    pauseOnHover: false,

    Пауза в смене при наведении на изображение, по умолчанию отключено, чтобы включить измените на true.

    useCSS: true,

    Разрешить использование свойств CSS3 для добавления индивидуальных особенностей, не рекомендуется изменять, но если есть желание, тогда меняем на false.

    touch: true,

    Разрешить сенсорную навигацию на поддерживаемых устройствах, не стоит менять, но раз надо, меняем на false.

    video: false,

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

    controlNav: true,

    Использование элементов управления для смены индивидуального слайда, для отключения используйте false

    directionNav: true,

    Элементы управления сменой слайдов вперёд\назад, по умолчанию включены, для отключения используйте false.

    prevText: "<",

    Использование текста в элементе управления кнопки назад\предыдущий, по умолчанию используется стралочка но можно изменить по своему усмотрению.

    nextText: ">",

    Использование текста в элементе управления кнопки вперёд\следующий, по умолчанию используется стралочка но можно изменить по своему усмотрению.

    keyboard: true,

    По умолчанию разрешено использовать клавиатуру для смены изображений, если хотите запретить используйте false.

    itemWidth: 600,

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

    itemMargin: 5,

    Внешний отступ между слайдами, при отсутствии промежутков установить значение ноль, выше в стилях так же установить значение 0 (ноль).



    Код слайдера для установки и проверки

    Будьте внимательны!!! В примере вписана библиотека jQuery выделенная красным цветом. Она нужна только для проверки работоспособности кода для установки и испытания его ссо своими настройками. При установке на свой сайт, если он на uCoz скрипт нужно удалить из кода.



    <script type="text/javascript" src="//s36.ucoz.net/src/jquery-1.7.2.js"></script>
    <link rel='stylesheet' href='//delaisait.ucoz.ru/script/sluder/2014/flexslider/flexslider.css' type='text/css' media='all' />
    <link rel='stylesheet' href='//delaisait.ucoz.ru/script/sluder/2014/flexslider/public.css' type='text/css' media='all' />
    <script type='text/javascript' src='//delaisait.ucoz.ru/script/sluder/2014/flexslider/jquery.flexslider-min.js'></script>
    <style>
    #metaslider.flexslider li {
    margin-right: 5px !important;
    }
    #ds-flexslider {
    max-width:600px;
    margin:0 auto;
    }
    </style>
    <div id="ds-flexslider" class="metaslider metaslider-flex">
    <div id="metaslider_container">
    <div id="metaslider" class="flexslider">
    <ul class="slides">
    <li style="display: none;">
    <a href="#" target="_blank">
    <img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/947677767.jpg" alt="Девушка Эльф" />
    </a>
    <div class="caption-wrap">
    <div class="caption">Девушка Эльф</div></div>
    </li>
    <li style="display: none;">
    <a href="#" target="_blank">
    <img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/769128589.jpg" alt="Девушка в чёрном" />
    </a>
    <div class="caption-wrap">
    <div class="caption">Девушка в чёрном</div></div>
    </li>
    <li style="display: none;">
    <a href="#" target="_blank">
    <img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/378189360.jpg" alt="Девушка в красном" />
    </a>
    <div class="caption-wrap">
    <div class="caption">Девушка в красном</div></div>
    </li>
    <li style="display: none;">
    <a href="#" target="_blank">
    <img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/84040181.jpg" alt="Девушка в свадебном платье" />
    </a>
    <div class="caption-wrap">
    <div class="caption">Девушка в свадебном платье</div></div>
    </li>
    <li style="display: none;">
    <a href="#" target="_blank">
    <img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/572570776.jpg" alt="Девушка с бабочкой" />
    </a>
    <div class="caption-wrap">
    <div class="caption">Девушка с бабочкой</div></div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <script>
    $(document).ready(function () {
    $('#metaslider').flexslider({
    slideshowSpeed:3000,
    animation:'slide',
    controlNav:true,
    directionNav:true,
    pauseOnHover:true,
    direction:'horizontal',
    reverse:false,
    animationSpeed:600,
    prevText:"<",
    nextText:">",
    easing:"linear",
    slideshow:true,
    itemWidth:600,
    itemMargin:5,
    useCSS:true
    });
    });
    </script>



    Возможные изменения в слайдере

    Не исключено что эта информация может пригодится:
    1.Вопрос: Как сделать слайдер не фиксированным по ширине, а на всю свободную ширину?
    1.Ответ: Заменить в стилях (max-width:600px;) на (max-width:100%;) и убрать функцию в скрипте (itemWidth:600,). Имейте в виду что элементы слайдов должны иметь одинаковый размер, иначе будет корявово.
    2.Вопрос: Как убрать расположение слайдера по центру?.
    2.Ответ: По умолчанию слайдер будет центрироваться, чтобы сделать расположение свободным уберите в стилях строку (margin:0 auto;).
    3.Вопрос: Как убрать пустой промежуток между слайдами?
    3.Ответ: Измените в стилях строку (margin-right: 5px !important;) на (margin-right: 0 !important;) и удалите функцию в скрипте (itemMargin:5,).


    FlexSlider в подключенном состоянии

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




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

    Скопируйте код из примера для установки в редактор, проверьте работоспособность и попробуйте внести свои изменения в настройки. Попробуйте изменить размент окна с работающим слайдером чтобы убедиться в его резиновых способностях.










    Русские шрифты



    Ссылка:
    BB code:




  • ©
  • | Просмотров: 7439 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: elastic, в блог, Для сайта, резиновый, Slider, на сайт, слайдер

    Всего комментариев: 26
    0   Спам
    25 defaultNick3515   (19.06.2015 11:48)
    Аватар defaultNick3515 Здравствуйте, подскажите где сменить color: прозрачной черной полосы в низу слайдера...

    0  
    26 aTmpl   (19.06.2015 20:17)
    Аватар aTmpl Привет!
    Нужно изменить вот эти стили:

    Код

    <style>
    #metaslider.flexslider li {
    margin-right: 5px !important;
    }
    #ds-flexslider {
    max-width:600px;
    margin:0 auto;
    }
    </style>


    на вот эти:

    Код

    <style>
    #metaslider.flexslider li {
    margin-right: 5px !important;
    }
    #ds-flexslider {
    max-width:600px;
    margin:0 auto;
    }
    .metaslider .caption-wrap {
    background: green; /* Цвет фона полосы */
    color: blue; /* Цвет текста полосы */
    }
    </style>


    то есть в стили нужно добавить:

    Код

    .metaslider .caption-wrap {
    background: green; /* Цвет фона полосы */
    color: blue; /* Цвет текста полосы */
    }


    Цвет можно подобрать здесь:

    http://delaisait.ucoz.ru/publ....1-0-148

    0   Спам
    22 licey   (27.11.2014 16:09)
    Аватар licey Добрый день! У меня вопрос по Вашему ответу:
    "Если Вы устанавливаете 2 слайдера, нужно в одном из них изменить имена селекторов.
    Изменение имён должно касаться всех элементов, иначе никак... "
    Я в этом деле совсем новичок)) Подскажите, где именно нужно изменять имена селекторов для использования второго слайдера на странице. Спасибо

    +1  
    23 IZOTOP   (01.12.2014 15:59)
    Аватар IZOTOP Привет!
    Здесь описано как можно подключить два слайдера на одной странице:

    http://atmpl.ru/comments/2014/two-sliders-on-one-page.html

    0   Спам
    24 licey   (19.01.2015 14:03)
    Аватар licey Спасибо огромное!!!

    0   Спам
    16 Admin4159   (08.10.2014 13:16)
    Аватар Admin4159 Добрый день. Подскажите как зациклить слайды, а то дойдя до конца они перекидываются на первый. А хотелось бы что бы после последнего плавно начинался первый.

    0   Спам
    15 lora4378   (17.09.2014 21:15)
    Аватар lora4378 Доброго времени суток. Все так, 8 и 9 строку я нашла и могу изменить,а вот с 36 проблема. Она почем уто пустая, там ничего не написано!
    Вот скопировала часть кода:

    26. hr {color:#D6E37D;height:1px;border:0;background-color:#D6E37D;}
    27. label {cursor:pointer;cursor:hand}
    28.
    29. .blocktitle {font-family:'Times New Roman';color:#787878;font-size:12pt;}
    30.
    31. a.menu1:link {text-decoration:underline; color:#FFFEE0}
    32. a.menu1:active {text-decoration:underline; color:#FFFEE0}
    33. a.menu1:visited {text-decoration:underline; color:#FFFEE0}
    34. a.menu1:hover {text-decoration:underline; color:#DBDCBE}
    35. .menuTd {padding-left:12px;padding-right:10px; background: url('/.s/t/886/9.gif') no-repeat 0px 3px;}
    36.
    37. .mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}
    38. .colgray {border-right:1px solid #E5E7EA;}
    39. .colwhite {border-right:1px solid #FFFEE0;}
    40. .msep {border-top:1px solid #FFFEE0;}
    41. /* ------------- */
    42.
    43. /* Menus */

    0   Спам
    12 lora4378   (25.08.2014 16:01)
    Аватар lora4378 Доброго времени суток. Вы не могли подсказать как поменять шапку в шаблоне №886 на uCoz. Я разобрала рисунок он состоит из трех частей.вот две верхние я могу изменить, а где низ(там край лилии) я не могу его не изменить не удалить. Помогите пожалуйста. Спасибо огромное.

    0  
    13 IZOTOP   (09.09.2014 00:19)
    Аватар IZOTOP Привет!
    Укажите адрес Вашего сайта, надеюсь можно будет изменить "шапку", скоро зима..
    (это не пафос - если что..)

    0   Спам
    14 lora4378   (10.09.2014 07:16)
    Аватар lora4378 Добрый деть.Вот адрес сайта: http://urengoy-skazka.ucoz.ru/. Еще сегодня пришло сообщение,что на сайте есть код который может нанести вред компьютеру.Как это исправить? Спасибо большое.

    0   Спам
    17 lora4378   (22.11.2014 09:40)
    Аватар lora4378 http://urengoy-skazka.ucoz.ru/ вот адрес сайта.

    0  
    18 IZOTOP   (23.11.2014 00:57)
    Аватар IZOTOP Привет!
    На главной странице нет таких кодов.
    Сообщение откуда пришло?

    0   Спам
    19 lora4378   (23.11.2014 01:42)
    Аватар lora4378 Доброго времени суток.Я все про этот цветок.Вы написали про 36 строчку, которая отвечает за низ рисунка, но там пусто! Ничего не написано...Вот:

    35. .menuTd {padding-left:12px;padding-right:10px; background: url('/.s/t/886/9.gif') no-repeat 0px 3px;}
    36.
    37. .mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}
    38. .colgray {border-right:1px solid #E5E7EA;}
    39. .colwhite {border-right:1px solid #FFFEE0;}

    0  
    20 IZOTOP   (23.11.2014 02:59)
    Аватар IZOTOP Вы меня не правильно поняли, эта строка ( раньше она была 36 ), теперь 38, наверное что то изменялось.
    Найти её нужно так:
    1.Выйти с сайта как администратор
    2.Открыть браузер Мозила
    3.На главной странице сайта нажать правой кнопкой мышки
    4.Выбрать "Исходный код"
    5.На 38 строке есть вот такой код:

    Код

    <table cellpadding="10" cellspacing="0" border="0" width="100%" style="background:url('/.s/t/886/1.jpg') center top no-repeat;">


    Этот код находится в модуле "Страницы сайта":



    Вот ссылка на эту картинку:

    Код

    http://urengoy-skazka.ucoz.ru/.s/t/886/1.jpg


    smile

    0   Спам
    21 lora4378   (23.11.2014 03:13)
    Аватар lora4378 Все,разобралась.Спасибо большое.Да она сместилась,я фон поставила на страницу.Еще раз благодарю за помощь. smile

    0   Спам
    9 lord5112   (27.04.2014 19:57)
    Аватар lord5112 А как можно убрать цифры в кнопках переключения. Вот мне надо по правой стороне выровнять кнопки, но появляются цифры.

    http://cs618229.vk.me/v618229094/40f2/CkMP9sH6wwY.jpg


    Выраниваю тут.

    .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: right;}

    0   Спам
    10 IZOTOP   (01.05.2014 00:03)
    Аватар IZOTOP Начали правильно:

    Код

    .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: right;}


    Теперь убираем цифры:

    Код

    .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; color:transparent;-webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}


    Тоесть добавляем свойство:

    color:transparent;

    Делаем цифры невидимыми, это самый простой способ выхода из соотношения:

    text-indent: -9999px;

    к 100% ширине.

    0   Спам
    11 lord5112   (01.05.2014 09:01)
    Аватар lord5112 спасибо попробую

    0   Спам
    8 Elena8295   (15.04.2014 21:43)
    Аватар Elena8295 Огромнейшее спасибо, Вы очень помогли. hands И к стати Вы единственный кто ответил, на какие сайты не писала ответа не было.

    -1   Спам
    5 Elena8295   (12.04.2014 21:15)
    Аватар Elena8295 Так как я новичок в этом деле, еще вопрос. Можно ли убрать внизу кружочки показывающие количество фотографий? Самой не получается. Благодарна за помощь.

    +1   Спам
    6 IZOTOP   (13.04.2014 07:25)
    Аватар IZOTOP Елена, в нижней части кода есть строка:

    Код

    controlNav:true,


    Вам нужно заменить её на:

    Код

    controlNav:false,

    0   Спам
    4 Elena8295   (12.04.2014 20:43)
    Аватар Elena8295 Добрый вечер, подскажите пожалуйста, я пытаюсь поставить второй такой же слайдер на эту же страничку, но он не показывается(не работает). Что мне делать? Спасибо.

    +1   Спам
    7 IZOTOP   (13.04.2014 07:30)
    Аватар IZOTOP Если Вы устанавливаете 2 слайдера, нужно в одном из них изменить имена селекторов.
    Изменение имён должно касаться всех элементов, иначе никак...

    0   Спам
    1 Elena8295   (02.04.2014 10:20)
    Аватар Elena8295 Здравствуйте,подскажите а как изменить цвет стрелок для перелистывания фотографий? Спасибо.

    +1   Спам
    2 IZOTOP   (02.04.2014 14:53)
    Аватар IZOTOP Здравствуйте Елена!
    Стрелками перелистывания является картинка:



    Картинка находится в файле:

    http://delaisait.ucoz.ru/script/sluder/2014/flexslider/flexslider.css

    Вот здесь:

    Код

    .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}


    Цвет стрелок можно изменить в фотошопе путём заливки, вот здесь фотошоп:

    http://delaisait.ucoz.ru/news....-22-131

    Вот для примера я сделал картинку со стрелками красного цвета:



    Вот ссылка на готовый файл стилей с красными стрелками:

    http://delaisait.ucoz.ru/script....red.css

    0   Спам
    3 Elena8295   (12.04.2014 03:00)
    Аватар Elena8295 Здравствуйте,Спасибо за ответ. Так как я новичок в этом деле, еще вопрос. Можно ли убрать внизу кружочки показывающие количество фотографий? Самой не получается. Благодарна за помощь.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]