स्लिम कैरोसेल आइटम

Question

के बीच रिक्त स्थान जोड़ने के लिए मैं दो स्लिम कैरोसेल आइटमों के बीच स्थान जोड़ना चाहता हूं, लेकिन पैडिंग के साथ जगह नहीं चाहता, क्योंकि यह मेरे तत्व आकार को कम कर रहा है (और मुझे वह नहीं चाहिए)।

$('.single-item').slick({ 
 
     initialSlide: 3, 
 
     infinite: false 
 
    });

.slick-slider { 
 
    margin:0 -15px; 
 
} 
 
.slick-slide { 
 
    padding:10px; 
 
    background-color:red; 
 
    text-align:center; 
 
    margin-right:15px; 
 
    margin-left:15px; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script> 
 
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12" style="background-color:gray;"> 
 
      <div class="slider single-item" style="background:yellow"> 
 
       <div>1</div> 
 
       <div>2</div> 
 
       <div>3</div> 
 
       <div>4</div> 
 
       <div>5</div> 
 
       <div>6</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

किसी तरह मैं दोनों तरफ से अंतरिक्ष हो रही है, मुझे लगता है कि दूर करने के लिए कोशिश कर रहा हूँ।

Answer 1

हाँ, मुझे समस्या के समाधान का समाधान मिला है।

• एक दोनों तरफ से अतिरिक्त चौड़ाई (जो हम दोनों पक्षों से आइटम अंतरिक्ष जोड़ने के लिए उपयोग कर सकते हैं) के साथ स्लाइडर बॉक्स बनाएँ।
• उचित चौड़ाई के साथ इनर मद सामग्री बनाएं दोनों पक्षों से & मार्जिन (यह अपने वास्तविक आवरण आकार होना चाहिए)
• प्लगइन के पर हो गया

Answer 2

छद्म वर्गों का उपयोग करने की कोशिश करें: प्रथम-बच्चे &: अंतिम बच्चे को पहले & अंतिम बच्चे से अतिरिक्त पैडिंग निकालने का प्रयास करें।

स्लिम स्लाइडर के उत्पन्न कोड का निरीक्षण & उस पर पैडिंग को हटाने का प्रयास करें।

आशा है, इससे मदद मिलेगी !!!

Answer 3

छद्म वर्गों की सहायता से पहले और अंतिम बच्चे से मार्जिन हटा दिए गए, और स्क्रिप्ट में adaptive height सही इस्तेमाल किया। इस fiddle

एक और Demo

$('.single-item').slick({ 
     initialSlide: 3, 
     infinite: false, 
     adaptiveHeight: true 
    }); 

Answer 4

आप स्लाइड + के बीच एक बड़ा अंतरिक्ष स्लाइड की चौड़ाई कम करने के लिए नहीं चाहते हैं, तो इसका मतलब है आप कम स्लाइड दिखाने के लिए होगा की कोशिश करो। ऐसे मामले में अभी कम स्लाइड

$('.single-item').slick({ 
     initialSlide: 3, 
     infinite: false, 
     slidesToShow: 3 
    }); 

एक अन्य विकल्प स्लाइड को दिखाने के लिए की राशि के लिए की स्थापना के बिना सीएसएस द्वारा एक स्लाइड की चौड़ाई को परिभाषित करने के लिए है दिखाने के लिए एक सेटिंग जोड़ें।

Answer 5

/* the slides */ 
    .slick-slide { 
    margin: 0 27px; 
    } 
    /* the parent */ 
    .slick-list { 
    margin: 0 -27px; 
    } 

यह समस्या मुद्दा (# 582) के रूप में रिपोर्ट github, btw इस समाधान का भी उल्लेख किया गया है, (https://github.com/kenwheeler/slick/issues/582)

Answer 6

उदाहरण के लिए: इस डेटा-एटीआर को अपने प्राथमिक स्लिक div में जोड़ें: डेटा-स्पेस = "7"

    $('[data-space]').each(function() { 
         var $this = $(this), 
          $space = $this.attr('data-space'); 

         $('.slick-slide').css({ 
          marginLeft: $space + 'px', 
          marginRight: $space + 'px' 
         }); 

         $('.slick-list').css({ 
          marginLeft: -$space + 'px', 
          marginRight: -$space/2 + 'px' 
         }) 
        }); 

Answer 7

@ डिशन टीडी का जवाब अच्छा काम करता है, लेकिन मुझे केवल मार्जिन-बाएं का उपयोग करके बेहतर परिणाम मिल रहे हैं।

और यह हर किसी को स्पष्ट करने के लिए, आप दोनों विपरीत संख्या को ध्यान देना होगा: 27 और -27

/* the slides */ 
    .slick-slide { 
    margin-left:27px; 
    } 

    /* the parent */ 
    .slick-list { 
    margin-left:-27px; 
    } 

Answer 8

तरह दिखेगा

centerPadding: '0' 

स्लाइडर सेटिंग जोड़ें:

$('.phase-slider-one').slick({ 
    centerMode: true, 
    centerPadding: '0', 
    responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}] 
}); 

धन्यवाद

Answer 9

नवीनतम संस्करण आप बस अपने slided को margin जोड़ सकते हैं के बाद से:

.slick-slide { 
    margin: 0 20px; 
} 

नकारात्मक मार्जिन के किसी भी प्रकार के कोई ज़रूरत नहीं है, के बाद से चालाक की गणना तत्वों outterHeight पर आधारित है।