वर्तमान स्लाइड का उल्लेख करते हुए स्लिम स्लाइडर के बिंदुओं पर थंबनेल जोड़ने के लिए

मैं वर्तमान में एक नई परियोजना पर काम कर रहा हूं जिसके लिए स्लाइडर की आवश्यकता है। मैंने अपनी परियोजना में से एक के लिए स्लिम जेएस लागू किया है।वर्तमान स्लाइड का उल्लेख करते हुए स्लिम स्लाइडर के बिंदुओं पर थंबनेल जोड़ने के लिए

अब मैं पहली बार स्लाइड पर जाने के होगा, थंबनेल जो दिखाई देगा जब हम डॉट्स जो स्लाइडर

उदाहरण के लिए की कड़ी देगा मंडराना जोड़ने के लिए, पहले अंगूठे और स्लाइडर पर क्लिक करें की जरूरत है .... तीसरे पर क्लिक करें और तीसरी स्लाइड पर स्लाइड।

एचटीएमएल

<html> 
     <head> 
     <title>My Now Amazing Webpage</title> 
     <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 
     <link rel="stylesheet" type="text/css" href="slick/style.css"/> 
     </head> 
    <body> 
<!-- THis is the slider code --> 
     <div class="center"> 
      <div><img alt="slide 2" src="images/img1.jpg"></div> 
      <div><img alt="slide 2" src="images/img2.jpg"></div> 
      <div><img alt="slide 2" src="images/img3.jpg"></div> 
      <div><img alt="slide 2" src="images/img4.jpg"></div> 
      <div><img alt="slide 2" src="images/img5.jpg"></div> 
     </div> 

     <script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script> 
     <script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script> 
     <script type="text/javascript" src="slick/slick.min.js"></script> 

     <script type="text/javascript"> 
     $('.center').slick({ 

      centerMode: true, 
      centerPadding: '60px', 
      slidesToShow: 1, 
      dots: !0, /* It is for the navigation dots */ 
      draggable: !1, 
      responsive: [ 
      { 
       breakpoint: 768, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      } 
      ] 
     }); 
     </script> 
    </body> 
</html>

स्रोत

2014-07-25 KKGupta

मुझे बिल्कुल नहीं पता कि कैसे, लेकिन आप क्या कर सकते हैं प्रत्येक डॉट पर एक अलग ऑनमौसओवर विशेषता जोड़ना है, जो आवश्यक जावास्क्रिप्ट फ़ंक्शन को कॉल करेगा। फिर फ़ंक्शन में एक्स, वाई माउस पॉइंटर के निर्देशांक और उस एक्स, वाई निर्देशांक पर थंबनेल प्रदर्शित करें। – orb

निम्न लिंक देखें। यह स्लिम अवधारणा को लागू करने के लिए बहुत उपयोगी है http://kenwheeler.github.io/slick/ – Sathiyaraj

आपको कस्टम झलकें साथ डॉट्स जगह ले सकती। उदाहरण के लिए आप कहीं थंबनेल जोड़ने के लिए (, छवि स्लाइड आवरण अंदर एक छिपा div में की आवश्यकता होगी संदर्भ के लिए कोड देखें:।

$('.slideme').slick({ 
    dots: true, 
    customPaging: function(slider, i) { 
    // this example would render "tabs" with titles 
    return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>'; 
    }, 
});

तुम भी देशी स्लिक पेजर सीएसएस अप tweak डॉट्स को हटाने और जोड़ने के लिए की आवश्यकता होगी आपके थंबनेल के लिए अधिक स्थान और शैलियों

स्रोत

2014-08-03 18:34:16 lifecoder

I ऐसा नहीं लगता कि आपको "डॉट्स को हटाने" के लिए वास्तव में कुछ भी करने की ज़रूरत है, कुछ उदाहरण देखें: https://jsfiddle.net/oL5bjae1/ और https://jsfiddle.net/simeydotme/9nm4ctv9/ –

मैं इसका उपयोग कर रहा हूं एक गतिशील कैरोसेल के अंदर, जब स्लाइड छवियों को हटा दिया जाता है, पुराने थंबनेल हटाए नहीं जा रहे हैं। जब कोई नया कस्टम पेजिंग बनाया जाता है तो मैं पुराने कस्टम पेजिंग को "साफ़" कैसे कर सकता हूं? वर्तमान में एक संचय का सामना करना पड़ रहा है जहां पुरानी स्लाइड हटा दी जाती है, उनके थंबनेल नहीं होते हैं – Prefix

वर्तमान स्लाइड का उल्लेख करते हुए स्लिम स्लाइडर के बिंदुओं पर थंबनेल जोड़ने के लिए

उत्तर

संबंधित मुद्दे