WebElement - Лучшие авторские скрипты для вашего сайта и блога
WebElement - это сборник дизайнерских мелочей
А также скриптов, помогающих вам в сайто-строении.
Мы поможем вам сделать сайт красивее, мобильнее и удобнее.
У нас вы можете найти готовые решения на:
HTML, CSS\CSS3, jQuery, JS, плагинам к библиотеке JQ и не только...
Используйте только качественные скрипты на своих сайтах.
Главная » Скрипты »

MobiliSlyder - Легкий плагин слайдера

18.10.2012 01:56

DEMOMobiliSlyder - Легкий плагин слайдера

Демо на отдельной странице
MobilySlider - это легкий и удобный плагин слайдера.
Очень легко управлять внешним видом с помощью CSS.
Функционал не богат, но этого вполне достаточно.
Попробуйте и убедитесь в этом сами)

Давайте без лишней писанины сразу разберем HTML разметку:
Code

  <div class="slider slider1">
  <div class="sliderContent">
  <div class="item">
  <img src="http://getelement.3dn.ru/materials/mobislyder/1.jpg" alt="" />
  </div>
  <div class="item">
  <img src="http://getelement.3dn.ru/materials/mobislyder/2.jpg" alt="" />
  </div>
  <div class="item">
  <img src="http://getelement.3dn.ru/materials/mobislyder/3.jpg" alt="" />
  </div>
  <div class="item">
  <img src="http://getelement.3dn.ru/materials/mobislyder/4.jpg" alt="" />
  </div>
  <div class="item">
  <img src="http://getelement.3dn.ru/materials/mobislyder/5.jpg" alt="" />
  </div>
  </div>
  </div>

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

CSS код тоже довольно прост, давайте его рассмотрим:
Code

.slider {
float:left;
width:600px;
height:350px;
position:relative;
padding-bottom:26px;
}

.sliderContent {
float:left;
width:600px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
border:6px solid rgba(0,0,0,0.1);
}

.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://getelement.3dn.ru/materials/mobislyder/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(http://getelement.3dn.ru/materials/mobislyder/bullets.png) no-repeat;
}

.sliderBullets .active {
background-position:0 -11px;
}

.sliderContent a {
outline:none;
}


Теперь давайте рассмотрим JS и как подключать.
Подключать нужно в вниз страницы, перед закрывающимся тегом BODY
Code
<script type="text/javascript" src="http://getelement.3dn.ru/materials/mobislyder/mobilyslider.js"></script>

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

<script type="text/javascript">
$(document).ready(function() {
  $('.slider1').mobilyslider({
  transition: 'fade',
  animationSpeed: 800,
  bullets: false,
  arrowsHide: false
  });
});
</script>

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

Code

  transition: 'vertical', // vertical , fade , horizontal Эффект перед сменой изображения
  animationSpeed: 500, // Скорость смены слайдов 1000 = 1 секунда
  autoplay: true, // true и false Автоматически перелистывать или нет.
  autoplaySpeed: 3000, //Задержка перед автоматической сменой
  pauseOnHover: true, //Останавливать перелистывание при наведении на слайд мышкой
  bullets: false //Мини кнопки слайдов в низу false=нету true=проказывать
  arrowsHide: false //Скрывать стрелки "Вперед и Назад" false и true
  arrows: true, //Показывать ли вообще стрелки

Вот пока и все smile
И будет еще несколько статей по этому слайдеру, с вариантами стилизаций.
Категория: Слайдеры | Просмотров: 1951 | Добавил: Cradleshel

Теги: слайдер, slider, слайдер для сайта, js, CSS3, MobiliSlider, jQuery
Всего комментариев: 2
KorsakFRB | 09.03.2015 | 14:43
+ (+1) -
Помогите установить этот слайдер ??!!! Скопировал всё как есть но слайдер не работает !
То есть появилась картинка которую не получается поменять и переключателей тоже нет !
Объясните подробней какой код куда ставить, вместе или по отдельности !

желательно по скорей с ответом !
Cradleshel | 20.03.2015 | 19:43
+ (0) -
Код
<script type="text/javascript">
$(document).ready(function() {
$('.slider1').mobilyslider({
transition: 'fade',
animationSpeed: 800,
bullets: false,
arrowsHide: false - ставим true и теперь будут видны стрелки управления
});
});
</script>
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Октябрь 2012  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Какой категории уделить больше внимания?
Результат
Всего ответов: 251

Полезная информация

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

Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px

Копирование материалов с данного сайта разрешено только с указанием обратной ссылки на источник


Copyright WebElement © 2012 - 2025
Лучшие авторские скрипты для вашего сайта и блога.

Перейти к тегам сайта
Используются технологии uCoz
Яндекс.Метрика

Статистика

Всего: 1
Гостей: 1
Юзеров: 0