Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Продвижение сайта под пингвином || Создание CMS этап проектирования >>>

jQuery карусель

05.07.2012
jQuery карусель

Здравствуйте, уважаемые читатель блога LifeExample. Очень долго я не мог выделить время на подготовку материала и написание этой статьи, но теперь все готово и я рад представить вашему вниманию очередной плагин – "jQuery карусель от Lifeexample.ru".

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

Демо-версия плагина:

Начало создания jquery карусели (Шаг 1)

По сути своей плагинами мы называем методы объекта jQuery. Т.е. при создании нового плагина нам нужно создать новый метод объекта, что делается таким образом:

1
2
3
4
5
(function($){
        $.fn.Carousel = function(options) {
    alert(“Плагин готов :));
        };
})(jQuery);

Это каркас любого плагина, и в нем мы определили метод Carousel. Теперь из исполняемого скрипта мы можем обратиться к этому методу привычным всем способом:

Например, вот так:

1
$('.wrap-container'). Carousel();

Или вот так:

1
$('.wrap-container').find('.container').Carousel().css('background','green');

Во втором примере я использовал цепочку выполнения методов.

Не смотря на то, что наш выполнится успешно, он находится в зачаточном состоянии и поэтому последнее событие css('background','green') вызванное после Carousel(), не сработает.

Для того чтобы полноценно использовать плагин стало возможным и в цепочках методов достаточно внести в его содержимое такой код:

1
2
3
4
5
return this.each(function() {
   if (options) {
      $.extend(settings, options); //устанавливаем пользовательские настройки
   }                      
});

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

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

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

1
2
3
4
5
6
var settings = {
                attr1: "attribute-1",  
                attr2: "attribute-2",  
                attr3: "attribute-3",  
                };
alert(settings.attr1+'\n'+settings.attr2+'\n'+settings.attr3);

Теперь можно обратиться к плагину таким образом

1
2
3
4
5
$('.wrap-container'). Carousel(){
                attr1: "SetMyattribute",  
                attr2: "attribute-2",  
                attr3: "none",  
}

В результате метод $.extend(settings, options); заменит параметры по умолчанию определенные в объекте settings, пользовательскими. В случае не обнаружения пользовательских параметров в силу вступят определенные по умолчанию:

создание карусели jquery.jpg

Как видите атрибут attr2 остался определенным по умолчанию.

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

Как реализовать jQuery карусель (шаг2)

В задачи карусели входит циклическая бесконечная прокрутка имеющихся элементов карусели. Элементами могут являться:

  • Картинки;
  • Ссылки;
  • Блоки с текстом;
  • Все вместе.

Карусель на jquery, должна уметь вращаться как с участием пользователя по нажатию на навигационные кнопку "Вперед" и "Назад" так и автоматически.

Ориентация карусели будет иметь два положения:

  • Горизонтальное;
  • Вертикальное.

Ну и ни один ротатор картинок не обойдётся без настройки количества выводимых элементов, скорости прокрутки и количества прокручиваемых элементов.

Разобравшись с целями и задачами модно приступать к непосредственному созданию плагина карусель jQuery.

Делаем jQuery карусель своими руками

Все досконально я описывать не буду, поскольку по привычке снабдил код подробными комментариями, но все же основные два момента освещу.

Первое:

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

1
2
3
4
5
6
7
<div class="container">
                <ul class="carousel">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                </ul>
 </div>

Также для осуществления навигации по элементам карусели можно добавить два любых HTML объекта:

1
2
<button id="prev">Назад</button>
<button id="next">Вперед</button>

Впоследствии нужно будет передать id этих объектов в параметры плагина, но об этом чуть позже.

Второе о чем хочу сказать это об алгоритме вращения, и о том, как он реализован.

Чтобы создавать эффект вращения, мы при нажатии на кнопки будем копировать элементы с одной стороны ленты в другую, затем сдвигать ленту по направлению движения, и после того как она зафиксируется, удалять ненужные скрывшиеся элементы.

Обратите внмание: элементы (li) нужно копировать, а не переносить, только так мы сможем добиться эффекта бесконечности.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
/********************************************************/
/*                                                      */
/*  jquery.CarouselLifeExample.js                       */
/* Плагин "Карусель от LifeExample.ru" для jQuery        */
/*  Автор: Авдеев Марк                                   */
/*              2012г.                                 */
/*                                                      */
/* Для ипользования плагина необходимо определить     */
/* контейнер и вложить в него маркерованный список:        */
/*                                                      */
/*  <div class="container">                             */
/*                <ul class="carousel">                 */
/*                        <li>1</li>                    */
/*                        <li>2</li>                    */
/*                        <li>3</li>                    */
/*                        <li>4</li>                    */
/*                        <li>5</li>                    */
/*                        <li>6</li>                    */
/*                </ul>                                 */
/*    </div>                                            */
/* После чего можно указать параметры для использования */
/* плагина                                               */
/* $('.container').Carousel({                           */
/*  visible: 3,  //количество отображаемых позиций 3   */
/*  rotateBy: 1, //прокручивать по 1                  */
/*  speed: 1000, //скорость 1 секунда                    */
/*  btnNext: null, // кнопка вперед не назначена     */
/*  btnPrev: null, // кнопка назад не назначена           */
/*  auto: true, // авто прокрутка включена             */
/*  margin: 10, // отступ между позициями               */
/*  position: "h",// расположение по горизонтали       */
/*  dirAutoSlide: false //направление движения           */
/*  });                                                 */
/*  Или использовать параметры по умолчанию              */
/*  $('.container').Carousel();                         */
/*                                                      */
/********************************************************/
(function($){
 $.fn.Carousel = function(options) {
    // Настройки по умолчанию
    var settings = {
         visible: 3,  //количество отображаемых позиций 3
         rotateBy: 1, //прокручивать по 1
         speed: 1000, //скорость 1 секунда
         btnNext: null, // кнопка вперед не назначена
         btnPrev: null, // кнопка назад не назначена
         auto: true, // авто прокрутка включена
     margin: 10,    // отступ между позициями
     position: "h",// расположение по горизонтали
         dirAutoSlide: false //направление движения в перед для автопрокрутки
       };
     
    return this.each(function() {
         if (options) {
             $.extend(settings, options); //устанавливаем пользовательские настройки
          }
                       
          // определяем переменные
        var $this = $(this);//родительский элемент (Блок в котором находится карусель)                     
        var $carousel = $this.children(':first');// получаем дочерний элемент (UL) т.е. саму карусель
    var itemWidth = $carousel.children().outerWidth()+settings.margin; // вычисляем ширину элемента
    var itemHeight = $carousel.children().outerHeight()+settings.margin;// вычисляем высоту элемента                  
    var itemsTotal = $carousel.children().length; // получаем общее количество элементов в каруселе
        var running = false; //останавливаем процесс
        var intID = null; //отчищаем интервал
        //size - размер для вычисления длины, зависит от ориентации карусели
    var size = itemWidth;
    if(settings.position=="v") size = itemHeight;
        //Если карусель вертикальная то
        if(settings.position=="v")
    $this.css({
        'position': 'relative', // необходимо для нормального отображения в ИЕ6(7)
        'overflow': 'hidden', // прячем все, что не влезает в контейнер
        'height': settings.visible * size + 'px' ,// ДЛИНУ контейнера ставим равной ширине всех видимых элементов
    'width': itemWidth-settings.margin //Ширина контейнера равна ширине элемента
     });
     else
      $this.css({
            'position': 'relative', // необходимо для нормального отображения в ИЕ6(7)
            'overflow': 'hidden', // прячем все, что не влезает в контейнер
            'width': settings.visible * size + 'px' ,// ширину контейнера ставим равной ширине всех видимых элементов
        'height': itemHeight-settings.margin
     });
     //вычисляем расстояние отупа от каждого элемента
     if(settings.position=="v")
      $carousel.children('li').css({
          'margin-top': settings.margin/2+ 'px',
      'margin-bottom': settings.margin/2+ 'px',
      'float': 'left',
          'width': '60px',
          'height': '40px',
          'padding': '5px',
      'background': '#E2E2E2',
      'font': '20px Calibry italic',
      'color':'green',
          'border': 'gray 1px solid'                               
     });
     else
     $carousel.children('li').css({
         'margin-left': settings.margin/2+ 'px',
     'margin-right': settings.margin/2+ 'px',
     });                   
    // в зависимости от ориентации, увеличиваем длину или ширину карусели
    if(settings.position=="v")
            $carousel.css({
              'position': 'relative', // разрешаем сдвиг по оси
              'height': 9999 + 'px', // увеличиваем лену карусели
              'left': 0,
          'top': 0 
           });
    else
        $carousel.css({
              'position': 'relative', // разрешаем сдвиг по оси
              'width': 9999 + 'px', // увеличиваем лену карусели
              'top': 0,
          'left': 0
           });
//прокрутка карусели в наравлении dir [true-вперед; false-назад]
       function slide(dir) {
      var direction = !dir ? -1 : 1; // устанавливаем заданное направление
          var Indent = 0; // смещение (для ul)
          if (!running) {                          
// если анимация завершена (или еще не запущена)
             running = true; // ставим флажок, что анимация в процессе
             if (intID) { // если запущен интервал
                    window.clearInterval(intID); // очищаем интервал                                        
            }
             if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию)
             /*
               * вставляем после последнего элемента карусели
               * клоны стольких элементов, сколько задано
               * в параметре rotateBy (по умолчанию задан один элемент)
             */

$carousel.children(':last').after($carousel.children().slice(0,settings.rotateBy).clone(true));
} else { // если мотаем к предыдущему элементу
           /*
              * вставляем перед первым элементом карусели
              * клоны стольких элементов, сколько задано
              * в параметре rotateBy (по умолчанию задан один элемент)
           */
                                               $carousel.children(':first').before($carousel.children().slice(itemsTotal - settings.rotateBy, itemsTotal).clone(true));
            /*
             * сдвигаем карусель (<ul>)  на ширину/высоту  элемента,
             * умноженную на количество элементов, заданных
             * в параметре rotateBy (по умолчанию задан один элемент)
            */

                                                if(settings.position=="v")
    $carousel.css('top', -size * settings.rotateBy + 'px');
else                                                     $carousel.css('left', -size * settings.rotateBy + 'px');
 }
                                       
   /*
    * расчитываем  смещение
    * текущее значение  + ширина/высота  одного элемента * количество проматываемых элементов * на направление перемещения (1 или -1)
     */

if(settings.position=="v")
Indent = parseInt($carousel.css('top')) + (size * settings.rotateBy * direction);
          else
Indent = parseInt($carousel.css('left')) + (size * settings.rotateBy * direction);
                                       
if(settings.position=="v")
    var animate_data={'top': Indent};
else
var animate_data={'left': Indent};
// запускаем анимацию
$carousel.animate(animate_data, {queue: false, duration: settings.speed, complete: function() {
  // когда анимация закончена
if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию)
 // удаляем столько первых элементов, сколько задано в rotateBy
    $carousel.children().slice(0, settings.rotateBy).remove();
  // устанавливаем сдвиг в ноль
                                                        if(settings.position=="v")
                   $carousel.css('top', 0);
else                                                    $carousel.css('left', 0);
} else { // если мотаем к предыдущему элементу
 // удаляем столько последних элементов, сколько задано в rotateBy
$carousel.children().slice(itemsTotal, itemsTotal + settings.rotateBy).remove();
}
if (settings.auto) { // если карусель должна проматываться автоматически
          // запускаем вызов функции через интервал времени (auto)
 intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.auto);
    }
  running = false; // отмечаем, что анимация завершена
 }});
  }
  return false; // возвращаем false для того, чтобы не было перехода по ссылке
}
// назначаем обработчик на событие click для кнопки "вперед"
     $(settings.btnNext).click(function() {                            
     return slide(false);                              
      });
 // назначаем обработчик на событие click для кнопки "Назад"
    $(settings.btnPrev).click(function() {
          return slide(true);
     });

if (settings.auto) { // если карусель должна проматываться автоматически
                     // запускаем вызов функции через временной интервал
intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.auto);
                   }
      });
    };
})(jQuery);

Не забудьте создать необходимые для работы HTML элементы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
        <title>jQuery</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
       
        <style type="text/css">

               
                .carousel {
                        margin: 0;
                        padding: 0;
                        list-style: none;                      
                }
               
                .carousel li {
                        float: left;
                        width: 60px;
                        height: 40px;
                        padding: 5px;
                        background: #E2E2E2;
                        font: 20px Calibry italic;
                        color:green;
                        border: gray 1px solid;                
                }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery.CarouselLifeExample.js"></script>        
        <script type="text/javascript">
                $(document).ready(function() {                             
                        $('.container').Carousel({
                        visible: 3,
                        rotateBy: 1,
                        speed: 1000,
                        btnNext: '#next',
                        btnPrev: '#prev',                      
                        auto: false,                       
                        backslide: true,   
                        margin: 10                     
                        });
                       
                        $('.container2').Carousel({
                        visible: 3,
                        rotateBy: 1,
                        speed: 1000,
                        btnNext: '#next2',
                        btnPrev: '#prev2',
                        position: "v",                     
                        auto: false,                       
                        backslide: true,   
                        margin: 10                     
                        });
               
                });
        </script>
</head>

<body>
       
        <div class="container">
                <ul class="carousel">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                </ul>
        </div>
        <button id="prev">Назад</button>
        <button id="next">Вперед</button>
        <br/>
        <button id="prev2"><<Назад</button>
         <div class="container2">
                <ul class="carousel">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                </ul>
        </div>
         <button id="next2">Вперед>></button>
       
     
       
        <div id="console"></div>
</body>
</html>

Кому интересно, как плагин применить совместно с wordpress, и настроить все для вывода галереи постов, пишите в комментариях. Постараюсь в скором времени описать в отдельной статье о том, как сделать jquery карусель в галереи постов wordpress .

На этом предлагаю вам скачать исходники плагина с примером, и откланиваюсь.

Скачать исходники плагина jquery.CarouselLifeExample.js ( Скачали: 2692 чел. ) 

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • Dickinson

    Большое спасибо, очень помог.

  • Максим

    Спасибо за статью, пригодилась

  • Алексей

    Подскажите как картинки для кнопок задать ?

  • Алексей

    Подскажите плиз, как кнопки картинками задать для нее ? Вообще не силен в скриптах

    • Много способов, можете почитать тут как сделать кнопку картинкой, а можете вместо кнопок

      1
      2
      <button id="prev">Назад</button>
      <button id="next">Вперед</button>

      Сделать две картинки:

      1
      2
      <img id="prev" src="картинка1" alt="Назад" title="Назад" />
      <img id="next" src="картинка2" alt="Вперед" title="Вперед"/>
  • Алексей

    Самая лучшая карусель которую я нашел по версии «функциональная/легко устанавливаемая». Автору респект!

    • Приятно слышать, что кому-то помогают твои труды.

  • bogdan

    так как же ее к вордпресу прикрутить?

    • просто вставить код в тело статьи. Возможно возникнет необходимость поставить соответствующий плагин, позволяющий подключать JS внутри контента.

  • Александр

    Подскажите пожалуйста, как сделать, чтобы кнопки прокрутки появлялись при наведении на карусель?

    • Mons

      Сделай у кнопок свойства hidden а на наведение повесь смену свойства слоя у кнопок

  • hunty

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

    • Навесить обработчик можно на любое событие.

    • hunty

      Не понятно только, как идентифицировать элемент который ниже или выше, что бы знать куда крутить, (вверх или вниз)? (для случая с вертикальной прокруткой)

  • Сергей

    А как сделать что бы при нажатии кнопки вперед прокрутилось на 4 элемента, а на автомате что бы прокручивался на 1

  • Действительно хорошая карусель. Но не работает в IE8, с этим надо что-то делать, иначе нет смысла ставить на её сайт

  • Константин

    Большое спасибо!
    После долгих поисков нашел вашу статью. Очень грамотно все описано, код хорошо закомментирован, все по-человечески, одно удовольствие настраивать.
    Успехов вам в работе!

  • Странник

    Огромное спасибо автору плагина. Вставил в качестве полуфабриката в юзаемый мной движок, с шаблонизатором SMARTY. Дополнил своим кодом, все заработало сразу.
    Как пожелание, хотелось бы, чтобы плагин автоматически определял количество выводимых элементов, исходя из ширины родительского элемента.
    Тем не менее, у меня все работает, за что респект аффтору!

  • Странник

    Мне надо было интегрировать в движок сайта легкую карусельку с минимумом заморочек в плане верстки. Дело в том, что красивые карусели, которых полно в инете, начинают конфликтовать по css с моей версткой. А разбираться в чужой верстке очччень неохота. Ваш плагин пришелся используемому движку ко двору, и сразу заработал.
    Единственно, что нет в этом плагине (а мне хотелось, чтобы было) это автоматическая подстройка под ширину родительского элемента. Немного почесав затылок, я взял на себя наглость добавить в Ваш код после строки 65 следующие строчки:

    1
    2
    3
    4
    if(settings.visible=="auto"){
    var width = $(this).width();   
    settings.visible = Math.round(width/itemWidth);
    }

    Теперь, если передать плагину свойство visible: «auto», количество выводимых элементов автоматически постраивается под ширину родительского элемента в моей верстке (у меня резиновый дизайн). Единственный минус при этом: страничку приходится перезагружать после ресайзинга окна браузера, но я не думаю, что это так уж критично.
    Еще раз спасибо.

    • Сергей

      Вместо Math.round лучше использовать Math.floor. Иначе может случиться так, что последний видимый элемент карусели будет вылезать за край родительского элемента.

    • Сергей, спасибо за дополнение.

  • Странник

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

    1
    2
    3
    4
    5
    if(settings.visible>itemsTotal){
      $('#prev').css({'display': 'none'});
      $('#next').css({'display': 'none'});
      return false;
    }

    В случае, если вычисленное количество элементов превышает фактическое число элементов, управляющие кнопки скрываются, а плагин выключается.

    • anon

      Чтобы не ломать универсальность, лучше написать:

      1
      2
      3
      4
      5
            if(settings.visible>itemsTotal){
              $(settings.btnNext).css({'display': 'none'});
              $(settings.btnPrev).css({'display': 'none'});
              return false;
            }
  • ALphacoil

    А у меня не работает… Вставляю в шаблон главной страницы (WordPress 3.4.2), а вместо того, как показано в примере, просто выводит все 15 позиций блоком 5х3, а правее кнопки навигации… В заголовок стили и прописал, файл со скриптом положил в ту же папку, где и файл шаблона, а оно не работает… бида

  • Андрей

    Как менять размеры блоков?

    • Ярослав

      в css правится все .carousel li там ширину и высоту задаете

    • Ярослав

      в html файле, есть ксс, там правите элемент li его ширину и высоту

  • Василий

    Марк, большое спасибо!
    Отличный скрипт и с подробными комментариями! Я не специалист в jQuery, и то разобрался. А подгрузку картинок реализовал на AJAX с помощью того же jQuery. Спасибо!

  • Виталий

    Спасибо! Удачи Вам!

  • conya

    прям сижу рыдаю, тысячу раз прочитала вставила, а получилось как в коменте выше у ALphacoil
    14.04.2013

    А у меня не работает… Вставляю в шаблон главной страницы (WordPress 3.4.2), а вместо того, как показано в примере, просто выводит все 15 позиций блоком 5х3, а правее кнопки навигации… В заголовок стили и прописал, файл со скриптом положил в ту же папку, где и файл шаблона, а оно не работает… бида

  • Alexandr

    Здравствуйте. Очень понравился плагин. Использовал у себя в проекте. Есть вопрос. Включил автопрокрутку и заметил, что слайдер прокручивается не плавно и на каждой итерации происходит замедление. Можно ли этот момент поправить?

  • Vlad

    Отличная карусель, простая и удобная! Был в восторге.
    Столкнулся с такой проблемой. Нужен была карусель, где отображается одна картинка, и ширина на 100%. Из-за скрипта картинки растягивались на 9999рх.
    Кому понадобиться подобное, вот решение. Перед этим:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $(document).ready(function() {                              
                            $('.container').Carousel({
                            visible: 3,
                            rotateBy: 1,
                            speed: 1000,
                            btnNext: '#next',
                            btnPrev: '#prev',                      
                            auto: false,                        
                            backslide: true,    
                            margin: 10                      
                            });})

    допишите это

    1
    2
    3
    4
    5
    6
    7
    8
    $('.carousel > li > img').css({'width': $(window).width() + 'px', 'min-width': 980 + 'px'});
        $('.container').css({'width': $(window).width() +'px', 'min-width': 980 + 'px'});
       
        $( window ).resize(function(){
           
            $('.carousel > li > img').css({'width': $(window).width() + 'px', 'min-width': 980 + 'px'});
            $('.container').css({'width': $(window).width() +'px', 'min-width': 980 + 'px'});
        });
  • Влад

    Молодчина просто! Уважуха тебе!!! Умничка…

    Ни один из опенсорс скриптов мне не подошёл: во-первых — для интернет-магазина самое главное лёгкость(а они обычно весили от 100-200 кб)! во-вторых — они были черезщур сложными!

    Пиши побольше таких статей, очень много людей вообще не разбираются с js по причине унылого синтаксиса который сложно тестировать и запоминать…

  • Djoker

    Как убрать бесконечную прорутку?

  • fps20

    Идеально! Благодарю! Очень помог!)

  • Роман

    Огромное спасибо за скрипт! Но скажите, как сделать, чтобы у автоматической прокрутки было число rotateBy: и скорость speed: были одни, а у ручной прокрутки другие. Очень надо, пожалуйста, может кто подскажет решение.

  • Niko

    Спасибо, очень полезная статья!
    Можете подсказать как сделать что б навигация была не стрелочками а сверху цифрами 1 2 3 4 5 6 ?

  • Маргарита

    Спасибо за отличный слайдер. Подскажите, пожалуйста, как при автопрокрутке сделать, чтобы прокрутка останавливалась на некоторое время после прокрутки заданного количества слайдов?

  • Алексей

    Супер! jquery только недавно начал изучать. Эта статья помогла во многом разобраться значительно быстрее. Огромное спасибо!!!
    А вот как сделать автопрокрутку. Скажем что бы горизонтальная карусель прокручивалась на картинку каждые 3 секунды?

  • Алексей

    Упс! =) Не заметил, что там уже есть автопрокрутка! =)

  • Андрей

    А как быть, если мне нужно иметь на странице две копии этого плагина с разными настройками?
    Пробовал привязывать плагин к разным div’ам, но срабатывает только обращение к первому объекту, но второй настраивается по первому, а обращение к нему через $(‘#objectId’).Carousel() не срабатывает.

  • alecsey

    И я скажу спасибо!
    Хорошая карусель. Быстро встроил, настроил и доработал где и как нужно. Понятный код. Работает везде (ИЕ 9+)!

    Добавлю, что использую несколько разных каруселей и как нарочно они все «carousel» и в CSS и в JS.
    Потому здесь я переделал пространство имен на «carouselLife» (в честь LifeExample.ru).

    Со своей стороны планирую сделать следующие доработки:
    1. Как тут писали:
    а) По кнопке другой шаг промотки
    б) Может быть: остановка после показа всех элементов (на время, навсегда)
    в) отключение зацикливания
    2. Самое важное для меня — при изменении размера экрана: переинициализация карусели. Необходимо для мобильных устройств. Например, когда перевернули устройство с горизонтального положения в вертикальное.

    Свои наработки обязательно скину автору, если ему это интересно.

    ПС: спасибо также тем, кто писал в комментах выше свои доработки логики этого скрипта. Пользуюсь!

  • Ольга

    А как сделать чтобы кнопки «вперед» и «назад» были по бокам слайдера («назад» слева, «вперед» — справа)

  • Иван

    Всё хорошо кроме того что он крутится без остановки при автопрокрутке

    1
    2
    3
    4
    5
     rotateBy: 1, //прокручивать по 1
             speed: 1000, //скорость 1 секунда
             btnNext: null, // кнопка вперед не назначена
    ...
    intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.auto);

    Заменил на

    1
    2
    3
    4
    5
    6
     rotateBy: 1, //прокручивать по 1
             speed: 1000, //скорость 1 секунда
             delay:1000, //Задержка перед сменой 1 секунда
             btnNext: null, // кнопка вперед не назначена
    ...
    intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.delay);
  • Дмитрий

    Подскажите, а как сделать остановку при наведении курсора на карусель?

  • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика