Slick स्लाइडर अगला तीर

Question

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

यहाँ मेरी कोड है:

एचटीएमएल

<div class="slider"> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100"> 
     </div> 
    </div> 

सीएसएस

body{ 
    background-color: #fff; 
    } 
    .slider{ 
    margin: 60px auto; 
    width: 500px; 
    } 
    div{ 
    height: 100%; 
    } 
    p{ 
    text-align: center; 
    font-size: 12px; 
    color: white; 
    } 

जावास्क्रिप्ट

$(document).ready(function(){ 
     $('.slider').slick({ 
      centerMode: true, 
      centerPadding: '60px', 
      dots: false, 
      infinite: true, 
      speed: 300, 
      slidesToShow: 4, 
      slidesToScroll: 1, 
      arrows: true 
     }); 
     }); 

डेमो: http://jsfiddle.net/schwany23/j39j568c/

Answer 1

अपनी पहेली में, आप एक बाहरी संसाधन के रूप में slick-theme.c.c फ़ाइल को जोड़ना भूल गए थे। यदि आप लेखक की डिफ़ॉल्ट स्टाइल का पालन करना चाहते हैं, तो आपको उस फ़ाइल की आवश्यकता है। या यदि आप अपनी खुद की स्टाइल चाहते हैं तो कृपया आगे बढ़ें और अपना स्टाइल बनाएं और इसे अपनी थीम बनाएं। सीएसएस फ़ाइल या कुछ।

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/> 

और दृश्यता के लिए इस सीएसएस,

.slick-prev:before, .slick-next:before{ 
    color:red; 
} 

The updted jsFiddle can be found here।

कोड यहाँ झलकी ...

$(document).ready(function() { 
 
    $('.slider').slick({ 
 
    centerMode: true, 
 
    centerPadding: '60px', 
 
    dots: true, 
 
    /* Just changed this to get the bottom dots navigation */ 
 
    infinite: true, 
 
    speed: 300, 
 
    slidesToShow: 4, 
 
    slidesToScroll: 1, 
 
    arrows: true 
 
    }); 
 
});

body { 
 
     background-color: #fff; 
 
     } 
 
     .slider { 
 
     margin: 60px auto; 
 
     width: 500px; 
 
     } 
 
     div { 
 
     height: 100%; 
 
     } 
 
     p { 
 
     text-align: center; 
 
     font-size: 12px; 
 
     color: white; 
 
     } 
 
     /* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */ 
 
     .slick-prev:before, 
 
     .slick-next:before { 
 
     color: red; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script> 
 
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/> 
 
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/> 
 

 
<div class="slider"> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" /> 
 
    </div> 
 
</div>

आशा इस मदद करता है

Answer 2

आप पतले दिखाई देने वाले theme.css को शामिल किया है और अभी भी समस्या यह है कर रहे हैं क्योंकि विषय अपेक्षा करता है कि एक उपफोल्डर में होना (उदाहरण के लिए /theme/slick-theme.css) लेकिन डिफ़ॉल्ट डाउनलोड slick-theme.c.cs को उसी फ़ोल्डर में डालता है जैसे AJAX-loader.gif और फोंट फ़ोल्डर जो दोनों थीम से संदर्भित हैं।

समाधान: एक सबफ़ोल्डर में slick-theme.c.c फ़ाइल डालें या सीएसएस संपादित करें ताकि यह अब किसी मूल फ़ोल्डर में देखने का प्रयास न करे। आपको Sai