MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
romaamor

MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 24 фев 2014, 14:32 Сообщение

MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

Изображение
Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.
Разметка HTML

Рассмотрим сразу все три примера из Демо. Как видите все они отличаются лишь дополнительными классами slider1, slider2, slider3.
В то место где вы хотите поставить слайдер берем один из трех кодов.
Пример 1

Код: Выделить всё

<div class="slider slider1"> <div class="sliderContent"> <div class="item"> <img src="адрес вашей картинки" alt="" /> </div> <div class="item"> <img src="адрес вашей картинки" alt="" /> </div> </div> </div>

Пример 2

Код: Выделить всё

<div class="slider slider2"> <div class="sliderContent"> <div class="item"> <img src="адрес вашей картинки" alt="" /> </div> <div class="item"> <img src="адрес вашей картинки" alt="" /> </div> </div> </div>

Пример 3

Код: Выделить всё

 <div class="slider slider3"> <div class="sliderContent"> <div class="item"> <img src="адрес вашей картинки" alt="" /> </div> <div class="item"> <img src="адрес вашей картинки" alt="" /> </div> </div> </div>

CSS

Все три примера слайдеров из http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/mobilyslider/index.html#.Uwsp5uN_sjQ имеют одинаковый вид, поэтому и стили они имеют одни и те же:

Код: Выделить всё

.slider { float:left; width:800px; height:350px; position:relative; padding-bottom:26px; background:url(ваш адрес/bottom_shadow.png) no-repeat bottom center; } .sliderContent { float:left; width:800px; height:350px; clear:both; position:relative; overflow:hidden; } .sliderArrows a { display:block; text-indent:-9999px; outline:none; z-index:50; background-image:url(ваш адрес/prev_next.png); width:42px; height:42px; position:absolute; top:50%; margin-top:-34px; } .prev { background-position:0 0; left:15px; } .prev:hover { background-position:0 -44px; } .next { right:15px; background-position:-44px 0; } .next:hover { background-position:-44px -44px; } .sliderContent .item { position:absolute; width:800px; height:350px; background:#fff; } .sliderBullets { position:absolute; bottom:0; left:50%; z-index:50; margin-left:-45px; } .sliderBullets a { display:block; float:left; text-indent:-9999px; outline:none; margin-left:5px; width:10px; height:11px; background:url(ваш адрес/bullets.png) no-repeat; } .sliderBullets .active { background-position:0 -11px; } .sliderContent a { outline:none; }


javascript

Три варианта инициализации данного плагина. В первом примере вызов с дефолтными значениями. В двух остальных с опциями.
Пример 1

Код: Выделить всё

$('.slider1').mobilyslider();

Пример 2

Код: Выделить всё

$('.slider2').mobilyslider({ transition: 'vertical', animationSpeed: 500, autoplay: true, autoplaySpeed: 3000, pauseOnHover: true, bullets: false });

Пример 3

Код: Выделить всё

$('.slider3').mobilyslider({ transition: 'fade', animationSpeed: 800, bullets: true, arrowsHide: false });


Опции
Вот все доступные опции слайдера:

Код: Выделить всё

$('.slider').mobilyslider({ content: '.sliderContent', // селектор для слайдера children: 'div', // селектор для дочерних элементов transition: 'horizontal', // переходы: horizontal, vertical, fade animationSpeed: 300, // скорость перехода в миллисекундах autoplay: false, autoplaySpeed: 3000, // время между переходами (миллисекунды) pauseOnHover: false, // останавливать навигацию при наведении на слайдер: false, true bullets: true, // генерировать навигацию (true/false, class: sliderBullets) arrows: true, // генерировать стрелки вперед и назад (true/false, class: sliderArrows) arrowsHide: true, // показывать стрелки только при наведении prev: 'prev', // название класса для кнопки назад next: 'next', // название класса для кнопки вперед animationStart: function(){}, // вызывать функцию при старте перехода animationComplete: function(){} // вызывать функцию когда переход завершен });



Скачиваем архив ниже. Загружаем скрипты, картинки через менеджер картинок в админке. Все ссылки меняем на ваши.
Подключаем скрипт.
Открываем шаблон

Код: Выделить всё

overall_header.html

Перед закрывающим тегом ставим -

Код: Выделить всё

<script type="text/javascript" src="адрес вашего сайта/init.js"></script> <script type="text/javascript" src="адрес вашего сайта/mobilyslider.js"></script>

mobilyslider.7z
Скачать архив.
(444.94 КБ) 273 скачивания

ДЕМО
http://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/mobilyslider/index.html#.UwstiuN_sjQ
Последний раз редактировалось romaamor 25 фев 2014, 01:48, всего редактировалось 1 раз.

Аватара пользователя
romaamor

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 24 фев 2014, 14:45 Сообщение

CabinetAdmin, в связи с этим слайдером возник вопрос. Как сделать что бы на картинке сверху налаживался текст ? У меня к примеру сейчас такой код -

Код: Выделить всё

<div class="slider slider2"> <div class="sliderContent"> <div class="item"> <a href="http://satray.ru/viewtopic.php?f=172&t=2192" target="_blank"><img src="http://satray.ru/skrinpapka/2014-02-24_13h41_16.png" border="0"/></a> </div> <div class="item"> <a href="http://satray.ru/viewtopic.php?f=172&t=2185" target="_blank"><img src="http://satray.ru/skrinpapka/2014-02-24_12h45_15.png" border="0"/></a> </div> </div> </div>

Что надо добавить что бы текст был ?

Аватара пользователя
CabinetAdmin

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

CabinetAdmin 24 фев 2014, 15:05 Сообщение

Так например:

Код: Выделить всё

  <div class="item"> <span>Любой текст</span> <a href="http://satray.ru/viewtopic.php?f=172&t=2192" target="_blank"><img src="http://satray.ru/skrinpapka/2014-02-24_13h41_16.png" border="0"/></a> </div>

добавить к стилям:

Код: Выделить всё

.sliderContent .item span {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
}
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 26 фев 2014, 16:53 Сообщение

Об на. Что фон сменился и шрмфт ?.......CSS лупит ?

Аватара пользователя
CabinetAdmin

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

CabinetAdmin 26 фев 2014, 17:20 Сообщение

Не понял? Шрифты так:

Код: Выделить всё

font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif;
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 27 фев 2014, 09:40 Сообщение

CabinetAdmin » Вчера, 18:20 писал(а):Не понял? Шрифты так:

Шрифт сменился. Фон пропал.
вот мой CSS. Вижу что код мешает, дублируется.

Код: Выделить всё

/* ------ general -----------------------------------------------*/ body { font-family:Arial, Helvetica, sans-serif; background:#f1f1f1; } /* ------ mobilyslider -----------------------------------------------*/ #content { width:225px; margin:20px auto 20px; } .slider { float:left; width:225px; height:400px; position:relative; padding-bottom:26px; background:url(http://satray.ru/bottom_shadow.png) no-repeat bottom center; } .sliderContent { float:left; width:225px; height:400px; clear:both; position:relative; overflow:hidden; } .sliderArrows a { display:block; text-indent:-9999px; outline:none; z-index:50; background-image:url(http://satray.ru/prev_next.png); width:42px; height:42px; position:absolute; top:50%; margin-top:-34px; } .prev { background-position:0 0; left:15px; } .prev:hover { background-position:0 -44px; } .next { right:15px; background-position:-44px 0; } .next:hover { background-position:-44px -44px; } .sliderContent .item { position:absolute; width:800px; height:400px; background:#fff; } .sliderBullets { position:absolute; bottom:0; left:50%; z-index:50; margin-left:-45px; } .sliderBullets a { display:block; float:left; text-indent:-9999px; outline:none; margin-left:5px; width:10px; height:11px; background:url(http://satray.ru/bullets.png) no-repeat; } .sliderBullets .active { background-position:0 -11px; } .sliderContent a { outline:none; } a { color:#fff; } a img { border:none; }


Подозрение на шрифт тут -

Код: Выделить всё

body { font-family:Arial, Helvetica, sans-serif; background:#f1f1f1; }


И на картинку для фона -

Код: Выделить всё

background-image:url(http://satray.ru/prev_next.png);

Аватара пользователя
CabinetAdmin

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

CabinetAdmin 27 фев 2014, 15:05 Сообщение

romaamor » Сегодня, 12:40 писал(а):Подозрение на шрифт тут

Он был вместе с кодом слайдера? Удали его нафиг.

romaamor » Сегодня, 12:40 писал(а):И на картинку для фона

Не должна.

Вот это:

Код: Выделить всё

#content { width:225px; margin:20px auto 20px; }


по сути тоже не нужно, #content нету в html структуре слайдера.
Но это всё не должно влиять на фон!?...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 27 фев 2014, 20:40 Сообщение

Как бы все работает нормально. Тогда в архиве файл CSS надо подредактировать.

Аватара пользователя
romaamor

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 07 мар 2014, 17:40 Сообщение

Не получается вставить больше двух картинок. Третья просто весит ниже статически. Чё не так?

Аватара пользователя
CabinetAdmin

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

CabinetAdmin 07 мар 2014, 19:17 Сообщение

Не знаю, может тег какой случайно удалил? :unknown
Поставь три, посмотрим...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 07 мар 2014, 20:03 Сообщение

CabinetAdmin » 42 минуты назад писал(а):Поставь три, посмотрим...

Ну к примеру так.

Код: Выделить всё

<div class="slider slider2"> <div class="sliderContent"> <div class="item"> <a href="http://satray.ru/viewtopic.php?f=172&t=2192" target="_blank"><img src="http://satray.ru/skrinpapka/2014-02-24_13h41_16.png" border="0"/></a> </div> <div class="item"> <a href="http://satray.ru/viewtopic.php?f=173&t=2220" target="_blank"><img src="http://satray.ru/skrinpapka/ScreenShot 07.03.14 16-15-18.png" border="0"/></a> </div> <div class="item"> <a href="http://satray.ru/viewtopic.php?f=173&t=2220" target="_blank"><img src="http://satray.ru/skrinpapka/ScreenShot 07.03.14 16-15-18.png" border="0"/></a> </div> </div> </div> </div>

Просто даже если продублировать.

Аватара пользователя
CabinetAdmin

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

CabinetAdmin 07 мар 2014, 20:07 Сообщение

Один </div> лишний, в конце.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР

romaamor 07 мар 2014, 23:52 Сообщение

[quote="CabinetAdmin » Вчера, 21:07"][/quote]
Блин. Совсем слепой стал. Старею.



Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 5 гостей