Добавить или удалить слайды, используя jQuery FlexSlider

Question

Можно ли добавлять или удалять слайды во время выполнения, используя FlexSlider ?

Answer 1

Новая версия FlexSlider 2 уже поддерживает эти методы.

slider.addSlide(obj, pos) принимает два параметра: объект string / jQuery и индекс.slider.removeSlide(obj) принимает один параметр: либо удаляемый объект, либо индекс.

Answer 2

Это именно то, что я увидел после просмотра этой темы.

Слайдер и объект карусели могут быть созданы и добавлены примерно так:

$('#slider').data('flexslider').addSlide("");

$('#carousel').data('flexslider').addSlide("");

Нажатие на карусель для прокрутки к определенному изображению не работает, но кнопки прокрутки на обеих работают.

Answer 3

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

JQuery код:

$("#add2").change(function(event)
    {
          var fuData = document.getElementById('add2');
          var files = event.target.files;
           for(var i = 0; i< files.length; i++)
        {
            var file = files[i];
            var filename = file.name;
            var Extension =
filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
            if(Extension == 'png' || Extension == 'jpg' || Extension == 'jpeg' || Extension == 'svg'){
                var reader = new FileReader();
                reader.onload = function(e)
                {
                      var img = document.createElement("IMG");
                      img.src = e.target.result;

                      div = "<li><img src="+img.src+" /></li>";
                      $('.flexslider').data('flexslider').addSlide($(div));

                }
            }

            else if (Extension == 'mp4')
            {
                var reader = new FileReader();
                reader.onload = function(event){
                    var video = document.createElement("video");
                    video.src = event.target.result;

                    div = " <li><video src="+video.src+" width='100%' height='500' controls></video></li>";
                    $('.flexslider').data('flexslider').addSlide($(div));
                }
            }
            else
            {
              alert(filename+' '+'is not in supported format');
              $("#add2").val('');
            }
            reader.readAsDataURL(file);
        }
    });

function remove()
{
  var slider = $('.flexslider').data('flexslider');
  slider.removeSlide(slider.currentSlide);
}

HTML код:

<input type="file" id= "add2" multiple>
<button id="remove" onclick="remove()" value="Remove">Remove</button>

в соответствии с кодом, с помощью файла обзора вы можете выбрать несколько изображений и видео для добавления в Flexslider, а с помощью кнопки удаления вы можете удалить текущий слайд. Я также добавил некоторую проверку, поэтому в изображение будет добавлено только изображение или видео. слайдер. Он выдаст предупреждение, если вы выберете любое другое расширение. Я создал этот код в соответствии с моим требованием, вы можете настроить его в соответствии с вашими требованиями.

Answer 4

Реальная реализация FlexSlider не поддерживает его.

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