De compensation et d'ajouter des diapositives / Reinitialising flexslider?

Comment puis-je supprimer toutes les diapositives de flexslider et d'ajouter de nouvelles diapositives?

Ou comment puis-je la détruire et la reintialise flexslider?

Fondamentalement, je veux réinitialiser flexslider de toute façon.

//Create hotel image array
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 4,
    asNavFor: '#slider'
});

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

Des liens vers flexslider:

EDIT:

PLUNKR LIEN: LIEN

J'ai téléchargé cette version qui est censé avoir une méthode destroy:
https://github.com/woothemes/FlexSlider/pull/716

Je pensais que ce serait la réponse, mais pour une raison quelconque, mon carrousel semble ne plus fonctionner après le chargement dans une deuxième série, comme si je n'avais pas réinitialiser une fois de plus?

  • Bien pour l'instant je suis tout simplement en appelant flexslider, à chaque fois, la galerie de l'élément de liste est rafraîchie. C'est évidemment provoque des résultats inhabituels. Il ne semble pas y avoir beaucoup de documentation sur la façon de le faire. Je vais l'installation d'un plunkr bientôt.
  • J'ai ajouté un plunkr lien maintenant, prenez une look.
InformationsquelleAutor Malcr001 | 2013-06-17
  1. 6

    Étape 1 - supprimer des diapositives existantes:

    var slider = $('.flexslider');
while (slider.data('flexslider').count > 0) 
                    slider.data('flexslider').removeSlide(0);

    Étape 2 - ajouter de nouvelles diapositives:

    slider.data('flexslider').addSlide('<li>Hello world!</li>');
slider.data('flexslider').addSlide('<li>This is awsome</li>');

    Mise à JOUR!

    Étape 3 - définir le focus sur la première diapositive (omettre cette étape a abouti à l'obtention de vide glisse de temps à autre)

    slider.flexslider(0);
    • Cela provoque mine de ne plus boucle
    InformationsquelleAutor Jan W
  2. 1

    Ok donc après de creuser autour, il s'avère que flexslider a maintenant une méthode destroy, mais il m'a obligé à utiliser la démo sur la page github de le faire fonctionner. J'ai créé un plunker qui ajoute et supprime un flexslider carrousel LIEN

    Voir aussi ici: LIEN

    • Exactement ce dont j'avais besoin 🙂
    • juste au cas des personnes avec des problèmes similaires bosse ici ... je suis en utilisant FlexSlider v2.3.0 et .flexslider("détruire") ne semble pas être fonctionne plus. L'autre solution présentée ci-dessous (par suppression et recréation de l'élément) fonctionne, mais j'ai utilisé une solution plus facile //this remove flexslider form element dataset $('.flexslider').removeData("flexslider"); de Référence stackoverflow.com/questions/11248283/...
    InformationsquelleAutor Malcr001
  3. 0

    Vous devez inclure un lien vers flexslider dans l'OP, ce n'est pas celui que j'ai utilisé /avoir accès à du haut de ma tête. Cela dit, généralement de bons plugins ont tendance à venir avec une méthode destroy. La première chose que je voudrais essayer serait de voir si une méthode destroy est défini sur flexslider, comme suit:

    $('#slider').flexslider("destroy");

    EDIT:

    Ressemble à ce fil a quelques bons conseils /code vers le bas pour essayer - https://github.com/woothemes/FlexSlider/issues/78

    • Ajout des liens pertinents. Détruire ne semble pas faire quoi que ce soit.
    • Édité ma réponse avec un lien vers un flexslider question sur github qui peuvent vous aider.
    • J'ai ajouté un plunkr lien qui utilise le "détruire" la méthode. Veuillez prendre un coup d'oeil. Peut-être trouver un moyen de supprimer toutes les images de diapositives et de l'ajout de l'image de diapositives est une meilleure façon?
    InformationsquelleAutor streetlogics
  4. 0

    Il est préférable de suivre cette. Fondamentalement, c'lancer 1 curseur. Ensuite, si vous souhaitez réinitialiser, puis enlever la première curseur html/données et tous puis commencer à ajouter de nouveaux et de l'initier.

    vous avez commencé une flexslider:

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

    quand je veux changer de diapositives précédemment créé curseur et le redémarrer, l'id de faire les choses suivantes:

    • la création de temporaty div:

      $('#element').before('
    <div id="element_temp" class="flexslider"></div>
');

    • supprimer div précédemment créé curseur

      $('#element').remove();

    • insérer une nouvelle liste de diapositives temporaire 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);

    • commencer flexslider sur temp div

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

    • changement div ID de element_temp à l'élément

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