карусель для плагина
Прошу подскажите как реализовать бесконечную прокрутку
(постоянная смена слайдов 1-2-3-1-2-3-1-2-3 -....) изображения в этом замечательном решении immersive-slider С уважением, Юрий :help: :help: :help: |
Цитата:
Цитата:
|
чтобы движение было каруселью
как здесь == easy_slider со сменой рисунков после последнего опять первый и так далее а не движение назад к первому |
if(options.continuous){ $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); $("ul", obj).css('width',(s+1)*w); }; я так понимаю что надо создать что то подобное - но применительно к этому слайдеру что бы добавить в этот код var defaults = { animation: "bounce", slideSelectorX: ".slide", containerX: ".main", cssBlur: false, pagination: true, loop: true, autoStart: 4000, // ************* добавить карусель *************** continuous: true, // ************* //добавить карусель *************** }; |
krakoss,
а почему не использовать слайдер, в котором это уже реализовано? или поиск по форуму, бесконечная https://javascript.ru/forum/dom-wind...tml#post511993 https://javascript.ru/forum/dom-wind...tml#post430374 |
Потому что есть необходимость сделать карусель именно в этом слайдере
хотелось бы получить более продуктивные ответы если нет возможности то хоть ткните пальцем где в этом плагине можно это попробовать реализовать |
Цитата:
всю логику надо менять во всём плагине, варианта 2 1.делать два дополнительных блока слева и справа, если был переход на эти блоки, то в конце анимации переброска с клона на реальный блок. 2. в конце анимации или перед анимацией, перемещать концевые блоки, а ленту с блоками всегда возвращать на исходное. реализация по второй ссылке пост #5 |
Спасибо Рони показали правильное решение
взял за основу известный jQuery плагин карусели и получил желаемый результат == карусель немного добавил CSS для доработки до адаптивности /* Slider */ #slider ul, #slider li{margin:0; padding:0;list-style:none;overflow: hidden;} #slider li{width:800px;height:480px;} #slider li img{ width:100%;} за счет последней строки img заполняет все пространство #slider li при масштабировании остальное планирую сделать на jQuery в 45 строке скрипта $("ul", obj).css('width',s*w); дополнить следующее условие var $width = $(window).width(); if($width< 767 ) { // вот эту переменную вычислить в зависимости от текущей ширины экрана $("ul", obj).css('width',s*w); и выровнять $("#slider>ul") ==> по центру $width } else { $("ul", obj).css('width',s*w); } С уважением Юрий P.S первые шаги по адаптации jQuey плагинов. |
Прошу подсказать как правильно организовать код, чтобы при изменении размеров экрана слайд-шоу автоматически подстраивался под ширину блока без перезагрузки страницы.
<div id="slider"><ul><li><img src="images/1.jpg" alt="" /></li><li><img src="images/1.jpg" alt="" /></li></ul></div> Далее jQuery <script> (function ($) { $.fn.slider = function (options) { // default configuration properties var defaults = { controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, vertical: false, speed: 800, auto: true, pause: 2000, continuous: true, numeric: true, numericId: 'controls' }; function isEmpty(str) { return (!str || 0 === str.length); } var options = $.extend(defaults, options); this.each(function () { var obj = $(this); var s = $("li", obj).length; var w; var w_change; var w_resize; var h; if ($(window).width() <= '767') { w = $('.slider').width(); w = +w + 2; console.log('первоначально: w = $(.slider).width(); + 2 = ' + w); // Установка обработчика поворота экрана if (window.onorientationchange) { window.onorientationchange = function () { w_change = $('.slider').width(); w = +w_change + 2; console.log('поворот: w = +w_change + 2 = ' + w); } } else { // Установка обработчика изменения размеров экрана $(window).on('resize', function () { w_resize = $('.slider').width(); // данные считаны == все отлично w = +w_resize + 2; // новое значение w установлено console.log('Размер: w = +w_resize + 2 = ' + w); }); } if (isEmpty(w_resize)) { console.log("if isEmpty(w_resize) w = w;" + w); w = w; } else { w = w_resize; console.log("if isEmpty(w_resize) else { w = w_resize; w == " + w); } // Но код выше не работает?! console.log(" И Чему же равна в итоге var w !!! = " + w) $("li", obj).width(w); $("li", obj).height(w * 6 / 10); h = $("li", obj).height(w * 6 / 10); obj.width(w); obj.height(h); } else { w = $("li", obj).width(); h = $("li", obj).height(); obj.width(w); obj.height(h); } var clickable = true; obj.css("overflow", "hidden"); var ts = s - 1; var t = 0; $("ul", obj).css('width', s * w); if (s > 1){ if (options.continuous) { $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left", "-" + w + "px")); $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); $("ul", obj).css('width', (s + 1) * w); }; }; if (!options.vertical) $("li", obj).css('float', 'left'); if (s > 1){ if (options.controlsShow) { var html = options.controlsBefore; if (options.numeric) { html += '<ul id="' + options.numericId + '"></ul>'; } else { if (options.firstShow) html += '<span id="' + options.firstId + '"><a href=\"javascript:void(0);\">' + options.firstText + '</a></span>'; html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>'; html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>'; if (options.lastShow) html += ' <span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>'; }; html += options.controlsAfter; $(obj).after(html); }; }; if (options.numeric) { for (var i = 0; i < s; i++) { $(document.createElement("li")) .attr('id', options.numericId + (i + 1)) .html('<a rel=' + i + ' href=\"javascript:void(0);\"></a>') .appendTo($("#" + options.numericId)) .click(function () { animate($("a", $(this)).attr('rel'), true); }); }; } else { $("a", "#" + options.nextId).click(function () { animate("next", true); }); $("a", "#" + options.prevId).click(function () { animate("prev", true); }); $("a", "#" + options.firstId).click(function () { animate("first", true); }); $("a", "#" + options.lastId).click(function () { animate("last", true); }); }; function setCurrent(i) { i = parseInt(i) + 1; $("li", "#" + options.numericId).removeClass("current"); $("li#" + options.numericId + i).addClass("current"); }; function adjust() { if (t > ts) t = 0; if (t < 0) t = ts; if (!options.vertical) { $("ul", obj).css("margin-left", (t * w * -1)); } else { $("ul", obj).css("margin-left", (t * h * -1)); } clickable = true; if (options.numeric) setCurrent(t); }; if (s > 1) { function animate(dir, clicked) { if (clickable) { clickable = false; var ot = t; switch (dir) { case "next": t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1; break; case "prev": t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1; break; case "first": t = 0; break; case "last": t = ts; break; default: t = dir; break; }; var diff = Math.abs(ot - t); var speed = diff * options.speed; if (!options.vertical) { p = (t * w * -1); $("ul", obj).animate( { marginLeft: p }, { queue: false, duration: speed, complete: adjust } ); } else { p = (t * h * -1); $("ul", obj).animate( { marginTop: p }, { queue: false, duration: speed, complete: adjust } ); }; if (clicked) clearTimeout(timeout); if (options.auto && dir == "next" && !clicked) { ; timeout = setTimeout(function () { animate("next", false); }, diff * options.speed + options.pause); }; }; }; var timeout; if (options.auto) { ; timeout = setTimeout(function () { animate("next", false); }, options.pause); }; }; if (options.numeric) setCurrent(0); }); }; })(jQuery); $("#slide").slider(); </script> изменение размеров отслеживается. Но вот этот код не работает if (isEmpty(w_resize)) { console.log("if isEmpty(w_resize) w = w;" + w); w = w; } else { w = w_resize; console.log("if isEmpty(w_resize) else { w = w_resize; w == " + w); } не происходит изменение размеров С уважением Юрий |
Цитата:
Этот код не входит ни в какой обработчик. Он будет срабатывать один раз, причем только часть console.log("if isEmpty(w_resize) w = w;" + w); w = w; |
Часовой пояс GMT +3, время: 23:31. |