फ्लेक्सस्लाइडर

Question

का निश्चित आकार मैं एपीआई से अलग-अलग आकारों की उत्पाद छवियों को खींचने के लिए फ्लेक्सस्लाइडर का उपयोग कर रहा हूं। मैं उन्हें फ्लेक्सस्लाइडर के <ul> में फेंक रहा हूं, लेकिन ये अलग-अलग छवि आकार अच्छी तरह से नहीं खेलते हैं। फ्लेक्सस्लाइडर अच्छी तरह से एनिमेट करता है जब छवियों की अलग-अलग ऊंचाई होती है, लेकिन मैं अपने लेआउट में फिट करने के लिए फ्लेक्सस्लाइडर की निश्चित ऊंचाई और चौड़ाई रखना चाहता हूं। मैंने पूरी चीज को एक निश्चित आकार <div> में डालने का प्रयास किया है, लेकिन फ्लेक्सस्लाइडर इसे पूरी तरह से अनदेखा करता है और बाकी लेआउट में बहता है। क्या फिट करने के लिए छवियों का आकार बदलने का कोई तरीका है ताकि फ्लेक्सस्लाइडर का आकार बदल न जाए?

Answer 1

मान लें कि आप 200px द्वारा 200px का निश्चित आकार चाहते थे। flexslider.css फ़ाइल में निम्न चयनकर्ताओं को इन गुणों जोड़ें और आप जाने के लिए अच्छा होना चाहिए:

.flexslider { 
    width: 200px; 
    height: 200px; 
} 

.flexslider .slides img { 
    width: 200px; 
    height: 200px; 
} 

आशा इस मदद करता है! नीचे के रूप में, के साथ अलग-अलग आकार के साथ दो स्लाइडर है विशिष्ट div की शैली विकल्प के साथ

Answer 2

सेट का आकार:

<div class="flexcontainer"> 
    <div id="first-slider" class="flexslider" style:"width:100px"> 
     <ul class="slides"> 
     ... 
     </ul> 
    </div> 
    <div id="second-slider" class="flexslider" style:"width:200px"> 
     <ul class="slides"> 
     ... 
     </ul> 
    </div> 
</div> 

Answer 3

वर्ग ".flex-व्यूपोर्ट" के साथ तत्व स्लाइड के कंटेनर है , वह तत्व सेट में लम्बे छवि पर अपनी ऊंचाई को अनुकूलित करता है, यह चाल सभी छवियों की ऊंचाई को 0 पर सेट कर देती है, जो उस मौजूदा स्लाइड में है जो ली तत्व के अंदर है। "फ्लेक्स-सक्रिय-स्लाइड" श्रेणी के साथ है फ्लेक्सस्लाइडर स्क्रिप्ट टॉगल करता है जब स्लाइड्स एक्सचेंज पोजीशन, इस चाल के बारे में एकमात्र बुरी चीज यह है कि नई स्थिति में नई स्लाइड डालने के बाद कक्षा का टॉगल होता है तो एक स्टटर होता है, लेकिन आप कुछ जावास्क्रिप्ट बाइंडिंग का उपयोग करके इसका सामना कर सकते हैं स्लाइड टॉग ट्रिगर करने वाले एक ही ईवेंट में कुछ टॉगल क्लास, सहायक होने में सहायता करें।

.flex-viewport li:not(.flex-active-slide) img{ 

height: 0 !important; 
} 

Answer 4

निकालें लिपि के माध्यम से चौड़ाई

smoothHeight: true, 

से

jQuery('#slider').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: false, 
      prevText: "",   
        nextText: "", 
      slideshow: false, 
        smoothHeight: true, 
        animateHeight: false, 
      sync: "#carousel", 
      start: function(){ 
       jQuery('#slider ul.slides img').show(); 
      }, 
      }); 

Answer 5

बदलें कहना होने के लिए अपने चौड़ाई 400

$('.flex_up').flexslider({ 
    animation: "slide", 
    animationLoop: false, 
    itemWidth: 400, 
    itemMargin: 5, 
});