JQuery пользовательский слайдер изображений с различной шириной изображения

Question

У меня есть проект для создания слайдера изображений, который имеет такие характеристики: - бесконечный цикл - два ряда - когда я нажимаю кнопку «Далее» или «Предыдущая», ползунок должен двигаться на ширину следующего изображения (предстоящее изображение) мой HTML:

<div class="mid">
<div class="sliderpos1">
<div class="slidemove">
    <span id="addimage"><img src="img/slider-image-1.jpg"></span>
    <span id="addimage"><img src="img/slider-image-2.jpg"></span>
    <span id="addimage"><img src="img/slider-image-3.jpg"></span>
    <span id="addimage"><img src="img/slider-image-4.jpg"></span>
    <span id="addimage"><img src="img/slider-image-5.jpg"></span>
    <br>
    <span id="addimage"><img src="img/slider-image-6.jpg"></span>
    <span id="addimage"><img src="img/slider-image-7.jpg"></span>
    <span id="addimage"><img src="img/slider-image-8.jpg"></span>
    <span id="addimage"><img src="img/slider-image-9.jpg"></span>
  </div>

    </div>
    <button class="button1" id="prev"></button>
    <button class="button2" id="next"></button>

</div>

мой CSS:

.sliderpos1 {
    position: absolute;
    height: 420px;
    display: block;
    left: auto;
    overflow: hidden;
    right: 700px;
    top: 200px;
    margin: 0 auto;
    width: 1400px;
}
.sliderpos1 img {
    width: auto;
    height: 200px;
    border-radius:10px;
    padding:5px;
    float:left;
    display:block;
}

.slidemove {
    position: relative;
}

и вот мой вопрос:

$(function () {

    var gallery = $('.slidemove'),
        items = gallery.find('span'),
        len = items.length,
        current = 1,
        first = items.filter(':first'),
        last = items.filter(':last'),
        imgwidth = $('img').last().width(),
        triggers = $('button');

    first.before(last.clone(true));
    last.after(first.clone(true));

    triggers.on('click', function () {
        if (gallery.is(':not(:animated)')) {
            var cycle = false,
                delta = (this.id === "prev") ? -1 : 1;
            gallery.animate({ left: "+=" + (imgwidth * delta) }, function () {
                current += delta;
                cycle = !!(current === 0 || current > len);
                if (cycle) {
                    current = (current === 0) ? len : 1;
                    gallery.css({ right: imgwidth });
                }
            });
        }
    });
});

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

Answer 1

Удалось добавить некоторые основные функции клонирования.

Согласно комментариям в js-коде, я оставляю вам сделать эту работу лучше.

Также исправлена ​​проблема с элементом <br> в css.

$(function () {

var gallery = $('.slidemove'),
    items = gallery.find('span'),
    len = items.length,
    current = 1,
    first = items.filter(':first'),
    last = items.filter(':last'),
    imgwidth = $('img').last().width(),
    triggers = $('button');

var htmlarr = $(".slidemove").html().split("<br>");
var addtotop = htmlarr[0];
var addtobottom = htmlarr[1];
var appendtotop = $(".slidemove br").prev();
var appendtobottom = $(".slidemove span").last();
//left to you calculate the correct width to add
var widthtoadd = 1400;

triggers.on('click', function () {
            //left to you append cloned element only when needed (when there are are gonna be no more visible elements for slideshow, not at every click)
        $(appendtotop).after(addtotop);
    $(appendtobottom).after(addtobottom);
    gallery.width(gallery.width() + widthtoadd);
    if (gallery.is(':not(:animated)')) {                
        var cycle = false,
            delta = (this.id === "prev") ? -1 : 1;                    //there is something wrong on calculation of css left add for "prev" action
        gallery.animate({ left: "+=" + (imgwidth * delta) }, function () {
            current += delta;
            cycle = !!(current === 0 || current > len);
            if (cycle) {
                current = (current === 0) ? len : 1;
                gallery.css({ right: imgwidth });
            }
        });
    }
});
});

Вот моя раздвоенная скрипка https://jsfiddle.net/bzd5eutx/

В качестве последнего комментария я бы сказал, что написание этого кода с 0 не похоже на переизобретение колеса, при условии, что для простых слайд-шоу, подобных этому, существует множество js-библиотек.