我正在使用Flex slide r用於一個項目。我需要使用相同的控件在一頁上控制兩個滑塊。Flex滑塊 - 如何添加兩個滑塊的相同控件
一個部分是主滑塊，將顯示的圖像，而第二個是文本（在這種情況下，它將從「the_excerpt」在WP採取）。
基本上，這是我使用調用一個頁面上有兩個幻燈片代碼：
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider();
});
現在，我需要他們兩個「連接」到相同的控制，所以當我點擊箭頭，它會滑動/淡入淡出。
你可以做到你想通過開溝controlsContainer設置和創建自己的導航，你然後鏈接到兩個滑塊做什麼。這裏有一個如何的想法（請注意這是未經測試）
你的標記會是這個樣子。請注意鏈接上的rel屬性 - 我們將在下面使用它們。還要注意，值從0開始 - 這與幻燈片的值相匹配（例如，第一張幻燈片是0，第二張是1等）。
<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>
然後你設置了呼叫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>
基本上兩個滑塊由同一套導航鏈接的控制。認爲這應該讓你朝着正確的方向前進，但是如果你需要任何解釋的話，你會大聲呼喊。
所以，我一直有同樣的問題，它可以是一個真正的阻力...但我已經來到了一個快速的解決方案，是易如反掌。這將適用於父母flexslider控制的1個孩子或100個孩子。適用於所有行爲。希望我可以讓他們解決這個問題，並允許jquery對象的數組在那裏同步方法。
<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>
然後爲您的JavaScript運行此。
/**
* 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);
}
}
希望這有助於！請注意我添加了這個原因，它非常類似於我想要做的，看起來像我不是唯一一個在flexslider中使用多個同步的人。
我想確認MrBandersnatch的解決方案是否有效。我在下面發佈我的代碼更改，以顯示他的工作變化。
/**
* 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);
}
}
}）;
對於Flexslider 2，你可以使用sync: "selector"選項。只需設置其中一個滑塊「controlNav: false」即可。
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlNav: true,
sync: '#secondary-slider'
});
$('#secondary-slider').flexslider({
controlNav: false
});
});
我發現的一個解決方案是創建自己的自定義橫幅導航。不管你喜歡什麼，都可以定位它的樣式。唯一重要的是有辦法瞄準它。在這個例子中，我使用了一個ID爲slider-next和slider-prev。
<ul>
<li><a id="slider-next" href="#">Next</a></li>
<li><a id="slider-prev" href="#">Prev</a></li>
</ul>
現在，創建兩個flexer滑塊並將它們放置在您的css中。我將標題爲我的主要banner.flexslider和我的標題.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>
現在爲簡單的魔法，使其工作。在JavaScript文件中激活這兩個幻燈片，並在css中隱藏橫幅和標題的導航控件。這樣，您的自定義導航將成爲唯一可見的控件。然後，創建一個函數來觸發滑塊和標題的控制導航點擊。下面的例子。 .trigger jQuery函數就是這裏的魔術。看看它的文檔在這裏：
//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');
})
});
如何把相同的方向導航？ – 2014-02-12 06:10:14