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

1002
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: