карусель для плагина

[krakoss]

Прошу подскажите как реализовать бесконечную прокрутку
(постоянная смена слайдов 1-2-3-1-2-3-1-2-3 -....)
изображения в этом замечательном решении

immersive-slider


С уважением, Юрий

[рони]

Прошу подскажите как реализовать бесконечную прокрутку

??? в чём проблема, по умолчанию в нём бесконечная прокрутка

loop: true, // Toggle to false if you don't want the slider to loop. Default is true.

[krakoss]

чтобы движение было каруселью
как здесь == easy_slider

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

[krakoss]

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

[krakoss]

Потому что есть необходимость сделать карусель именно в этом слайдере
хотелось бы получить более продуктивные ответы

если нет возможности то хоть ткните пальцем где в этом плагине можно это попробовать реализовать

[рони]

где в этом плагине можно это попробовать реализовать

https://github.com/peachananr/immers...slider.js#L211

всю логику надо менять во всём плагине, варианта 2
1.делать два дополнительных блока слева и справа, если был переход на эти блоки, то в конце анимации переброска с клона на реальный блок.
2. в конце анимации или перед анимацией, перемещать концевые блоки, а ленту с блоками всегда возвращать на исходное. реализация по второй ссылке пост #5

[krakoss]

Спасибо Рони показали правильное решение
взял за основу известный 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 плагинов.

[krakoss]

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

<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);
}

не происходит изменение размеров
С уважением Юрий

[voraa]

Но вот этот код не работает

А что именно не работает?
Этот код не входит ни в какой обработчик. Он будет срабатывать один раз, причем только часть

console.log("if isEmpty(w_resize) w = w;" + w);
w = w;