Slick.js: छवियों को लोड होने तक स्लाइडर छुपाएं

Question

Slick.js का उपयोग करके, छवियों को लोड होने तक या कम से कम पहली छवि लोड होने तक स्लाइड को कैसे छिपाता है? मैंने init का उपयोग करने की कोशिश की लेकिन इसे काम पर नहीं मिला। कंसोल पर कुछ भी नहीं किया जाता है, या तो।

var $slider = $('.slider').slick({ 
    fade: true, 
    focusOnSelect: true, 
    lazyLoad: 'ondemand', 
    speed: 1000 
}); 

$('.slider').on('init', function(slick) { 
    console.log('fired!'); 
    $('.slider').fadeIn(3000); 
}); 

मैं भी window load कोशिश की, लेकिन है कि या तो यह ठीक नहीं हुआ।

$(window).load(function() { 
    $('.slider').fadeIn(3000); 
}); 

http://jsfiddle.net/q5r9ertw/

Answer 1

चालाक आरंभ से पहले init घटना बाध्य करने के लिए सुनिश्चित करें।

उदाहरण: http://jsfiddle.net/b5d5mL7p/

var $slider = $('.slider') 
     .on('init', function(slick) { 
      console.log('fired!'); 
      $('.slider').fadeIn(3000); 
     }) 
     .slick({ 
      fade: true, 
      focusOnSelect: true, 
      lazyLoad: 'ondemand', 
      speed: 1000 
     }); 

Answer 2

समस्या यह है कि इससे पहले कि चालाक स्लाइडर आरंभ नहीं हो जाता है कि आप अपने सभी स्लाइड देख सकते हैं, के बाद से मार्कअप बस एक div सूची है। मुझे लगता है कि स्लाइडर को छिपाना और फिर इसे लुप्त करना पृष्ठ लोड होने पर बहुत चिकनी दिखता नहीं है। मैं इस के बजाय की कोशिश करेंगे:

<style> 
.slickSlider{ 
    height: 300px; 
    overflow: hidden; 
} 
</style> 

जहां ऊंचाई आपकी छवियों की ऊंचाई सेट किया जाना चाहिए और फिर

$('.slickSlider') 
    .on('init', function(slick) { 
     $('.slickSlider').css("overflow","visible"); 
    }) 
    .slick({ 
     fade: true, 
     focusOnSelect: true, 
     lazyLoad: 'ondemand', 
     speed: 1000 
    }); 

यह भी लाभ है कि डॉट्स और तीर ही जब स्लाइडर आरंभ नहीं हो जाता दिखाई ।

Answer 3

स्लिक उस श्रेणी में 'स्लिम-प्रारंभिक' श्रेणी को जोड़ता है जिसे आप 'स्लिम' कहते हैं।

प्रारंभिक लोड पर पहले display:none को छोड़कर सभी स्लाइड सेट करें और स्लाइडर लोड पर कोई कूद नहीं होने के साथ ही स्लाइडर को इसकी सही ऊंचाई पर प्राप्त करें। जब स्लिम प्रारंभ होता है, तो आप उन्हें वापस display: block पर चाहते हैं।

CSS

.slide img { 
    height: 600px; 
    width: auto; 
} 
.slide:not(:first-of-type) { 
    display: none; 
} 
.slider.slick-initialized .slide:not(:first-of-type) { 
    display:block; 
} 

Answer 4

मैं इस कोड है:

.slider-slick:not(.slick-initialized) .blog-slide-wrap:not(:first-child) 
{ 
     display: none 
} 

संरचना मेरी चालाक स्लाइडर

 <div class="blog-slider slider-slick"> 
     <?php 
     while ($query->have_posts()) { 
      $query->the_post(); 
      ?> 
      <div class="blog-slide-wrap"> 
       <img src="<?= get_the_post_thumbnail_url(get_the_ID(), 'blog-slider') ?>"> 
       <div class="blog-text-wrap"> 
        <h2><a href="<?= get_the_permalink() ?>"><?= get_the_title() ?></a></h2> 
       </div> 
      </div> 
      <?php 
     } 
     ?> 
    </div> 

Answer 5

मैं जानता हूँ कि यह एक पुराने सवाल है, लेकिन यह एक समान में मेरे लिए काम किया स्थिति, जब समस्या यह थी कि सभी स्लाइड एक बार में प्रदर्शित होते थे और यह भयानक और अजीब लग रहा था।

हल करना शुद्ध सीएसएस है।

पहले, आप अपने चालाक स्लाइडर आवरण के लिए सीएसएस जोड़ें: स्लाइडर

.your-slider-wrapper { 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 1s ease; 
    -webkit-transition: opacity 1s ease; 
} 

के बाद आरंभ नहीं हो जाता, चालाक wrapeper को .slick-प्रारंभ वर्ग कहते हैं। आप जोड़ने के लिए इस का उपयोग कर सकते हैं:

.your-slider-wapper.slick-initialized { 
    visibility: visible; 
    opacity: 1;  
} 

आशा इस व्यक्ति के रूप में मैंने किया था, जो इस सवाल पर ठोकर मदद करता है।

Answer 6

डिफ़ॉल्ट रूप से अपने कैरोसेल रैपर पर visibility: hidden सेट करें, और .slick-initialized { visibility: visible; } जोड़ें।

एक बार स्लिक शुरू हो जाने पर, यह स्लीच-प्रारंभिक कक्षा को रैपर में जोड़ता है जो इसकी दृश्यता को वापस लाएगा।