Is there a destroy method for FlexSlider

后端 未结 3 950
走了就别回头了
走了就别回头了 2021-01-03 01:36

I am trying to reinitialize FlexSlider with out page refresh when a new gallery listing is called asynchronously.

I would think the routine below would work but it d

相关标签:
3条回答
  • 2021-01-03 01:55

    i'm using different approach i.e.

    you've started one flexslider:

    
        $('#element).flexslider({
          animation: "slide",
          controlNav: false,
          directionNav: true
        });
    
    

    when I want to change slides in previously created slider and restart it, id do following things:

    • creating temporaty div:

      $('#element).before('
          <div id="element_temp" class="flexslider"></div>
      ');
      
    • delete div with previously created slider

      $('#element).remove();
      
    • insert new list of slides into temporary div:

      var html = `
      <ul class='slides">
      <li><img src="link to image" /></li>
      <li><img src="link to image" /></li>
      <li><img src="link to image" /></li>
      </ul>`;
      $('#element_temp').html(html);
      
    • start flexslider on temp div

      $('#element_temp').flexslider({
        animation: "slide",
        controlNav: false,
        directionNav: true
      });
      
    • change div ID from element_temp to element

      $('#element_temp').attr('id','element');
      

    and it works with multiple flexliders

    0 讨论(0)
  • 2021-01-03 01:57

    Rob i investigated this and find the solution

    You need to modify your functions like this

    function flexInit() {
        $('.flexslider').flexslider({
            animation: "slide",
            controlsContainer: ".paginator",
            manualControls: 'a',
            after: function(slider){
                if(slider.atEnd == true)    {
                    slider.addSlide(galBuild());
                }
            }
        });
    }
    
    
    function galBuild() {
       $.getJSON("/gallery/next/"+galID, function (data) {
        var results = data.objects;
        var i = 0;
        $.each(results, function () {
           return ('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>');
        });
    
       });
    }
    
    flexInit();
    

    Also you need to do some cosmetic changes in flexSlider.js file in slider.update function. right now its not checking the position variable if it comes undefined, so you will have to check this as well.

    0 讨论(0)
  • 2021-01-03 01:58

    The most easy way is to remove the flexscroll from element dataset

    function flexInit() {
        $('.flexslider').flexslider({
            animation: "slide",
            controlsContainer: ".paginator",
            manualControls: 'a',
            after: function(slider){
                if(slider.atEnd == true)    {
                    slider.addSlide(galBuild());
                }
            }
        });
    }
    //this remove flexslider form element dataset
    $('.flexslider').removeData("flexslider");
    

    and now you are free to call

    flexInit();
    

    and your flexslider will be recreated.

    0 讨论(0)
提交回复
热议问题