Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%
jQuery карусель
Здравствуйте, уважаемые читатель блога LifeExample. Очень долго я не мог выделить время на подготовку материала и написание этой статьи, но теперь все готово и я рад представить вашему вниманию очередной плагин – "jQuery карусель от Lifeexample.ru".
Идея написать плагин карусели, родилась одновременно с желанием сделать на блоге галерею постов. Почитав, что пишут люди, я понял, что без ротатора картинок тут не обойтись. В простонародье ротатор картинок чаще называют "Карусель картинок", ну а поскольку в наше время необычайно популярны различного рода библиотеки и фреймворки, упрощающие реализацию фантазий разработчиков, сегодня мы будем самостоятельно создавать плагин для jquery - карусель. В будущем мы разовьем эту тему и применим jquery карусель при написании плагина галереи постов для wordpress.
Демо-версия плагина:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
Начало создания 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, пользовательскими. В случае не обнаружения пользовательских параметров в силу вступят определенные по умолчанию:

Как видите атрибут 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 .
На этом предлагаю вам скачать исходники плагина с примером, и откланиваюсь.
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
Комментарии
Большое спасибо, очень помог.
Спасибо за статью, пригодилась
Подскажите как картинки для кнопок задать ?
Подскажите плиз, как кнопки картинками задать для нее ? Вообще не силен в скриптах
Много способов, можете почитать тут как сделать кнопку картинкой, а можете вместо кнопок
2
<button id="next">Вперед</button>
Сделать две картинки:
2
<img id="next" src="картинка2" alt="Вперед" title="Вперед"/>
Самая лучшая карусель которую я нашел по версии «функциональная/легко устанавливаемая». Автору респект!
Приятно слышать, что кому-то помогают твои труды.
так как же ее к вордпресу прикрутить?
просто вставить код в тело статьи. Возможно возникнет необходимость поставить соответствующий плагин, позволяющий подключать JS внутри контента.
Подскажите пожалуйста, как сделать, чтобы кнопки прокрутки появлялись при наведении на карусель?
Сделай у кнопок свойства hidden а на наведение повесь смену свойства слоя у кнопок
Спасибо, годный пример. Только немного не ясно, как реализовать прокрутку, скажем, не кнопками, а кликом или наведением на элемент? В идеале пытаюсь сделать так, чтобы выбранный элемент становился по центру блока.
Навесить обработчик можно на любое событие.
Не понятно только, как идентифицировать элемент который ниже или выше, что бы знать куда крутить, (вверх или вниз)? (для случая с вертикальной прокруткой)
А как сделать что бы при нажатии кнопки вперед прокрутилось на 4 элемента, а на автомате что бы прокручивался на 1
Действительно хорошая карусель. Но не работает в IE8, с этим надо что-то делать, иначе нет смысла ставить на её сайт
Большое спасибо!
После долгих поисков нашел вашу статью. Очень грамотно все описано, код хорошо закомментирован, все по-человечески, одно удовольствие настраивать.
Успехов вам в работе!
Огромное спасибо автору плагина. Вставил в качестве полуфабриката в юзаемый мной движок, с шаблонизатором SMARTY. Дополнил своим кодом, все заработало сразу.
Как пожелание, хотелось бы, чтобы плагин автоматически определял количество выводимых элементов, исходя из ширины родительского элемента.
Тем не менее, у меня все работает, за что респект аффтору!
Мне надо было интегрировать в движок сайта легкую карусельку с минимумом заморочек в плане верстки. Дело в том, что красивые карусели, которых полно в инете, начинают конфликтовать по css с моей версткой. А разбираться в чужой верстке очччень неохота. Ваш плагин пришелся используемому движку ко двору, и сразу заработал.
Единственно, что нет в этом плагине (а мне хотелось, чтобы было) это автоматическая подстройка под ширину родительского элемента. Немного почесав затылок, я взял на себя наглость добавить в Ваш код после строки 65 следующие строчки:
2
3
4
var width = $(this).width();
settings.visible = Math.round(width/itemWidth);
}
Теперь, если передать плагину свойство visible: «auto», количество выводимых элементов автоматически постраивается под ширину родительского элемента в моей верстке (у меня резиновый дизайн). Единственный минус при этом: страничку приходится перезагружать после ресайзинга окна браузера, но я не думаю, что это так уж критично.
Еще раз спасибо.
Вместо Math.round лучше использовать Math.floor. Иначе может случиться так, что последний видимый элемент карусели будет вылезать за край родительского элемента.
Сергей, спасибо за дополнение.
Еще одна модификация Вашего кода, если позволите. Довольно страннно выглядит каруселька, если под нее при верстке отведено, к примеру десять элементов, а движок из базы данных получил один или два элемента. Прокручивать два элемента весело, но нет необходимости, они и так видны. Поэтому я добавил сразу после своей предыдущей вставки следующий код:
2
3
4
5
$('#prev').css({'display': 'none'});
$('#next').css({'display': 'none'});
return false;
}
В случае, если вычисленное количество элементов превышает фактическое число элементов, управляющие кнопки скрываются, а плагин выключается.
Чтобы не ломать универсальность, лучше написать:
2
3
4
5
$(settings.btnNext).css({'display': 'none'});
$(settings.btnPrev).css({'display': 'none'});
return false;
}
А у меня не работает… Вставляю в шаблон главной страницы (WordPress 3.4.2), а вместо того, как показано в примере, просто выводит все 15 позиций блоком 5х3, а правее кнопки навигации… В заголовок стили и прописал, файл со скриптом положил в ту же папку, где и файл шаблона, а оно не работает… бида
Как менять размеры блоков?
в css правится все .carousel li там ширину и высоту задаете
в html файле, есть ксс, там правите элемент li его ширину и высоту
Марк, большое спасибо!
Отличный скрипт и с подробными комментариями! Я не специалист в jQuery, и то разобрался. А подгрузку картинок реализовал на AJAX с помощью того же jQuery. Спасибо!
Спасибо, Вам!
Спасибо! Удачи Вам!
прям сижу рыдаю, тысячу раз прочитала вставила, а получилось как в коменте выше у ALphacoil
14.04.2013
А у меня не работает… Вставляю в шаблон главной страницы (WordPress 3.4.2), а вместо того, как показано в примере, просто выводит все 15 позиций блоком 5х3, а правее кнопки навигации… В заголовок стили и прописал, файл со скриптом положил в ту же папку, где и файл шаблона, а оно не работает… бида
Здравствуйте. Очень понравился плагин. Использовал у себя в проекте. Есть вопрос. Включил автопрокрутку и заметил, что слайдер прокручивается не плавно и на каждой итерации происходит замедление. Можно ли этот момент поправить?
Отличная карусель, простая и удобная! Был в восторге.
Столкнулся с такой проблемой. Нужен была карусель, где отображается одна картинка, и ширина на 100%. Из-за скрипта картинки растягивались на 9999рх.
Кому понадобиться подобное, вот решение. Перед этим:
2
3
4
5
6
7
8
9
10
11
$('.container').Carousel({
visible: 3,
rotateBy: 1,
speed: 1000,
btnNext: '#next',
btnPrev: '#prev',
auto: false,
backslide: true,
margin: 10
});})
допишите это
2
3
4
5
6
7
8
$('.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 по причине унылого синтаксиса который сложно тестировать и запоминать…
Спасибо 🙂
Как убрать бесконечную прорутку?
Идеально! Благодарю! Очень помог!)
Огромное спасибо за скрипт! Но скажите, как сделать, чтобы у автоматической прокрутки было число rotateBy: и скорость speed: были одни, а у ручной прокрутки другие. Очень надо, пожалуйста, может кто подскажет решение.
Спасибо, очень полезная статья!
Можете подсказать как сделать что б навигация была не стрелочками а сверху цифрами 1 2 3 4 5 6 ?
Спасибо за отличный слайдер. Подскажите, пожалуйста, как при автопрокрутке сделать, чтобы прокрутка останавливалась на некоторое время после прокрутки заданного количества слайдов?
Супер! jquery только недавно начал изучать. Эта статья помогла во многом разобраться значительно быстрее. Огромное спасибо!!!
А вот как сделать автопрокрутку. Скажем что бы горизонтальная карусель прокручивалась на картинку каждые 3 секунды?
Упс! =) Не заметил, что там уже есть автопрокрутка! =)
А как быть, если мне нужно иметь на странице две копии этого плагина с разными настройками?
Пробовал привязывать плагин к разным div’ам, но срабатывает только обращение к первому объекту, но второй настраивается по первому, а обращение к нему через $(‘#objectId’).Carousel() не срабатывает.
И я скажу спасибо!
Хорошая карусель. Быстро встроил, настроил и доработал где и как нужно. Понятный код. Работает везде (ИЕ 9+)!
Добавлю, что использую несколько разных каруселей и как нарочно они все «carousel» и в CSS и в JS.
Потому здесь я переделал пространство имен на «carouselLife» (в честь LifeExample.ru).
Со своей стороны планирую сделать следующие доработки:
1. Как тут писали:
а) По кнопке другой шаг промотки
б) Может быть: остановка после показа всех элементов (на время, навсегда)
в) отключение зацикливания
2. Самое важное для меня — при изменении размера экрана: переинициализация карусели. Необходимо для мобильных устройств. Например, когда перевернули устройство с горизонтального положения в вертикальное.
Свои наработки обязательно скину автору, если ему это интересно.
ПС: спасибо также тем, кто писал в комментах выше свои доработки логики этого скрипта. Пользуюсь!
А как сделать чтобы кнопки «вперед» и «назад» были по бокам слайдера («назад» слева, «вперед» — справа)
Всё хорошо кроме того что он крутится без остановки при автопрокрутке
2
3
4
5
speed: 1000, //скорость 1 секунда
btnNext: null, // кнопка вперед не назначена
...
intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.auto);
Заменил на
2
3
4
5
6
speed: 1000, //скорость 1 секунда
delay:1000, //Задержка перед сменой 1 секунда
btnNext: null, // кнопка вперед не назначена
...
intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.delay);
Подскажите, а как сделать остановку при наведении курсора на карусель?