Dynamic add slide in flexslider carousel

问题

HTML Code

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

jQuery code

Here I append div dynamically in flexslider. It append successfully but got Next and Previous button disabled.

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

My Question is how to add div dynamically in flexslider with proper working mode?

Thanks for help.

回答1:

Try this code:

Working Demo

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>

$('#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));

回答2:

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

Both of these work. The image needs to be converted in the code behind to Convert.ToBase64String if you're using byte[] for your image file data. then in the src, src='data:image/png;base64,' + theNameOfYourByteStream.

Neither of them will work when there is no listItems in the carousel or slider. You will need to initalize the slider and carousel after you add a list item>img to it.

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

Then you'll need to run the init of the flexslider

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

The functionality is the same for the flexslider, but the enlarge, or focus on the image in the "slider" does not work with the new slides, when you click on the new slide in the "carousel".

A jsFiddle for the click focus event not happening already exists. 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();
});

来源：https://stackoverflow.com/questions/27542147/dynamic-add-slide-in-flexslider-carousel

标签

jquery

slider

slideshow

flexslider