Простая карусель на jQuery


Простая карусель на jQuery

533
10 из 10
Проголосовало: 6






Да, тема давольно-таки заезженная. Но все же, найти то, что действительно нужно, зачастую сложно. Все предлагают сильно навороченные скрипты, с множеством лишнего функционала. И обычно это уже сжатые плагины.

Поэтому я предложу свой альтернативный вариант совсем простой карусели на jQuery.

Она может использоваться как карусель изображений, так и карусель новостей или любого другого контента =)

Единственный небольшой наворот, что я себе позволил - это тень у блока карусели.

Структура примет следующий вид:

Код

<!DOCTYPE html>
<html>
<head>
  <title>TJ simple adaptive carusel</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- подключаем последнюю версию jQuery -->
  <script type="text/javascript" src="/carousel.js"></script> <!-- подключаем наш скрипт -->
  <link rel="stylesheet" type="text/css" href="/css/styles-carousel.css"> <!-- подключаем стилевой файл -->
</head>
<body>

<div class="">
  <div class="carousel shadow">  
  <div class="carousel-button-left"><a href="#"></a></div>  
  <div class="carousel-button-right"><a href="#"></a></div>  
  <div class="carousel-wrapper">  
  <div class="carousel-items">  
  <div class="carousel-block">
  <img src="/images/1.jpg" alt="" />
  </div>
  <div class="carousel-block">
  <img src="/images/2.jpg" alt="" />
  </div>
  <div class="carousel-block">
  <img src="/images/3.jpg" alt="" />
  </div>
  <div class="carousel-block">
  <img src="/images/4.jpg" alt="" />
  </div>
  <div class="carousel-block">
  <img src="/images/5.jpg" alt="" />
  </div>
  <div class="carousel-block">
  <img src="/images/6.jpg" alt="" />
  </div>
  <div class="carousel-block">
  <img src="/images/7.jpg" alt="" />
  </div>  
  <div class="carousel-block">  
  <img src="/images/8.jpg" alt="" />
  </div>
  </div>
  </div>
  </div>
</div>  

</body>
</html>


Опишем стили:

Код

.carousel {
  max-width: 1080px; /* ширина всего блока */
  margin: 50px auto;
  width:100%;
}
.carousel-wrapper {
  margin: 10px 30px; /* отступы для стрелок */
  overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
  position:relative;
}
.carousel-items {
  width: 10000px; /* устанавливаем большую ширину для набора элементов */
  position: relative; /* позиционируем блок относительно основной области карусели */
}
.carousel-block {
  float: left; /* выстраиваем все элементы карусели в ряд */
  width: 250px; /* задаём ширину каждого элемента */
  padding: 10px 10px 10px 0px; /* делаем оступы, чтобы элементы не сливались */
}
.carousel-block img{
  display:block;
}

/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
  width: 25px;  
  height: 36px;  
  position: relative;
  top: 80px;  
  cursor: pointer;  
  text-decoration:none;
}
.carousel-button-left a{
  float: left;  
  background: url(../images/carousel-left.png);  
}
.carousel-button-right a{
  float: right;
  background: url(../images/carousel-right.png);  
}

/*********** SHADOW ***********/
.shadow{
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}


И, наконец, как оно должно работать:

Код

on-right",function(){  
  var carusel = $(this).parents('.carousel');
  right_carusel(carusel);
  return false;
});
//Обработка клика на стрелку влево
$(document).on('click',".carousel-button-left",function(){  
  var carusel = $(this).parents('.carousel');
  left_carusel(carusel);
  return false;
});
function left_carusel(carusel){
  var block_width = $(carusel).find('.carousel-block').outerWidth();
  $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items"));  
  $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
  $(carusel).find(".carousel-items .carousel-block").eq(-1).remove();  
  $(carusel).find(".carousel-items").animate({left: "0px"}, 200);  
   
}
function right_carusel(carusel){
  var block_width = $(carusel).find('.carousel-block').outerWidth();
  $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
  $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items"));  
  $(carusel).find(".carousel-items .carousel-block").eq(0).remove();  
  $(carusel).find(".carousel-items").css({"left":"0px"});  
  });  
}

$(function() {
//Раскомментируйте строку ниже, чтобы включить автоматическую прокрутку карусели
  auto_right('.carousel:first');
})

// Автоматическая прокрутка
function auto_right(carusel){
  setInterval(function(){
  if (!$(carusel).is('.hover'))
  right_carusel(carusel);
  }, 3000)
}
// Навели курсор на карусель
$(document).on('mouseenter', '.carousel', function(){$(this).addClass('hover')})
//Убрали курсор с карусели
$(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')})


Соответственно, тенюшку можно убрать. А для применения нужно всего лишь в css заменить размер основного блока и вложенных "скроллящихся" блоков. Так же очень легко зациклить этот процесс, дабы он скроллился автоматически (в данном случае, достаточно раскомментировать вызов функции auto_right). То есть сделать из этой простенькой галереи можно все, что нужно в рамках поставленной задачи!

Также следует отметить, при приведенный пример является адаптивным, то есть размер карусели адаптируется в соответствии с размерами экрана и будет коррекно отображаться как на экране компьютера или ноутбука, так и на экранах планшетов и смартфонов.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://tj-s.ru
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 4
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: