Динамическое добавление слайда в карусели flexslider

Question

HTML-код

<div class="flexslider carousel mtop20">
    <ul class="slides col-md-12" id="div_portion">
    </ul>
</div>

код JQuery

Здесь я добавляю div динамически в flexslider. Он успешно добавлен, но кнопка Next и Previous отключена.

$div = "<li> Content here </li>";
$("#div_portion").append($div);
slider = $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth : 210,
    itemMargin: 5,
    minItems: 1
  });

Мой вопрос, как динамически добавить div в flexslider с правильным режимом работы?

Спасибо за помощь.

Answer 1

Попробуйте этот код:

Рабочая Демо

Html

<div id="slider" class="flexslider carousel mtop20">
    <ul class="slides col-md-12" id="div_portion">
    </ul>
</div>
<a id="add" href="javascript:void(0);">Add</a>

JS

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
});

$("#add").click(function(){
    div = "<li> How are you</li>";
    $('#slider').data('flexslider').addSlide($(div));

});

// Custom stuff
var saved1;
saved1 = $('<li>Hello</li>');
$('#slider').data('flexslider').addSlide($(saved1));
saved1 = $('<li>World</li>');
$('#slider').data('flexslider').addSlide($(saved1));

Answer 2

 $('#slider').data('flexslider').addSlide(ListItem);  
 $('#carousel').data('flexslider').addSlide(ListItem);

Обе эти работы. Изображение должно быть преобразовано в коде позади в Convert.ToBase64String, если вы используете byte[] для данных файла изображения. затем в src, src='data:image/png;base64,' + theNameOfYourByteStream.

Ни один из них не будет работать, если в карусели или слайдере нет элементов списка. Вам нужно будет инициализировать слайдер и карусель после добавления элемента списка> img к нему.

$('#nameOfYour<ul>').append(<li><img></li>)

Тогда вам нужно будет запустить инициацию flexslider

    var carousel = $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
    });

Функциональность гибкого слайдера одинакова, но увеличение или фокусировка на изображении в "слайдере" не работает с новыми слайдами, когда вы нажимаете на новый слайд в "карусели".

JsFiddle для события фокуса щелчка, которое не происходит, уже существует. http://jsfiddle.net/XXzpW/5/

// From example page:
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 100,
    itemMargin: 5,
    asNavFor: '#slider'
});

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
});

// Custom stuff
var saved1;
var saved2;

function removeRose() {
    saved1 = $('#carousel').find('.rose');
    saved2 = $('#slider').find('.rose');
    $('#carousel').data('flexslider').removeSlide($('.rose'));
    $('#slider').data('flexslider').removeSlide($('.rose'));
};

function addRose() {
    $('#carousel').data('flexslider').addSlide(saved1);
    $('#slider').data('flexslider').addSlide($(saved2));
};

$('#menu').on('click', 'li:first', function () {
    removeRose();
});

$('#menu').on('click', 'li:last', function () {
    addRose();
});