Flex Slider - Jak dodać te same elementy sterujące dla dwóch suwaków

Question

Używam Flex slide r dla jednego projektu. Muszę kontrolować dwa suwaki na jednej stronie z tymi samymi kontrolkami.

Jedna część to główny suwak, który pokaże obrazy, a drugi to tekst (w tym przypadku zostanie pobrany z "the_excerpt" w WP).

Zasadniczo, jest to kod używam zadzwonić dwa slajdy na jednej stronie:

$(window).load(function() { 
    $('#main-slider').flexslider({ 
     animation: 'slide', 
     controlsContainer: '.flex-container' 
    }); 

    $('#secondary-slider').flexslider(); 
    }); 

Teraz trzeba „połączyć” oboje do samych kontroli, więc po kliknięciu na strzałkę, to przesunie/zetrze oba z nich.

Answer 1

Możesz wykonać to, co chcesz zrobić, wyłączając ustawienie controlsContainer i tworząc własną nawigację, która następnie zostanie połączona z obydwoma suwakami. Oto pomysł na to, jak (należy pamiętać, że nie został przetestowany)

Twój znacznik wyglądałby tak. Zwróć uwagę na atrybut rel na linkach - użyjemy ich poniżej. Zwróć też uwagę, że wartości zaczynają się od 0 - to pasuje do wartości dla slajdów (np. Pierwszy slajd to 0, drugi to 1 itd.).

<a rel="0" class="slide_thumb" href="#">slide link 1</a> 
<a rel="1" class="slide_thumb" href="#">slide link 2</a> 
<a rel="2" class="slide_thumb" href="#">slide link 3</a> 
<a rel="3" class="slide_thumb" href="#">slide link 3</a> 

<div id="main-slider" class="flexslider"> 
<ul class="slides"> 
    <li> 
     <img src="image1.jpg" /> 
    </li> 
    <li> 
     <img src="image2.jpg" /> 
    </li> 
    <li> 
     <img src="image3.jpg" /> 
    </li> 
    <li> 
     <img src="image4.jpg" /> 
    </li> 
</ul> 
</div> 

<div id="secondary-slider" class="flexslider"> 
<ul class="slides"> 
    <li> 
     <p>Text 1</p> 
    </li> 
    <li> 
     <p>Text 2</p> 
    </li> 
    <li> 
     <p>Text 3</p> 
    </li> 
    <li> 
     <p>Text 4</p> 
    </li> 
</ul> 

Następnie należy skonfigurować połączenie do flexslider

<script type="text/javascript" charset="utf-8"> 
jQuery(document).ready(function($) { 

$('#main-slider').flexslider({ 
    animation: "slide", 
    slideToStart: 0, 
    start: function(slider) { 
     $('a.slide_thumb').click(function() { 
      $('.flexslider').show(); 
      var slideTo = $(this).attr("rel")//Grab rel value from link; 
      var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; 
      if (slider.currentSlide != slideToInt) { 
       slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
      } 
     }); 
    } 

}); 

$('#secondary-slider').flexslider({ 
    animation: "slide", 
    slideToStart: 0, 
    start: function(slider) { 
     $('a.slide_thumb').click(function() { 
      $('.flexslider').show(); 
      var slideTo = $(this).attr("rel")//Grab rel value from link; 
      var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; 
      if (slider.currentSlide != slideToInt) { 
       slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
      } 
     }); 
    } 

}); 

}); 
</script> 

Zasadniczo oba suwaki są kontrolowane przez ten sam zestaw linków nawigacyjnych. Pomyśl o tym, że powinieneś podążać we właściwym kierunku, ale krzyczeć, jeśli potrzebujesz czegoś wyjaśnionego.

Answer 2

Tak, miałem ten sam problem i może to być prawdziwy cios ... Ale doszedłem do szybkiego rozwiązania, które jest łatwe jak ciasto. To zadziała dla 1 dziecka lub setki dzieci kontrolowanych przez rodzica Flexslider. Działa dla wszystkich działań. Mam nadzieję, że uda mi się porozmawiać z nimi na naprawienie tego i zezwolenie na szereg obiektów jQuery dla metody synchronizacji.

<div id="main-slider" class="flexslider"> 
    <ul class="slides"> 
    <li><img src="image1.jpg" /></li> 
    <li><img src="image2.jpg" /></li> 
    <li><img src="image3.jpg" /></li> 
    <li><img src="image4.jpg" /></li> 
    </ul> 
</div> 

<div class="flexslider_children"> 
    <ul class="slides"> 
    <li><p>Text 1</p></li> 
    <li><p>Text 2</p></li> 
    <li><p>Text 3</p></li> 
    <li><p>Text 4</p></li> 
    </ul> 
</div> 

<div class="flexslider_children"> 
    <ul class="slides"> 
    <li><p>Text 1</p></li> 
    <li><p>Text 2</p></li> 
    <li><p>Text 3</p></li> 
    <li><p>Text 4</p></li> 
    </ul> 
</div> 

Następnie dla twojego javascript po prostu to uruchom.

/** 
* Create the children flexsliders. Must be array of jquery objects with the 
* flexslider data. Easiest way is to place selector group in a var. 
*/ 
var children_slides = $('.flexslider_children').flexslider({ 
    'slideshow': false, // Remove the animations 
    'controlNav' : false // Remove the controls 
}); 

/** 
* Set up the main flexslider 
*/ 
$('.flexslider').flexslider({ 
    'pauseOnHover' : true, 
    'animationSpeed': 2000, 
    'slideshowSpeed': 5000, 
    'initDelay': 3000, 
    // Call the update_children_slides which itterates through all children slides 
    'before' : function(slider){ // Hijack the flexslider 
    update_children_slides(slider.animatingTo); 
    } 
}); 

/** 
* Method that updates children slides 
* fortunately, since all the children are not animating, 
* they will only update if the main flexslider updates. 
*/ 
function update_children_slides (slide_number){ 
    // Iterate through the children slides but not past the max 
    for (i=0;i<children_slides.length;i++) { 
    // Run the animate method on the child slide 
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number); 
    } 
} 

Mam nadzieję, że to pomoże! Uwaga Dodałem to, ponieważ bardzo przypomina to, co próbowałem zrobić, Wydaje się, że nie jestem jedynym, który chce korzystać z wielu synchronizacji w flexslider.

Answer 3

Chcę potwierdzić, że rozwiązanie MrBandersnatch działa. Zamieszczam moje zmiany w jego kodzie poniżej, aby pokazać wariację jego pracy.

/** 
* Create the children flexsliders. Must be array of jquery objects with the 
* flexslider data. Easiest way is to place selector group in a var. 
*/ 
var children_slides = $('.flexslider_children').flexslider({ 
    slideshow: false, // Remove the animations 
    controlNav : false, // Remove the controls 
    animationSpeed: 1200, 
    itemWidth: 175, 
    itemMargin: 20, 
    animation: 'linear', 
    easing: 'swing', 
    animationLoop: false, 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize() 
}); 


/** 
* Set up the main flexslider 
*/ 
$('#flexslider_index_band_1').flexslider({ 
    pauseOnHover : true, 
    animationSpeed: 1200, 
    slideshow: false, 
    initDelay: 3000, 
    directionNav: true, 
    animation: 'linear', 
    easing: 'swing', 
    animationLoop: false, 
    controlsContainer: '.paginated_nav', 
    directionNav: true, 
    prevText: '', 
    nextText: '', 
    itemWidth: 175, 
    itemMargin: 20, 
    sync: '#flexslider_index_band_2', 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize(), // use function to pull in initial value 
    // Call the update_children_slides which itterates through all children slides 
    before : function(slider){ // Hijack the flexslider 
     update_children_slides(slider.animatingTo); 
    } 
}); 

/** 
* Method that updates children slides 
* fortunately, since all the children are not animating, 
* they will only update if the main flexslider updates. 
*/ 
function update_children_slides (slide_number){ 
    // Iterate through the children slides but not past the max 
    for (i=0;i<children_slides.length;i++) { 
    // Run the animate method on the child slide 
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number); 
    } 
} 

});

Answer 4

Dla Flexslider 2 można użyć opcji sync: "selector". Wystarczy ustawić jeden z suwaków "controlNav: false.

$(window).load(function() { 
    $('#main-slider').flexslider({ 
     animation: 'slide', 
     controlNav: true, 
     sync: '#secondary-slider' 
    }); 

    $('#secondary-slider').flexslider({ 
     controlNav: false 
    }); 
}); 

Answer 5

Jednym z rozwiązań, które znalazłem, było stworzenie własnej, niestandardowej nawigacji banerowej. Ustaw go i stylizuj, jak chcesz. Jedyną ważną rzeczą jest znalezienie sposobu na jej celowanie. W tym przykładzie użyłem identyfikatora suwak-następny i suwak-prev.

<ul> 
    <li><a id="slider-next" href="#">Next</a></li> 
    <li><a id="slider-prev" href="#">Prev</a></li> 
</ul> 

Teraz utwórz dwa elastyczne suwaki i umieść je tak, jak chcesz w swoich css. Będę zatytułowany mój główny banner .flexslider i mój podpis .captions.

<div class="flexslider"> 
    <ul class="slides"> 
    <li><img src="/assets/images/banner-example.png" width="893" height="377"></li> 
    <li><img src="/assets/images/banner-example-2.png" width="893" height="377" /></li> 
    <li><img src="/assets/images/banner-example-3.png" width="893" height="377" /></li> 
    <li><img src="/assets/images/banner-example-4.png" width="893" height="377" /></li> 
    </ul> 
</div> 
<!-- Some other place in the code --> 
<div class="captions"> 
    <ul id="info" class="slides"> 
    <li> 
     <h2>Example Banner 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    </ul> 
</div> 

Teraz za prostą magię, aby działało. Aktywuj oba slajdy w pliku javascript i ukryj kontrolki nawigacyjne banera i podpisu w css. W ten sposób Twoja niestandardowa nawigacja będzie jedyną widoczną kontrolką. Następnie po prostu utwórz funkcję, która uruchamia zarówno suwak, jak i klawisze kontrolne podpisu po kliknięciu. Przykład poniżej. Funkcja .trigger jQuery jest tym, co tu robi czarodziejstwo. Zapoznaj się z jego dokumentacją tutaj: http://api.jquery.com/trigger/

//Load slider after .ready() 
$(window).load(function(){ 

    //Activate Both Banner and Caption slides 
    $('.flexslider').flexslider({ 
     controlNav: false, 
    }); 

    $('.captions').flexslider({ 
     controlNav: false, 
    }); 

    //Sink Control Navs 
    $('#slider-next').click(function(){ 
     $('.flexslider .flex-next').trigger('click'); 
     $('.captions .flex-next').trigger('click'); 
    }); 

    $('#slider-prev').click(function(){ 
     $('.flexslider .flex-prev').trigger('click'); 
     $('.captions .flex-prev').trigger('click'); 
    }) 
});