फ्लेक्स स्लाइडर - दो स्लाइडर

Question

के लिए समान नियंत्रण कैसे जोड़ें I प्रोजेक्ट के लिए Flex slide r का उपयोग कर रहा हूं। मुझे एक ही नियंत्रण के साथ एक पृष्ठ पर दो स्लाइडर्स को नियंत्रित करने की आवश्यकता है।

एक हिस्सा मुख्य स्लाइडर है जो छवियां दिखाएगा, और दूसरा टेक्स्ट है (इस मामले में इसे WP में "the_excerpt" से लिया जाएगा)।

मूल रूप से, इस कोड को मैं एक पृष्ठ पर दो स्लाइड कॉल करने के लिए उपयोग कर रहा हूँ है:

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

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

अब, मैं उन दोनों को एक ही नियंत्रण करने के लिए "कनेक्ट" करने की जरूरत है, इसलिए जब मैं तीर पर क्लिक करें, यह दोनों को स्लाइड/फीका होगा।

Answer 1

आप नियंत्रण को हटाने और अपनी खुद की नेविगेशन बनाने के द्वारा जो कुछ भी करने के लिए प्रयास कर रहे हैं उसे पूरा कर सकते हैं जिसे आप दोनों स्लाइडर्स से लिंक करते हैं। यहां एक विचार है कि (कृपया ध्यान दें कि यह अवांछित है)

आपका मार्कअप ऐसा कुछ दिखाई देगा। लिंक पर रिला विशेषता पर ध्यान दें - हम उन्हें नीचे उपयोग करेंगे। यह भी ध्यान रखें कि मान 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> 

तो फिर तुम

<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 करने के लिए कॉल की स्थापना की। सोचो कि आपको सही दिशा में आगे बढ़ना चाहिए, लेकिन यदि आपको कुछ भी समझाया गया है तो चिल्लाओ।

Answer 2

तो, मुझे एक ही समस्या है और यह असली ड्रैग हो सकता है ... लेकिन मैं एक त्वरित समाधान में आया हूं जो पाई के रूप में आसान है। यह माता-पिता flexslider पर नियंत्रित 1 बच्चे या सौ बच्चों के लिए काम करेगा। सभी कार्यों के लिए काम करता है। उम्मीद है कि मैं उन्हें ठीक करने और सिंक विधि के लिए 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> 

फिर आपके जावास्क्रिप्ट के लिए इसे चलाएं।

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

आशा है कि इससे मदद मिलती है !! कृपया ध्यान दें कि मैंने यह कारण जोड़ा है जो मैं करने की कोशिश कर रहा था, जैसा दिखता है, ऐसा लगता है कि मैं फ्लेक्सस्लाइडर में एकाधिक सिंक का उपयोग करने वाला अकेला नहीं हूं।

Answer 3

मैं पुष्टि करना चाहता हूं कि श्रीबैंडर्सनैच का समाधान काम करता है। मैं अपने काम की विविधता दिखाने के लिए नीचे दिए गए कोड के अपने परिवर्तन पोस्ट कर रहा हूं।

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

फ्लेक्सस्लाइडर 2 के लिए, आप sync: "selector" विकल्प का उपयोग कर सकते हैं। बस स्लाइडर 'controlNav: false में से एक सेट करें।

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

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

Answer 5

एक समाधान जो मैंने पाया वह आपको कस्टम बैनर नेविगेशन बनाना था। इसे स्थिति दें और इसे स्टाइल करें हालांकि आपको पसंद है। एकमात्र महत्वपूर्ण बात यह है कि इसे लक्षित करने का एक तरीका है। इस उदाहरण में मैंने स्लाइडर-अगले और स्लाइडर-prev की आईडी का उपयोग किया।

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

अब, दो फ्लेक्सर स्लाइडर्स बनाएं और उन्हें स्थिति दें, हालांकि आप अपने सीएसएस में चाहेंगे। मैं अपने मुख्य बैनर का शीर्षक दूंगा। फ्लेक्सस्लाइडर और मेरा कैप्शन। कैप्शन।

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

अब इसे सरल बनाने के लिए सरल जादू के लिए। अपनी जावास्क्रिप्ट फ़ाइल में दोनों स्लाइड्स को सक्रिय करें और सीएसएस में बैनर और कैप्शन के एनएवी नियंत्रण को छुपाएं। इस तरह आपकी कस्टम नेविगेशन एकमात्र नियंत्रण दिखाई देगी। फिर, क्लिक पर स्लाइडर और कैप्शन के नियंत्रण नौसेना दोनों को ट्रिगर करने के लिए बस एक फ़ंक्शन बनाएं। नीचे उदाहरण। .trigger jQuery फ़ंक्शन यहां जादूगर क्या करता है। यहां अपने दस्तावेज देखें: 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'); 
    }) 
});