Flex Slider - Cách thêm các điều khiển tương tự cho hai thanh trượt

Question

Tôi đang sử dụng Flex slide r cho một dự án. Tôi cần phải kiểm soát hai thanh trượt trên một trang với cùng một điều khiển.

Một phần là thanh trượt chính sẽ hiển thị hình ảnh và hình thứ hai là văn bản (trong trường hợp này, nó sẽ được lấy từ "the_excerpt" trong WP).

Về cơ bản, đây là đoạn code tôi đang sử dụng để gọi hai slide trên một trang:

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

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

Bây giờ, tôi cần phải "kết nối" cả trong số họ để cùng kiểm soát, vì vậy khi tôi bấm vào mũi tên, nó sẽ trượt/mờ dần cả hai.

Answer 1

Bạn có thể thực hiện những gì bạn đang cố gắng làm bằng cách bỏ qua các điều khiểnCài đặt người dùng và tạo điều hướng của riêng bạn mà sau đó bạn liên kết với cả hai thanh trượt. Đây là ý tưởng về cách thức (xin lưu ý rằng nó chưa được kiểm tra)

Đánh dấu của bạn sẽ trông giống như thế này. Lưu ý thuộc tính rel trên các liên kết - chúng tôi sẽ sử dụng chúng bên dưới. Cũng lưu ý rằng các giá trị bắt đầu từ 0 - giá trị này khớp với các giá trị cho các trang trình bày (ví dụ: trang trình bày đầu tiên là 0, thứ hai là 1 v.v.).

<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> 

Sau đó, bạn thiết lập cuộc gọi đến 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> 

Về cơ bản cả hai thanh trượt được điều khiển bởi cùng một tập hợp liên kết điều hướng. Hãy suy nghĩ điều này sẽ giúp bạn di chuyển đúng hướng nhưng hét lên nếu bạn cần bất cứ điều gì giải thích.

Answer 2

Vì vậy, tôi đã gặp vấn đề tương tự và nó có thể là một sự kéo thực sự ... Nhưng tôi đã đến một giải pháp nhanh chóng dễ dàng như chiếc bánh. Điều này sẽ làm việc cho 1 trẻ em hoặc một trăm trẻ em kiểm soát bởi trên flexslider cha mẹ. Hoạt động cho mọi hành động. Hy vọng rằng tôi có thể nói chuyện với họ về việc sửa lỗi này và cho phép một loạt các đối tượng jquery có phương thức đồng bộ hó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 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> 

Sau đó, để javascript của bạn chỉ chạy.

/** 
* 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); 
    } 
} 

Hy vọng điều này sẽ hữu ích !! Xin lưu ý tôi đã thêm điều này khiến nó gần giống với những gì tôi đã cố gắng làm, Có vẻ như tôi không phải là người duy nhất tìm cách sử dụng nhiều đồng bộ trong flexslider.

Answer 3

Tôi muốn xác nhận rằng giải pháp của MrBandersnatch hoạt động. Tôi đang đăng các thay đổi của tôi về mã của anh ấy dưới đây để cho thấy một biến thể của công việc của anh ấy.

/** 
* 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

Đối với Flexslider 2, bạn có thể sử dụng tùy chọn sync: "selector". Chỉ cần đặt một trong các thanh trượt 'controlNav: false.

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

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

Answer 5

Một giải pháp tôi tìm thấy là tạo cho bạn điều hướng biểu ngữ tùy chỉnh. Vị trí của nó và phong cách nó tuy nhiên bạn thích. Điều quan trọng duy nhất là có một cách để nhắm mục tiêu nó. Trong ví dụ này, tôi đã sử dụng ID của thanh trượt tiếp theo và thanh trượt-trước.

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

Bây giờ, hãy tạo hai thanh trượt flexer và định vị chúng theo cách bạn muốn trong css. Tôi sẽ đặt tiêu đề cho biểu ngữ chính .flexslider và chú thích .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> 

Bây giờ cho phép đơn giản để làm cho nó hoạt động. Kích hoạt cả hai trang trình bày trong tệp javascript của bạn và ẩn biểu ngữ điều hướng và biểu ngữ của phụ đề trong css. Bằng cách đó, điều hướng tùy chỉnh của bạn sẽ là các điều khiển duy nhất hiển thị. Sau đó, chỉ cần tạo một hàm để kích hoạt cả thanh trượt điều hướng và điều hướng của điều hướng khi nhấp. Ví dụ dưới đây. Hàm jQuery .trigger là trình thủ thuật ở đây. Xem tài liệu tại đây: 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'); 
    }) 
});