Удаление элемента из подключаемого модуля jCarousel

Ваш пример имеет смысл, за исключением того, что вы выходите за пределы плагина, jCarousel не знает, что нужно обновлять себя. Из документации кажется, что упомянутый вами метод remove () будет работать. Однако в моих испытаниях я так и не смог заставить объект jCarousel на самом деле «делать правильные вещи» и обновлять его кнопки, прокручивать и т. Д.

Из-за всего этого я написал дополнительный метод в классе jCarousel, который делает именно это. Вы вызываете removeAndAnimate (1), чтобы удалить первый элемент в карусели и перестроить все так, чтобы кнопки «следующий / предыдущий» были включены / отключены, все работает.

Также стоит отметить, что функция remove () jCarousel не позволяет вам удалить элемент, который отображается в данный момент, что мы и хотели сделать (например, позволить пользователю удалить изображение из карусели, щелкнув по нему). .

Реализация removeAndAnimate (i):

removeAndAnimate: function(i) {

        var e = this.get(i);

        var d = this.dimension(e);

        if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px');

        e.remove();
        this.options.size--;

        var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null;
        var li = this.list.children('li');
        var self = this;

        if (li.size() > 0) {
            var wh = 0, i = this.options.offset;
            li.each(function() {
                self.format(this, i++);
                wh += self.dimension(this, di);
            });

            this.list.css(this.wh, wh + 'px');            
        }

        this.scroll(0,true);
        this.buttons();

    }

Я рекомендую разместить это сразу после реализации remove (). Чтобы получить доступ к самому экземпляру jCarousel с помощью jQuery, вне функций обратного вызова:

var carousel = $("#mycarousel").data("jcarousel");
carousel.removeAndAnimate(1);

Это должно сработать!

Я объединил оба ваших ответа, потому что ни один из них не помог мне ..

Я добавил его в свою пользовательскую функцию инициализации

carousel.removeAndAnimate = function(i) {
            var counter = 1;    
            var itemsHTML = new Array();
            var e = this.get(i);
            children = e.parent().find("li");
            $(e).remove()
            $.each(children,function(){
                if(counter != i) {
                    itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); 
                }
                counter++;
            });
            this.size(this.options.size -1);
            this.reset();
            counter = 1;
            carousel = this;
            $.each(itemsHTML, function(k, v){
                if(v != null) {
                    carousel.add(counter, v[0].innerHTML);
                    counter++;
                }
            });
            this.reload();
        }

Это работает хорошо..

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

$.jcarousel.fn.extend({
    removeAndAnimate: function(index) {

        var itemsHTML = new Array();
        var counter = 0;

        // Me guardo los que quedan
        for(i = 0; i < this.size(); i++)
        {
            if(i != (index - 1))
                itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html();
        }

        // Configuro uno menos y borro todo
        this.size(this.options.size -1);
        this.reset();


        // Vuelvo a cargarlos
        counter = 0;
        for(i = 0; i < itemsHTML.length; i++)
        {
            this.add(counter++, itemsHTML[i]);
        }

        this.reload();
    }
});

ИСПОЛЬЗОВАНИЕ

var carousel = jQuery('#mycarousel').data('jcarousel');
carousel.removeAndAnimate(1);

Я нашел, откуда проблема с белыми ящиками. Метод JCarousel format () не заменяет имена классов, а просто добавляет новые. Я переписал эту функцию, и она у меня хорошо работает:

format: function(e, i) {
        // remove all class names matches 'jcarousel-item' at the start
        $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, '');
        // add new class names  
        var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({
            'float': 'left',
            'list-style': 'none'
        });
        $e.attr('jcarouselindex', i);
        return $e;
}

Моим другим решением было добавить класс к моему загруженному контенту и удалить все элементы, у которых нет этого класса в DOM. После "удаления" carousel.reset() эти элементы систематически теряют добавленный класс.

Затем вы сможете удалить белые квадраты с помощью:

$("li:not(.the_class)").remove();

Добавьте его сразу после функции carousel.add().

Он работает хорошо, и вам даже не нужно добавлять какие-либо функции в свою карусель.

Это «простое в использовании» решение, и при нажатии на кнопки «предыдущий / следующий» может появиться белое поле. Чтобы удалить его, примените то же решение к обратному вызову buttonNextCallback / buttonPrevCallback.