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/script ... wsp5uN_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 КБ 470 скачиваний
Скачать архив.
ДЕМО
http://pcvector.net/uploads/demo/script ... wstiuN_sjQ
Последний раз редактировалось romaamor 25 фев 2014, 01:48, всего редактировалось 1 раз.
Комментарии: 12

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>
Что надо добавить что бы текст был ?
  • 0

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;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

	font-size: 12px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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);
  • 0

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

romaamor » Сегодня, 12:40 писал(а):Подозрение на шрифт тут
Он был вместе с кодом слайдера? Удали его нафиг.
romaamor » Сегодня, 12:40 писал(а):И на картинку для фона
Не должна.

Вот это:

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

#content {
width:225px;
margin:20px auto 20px;
}
по сути тоже не нужно, #content нету в html структуре слайдера.
Но это всё не должно влиять на фон!?...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

Не знаю, может тег какой случайно удалил? :unknown
Поставь три, посмотрим...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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>
Просто даже если продублировать.
  • 0

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

Один </div> лишний, в конце.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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