मैंने वर्तमान स्लाइड 0 होने पर "पिछला" तीर को अक्षम करने के लिए जावास्क्रिप्ट फ़ंक्शन लिखा है, और जब मैं अंतिम स्लाइड पर पहुंच गया हूं तो "अगला" तीर अक्षम कर देता हूं। मैं चाहता हूं कि "पिछला" तीर पृष्ठ लोड होने पर केवल एक बार अक्षम हो, और उसके बाद भी पहली स्लाइड (वर्तमान स्लाइड: 0) तक पहुंचने के बाद भी मैं "पिछला" तीर दिखाना चाहता हूं। वर्तमान में, मेरे पास 3 स्लाइड हैं (0,1,2)

मैंने केवल पहली बार लोड होने पर तीर को छिपाने के लिए ऑनलोड() फ़ंक्शन का उपयोग करने का प्रयास किया, लेकिन यह काम नहीं किया।

$(function(){  
  $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
    if(currentSlide==0)
    {
        $('.slick-prev').hide();
    }
    else if(currentSlide==2)
    {
        $('.slick-next').hide();
    }
});

$('.hero-slider').on('afterChange', function(){
  console.log($('.hero-slider').slick('slickCurrentSlide'));
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
    if(currentSlide==0)
    {
        $('.slick-prev').hide();
        $('.slick-next').show();
    }
    else if(currentSlide==2)
    {
        $('.slick-next').hide();
        $('.slick-prev').show();
    }
    if(currentSlide>0 && currentSlide<2)
    {
        $('.slick-prev').show();
        $('.slick-next').show();
    }
});
4
Rishika 16 जिंदा 2017, 10:14
यह कामकाजी कोड है। यहां जब मेरी स्लाइड अंतिम चरण में पहुंच रही है तो "अगला" तीर अक्षम हो रहा है और जब यह पहली स्लाइड में है तो "पिछला" तीर अक्षम हो रहा है। मैं नहीं चाहता कि पृष्ठ के पहले लोड के बाद "पिछला" तीर अक्षम हो जाए।
 – 
Rishika
16 जिंदा 2017, 10:38
 – 
Rishika
16 जिंदा 2017, 11:40
अपेक्षित व्यवहार क्या है? अभी भी यह मेरे लिए स्पष्ट नहीं है
 – 
Pranav C Balan
16 जिंदा 2017, 11:46
पहली स्लाइड प्रदर्शित होने पर "पिछला" तीर की स्थिति छुपाएं() होती है (जब पृष्ठ लोड होता है)। मैं स्थिति को दिखाने के लिए बदलना चाहता हूं() जब मेरा स्लाइडर सभी स्लाइड्स को प्रदर्शित करने का एक दौर पूरा करता है और फिर 0 से फिर से शुरू होता है।
 – 
Rishika
16 जिंदा 2017, 11:53
1
आपकी मदद के लिए धन्यवाद एक टन! यह अब काम कर रहा है।
 – 
Rishika
16 जिंदा 2017, 12:17

1 उत्तर

सबसे बढ़िया उत्तर

केवल स्लाइडर को इनिशियलाइज़िंग कोड रखें और ईवेंट हैंडलर और अन्य कोड को हटा दें।

jQuery(function($) {  
 $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
});
jQuery(function($) {  
 $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
      <div class="hero-slider">
        <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula                    eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>          
          </div>
        </div>
        <div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula                  eget dolor. Aenean massa</p>
          </div>
        </div>
        <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula                  eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
          </div>
        </div>
      </div>
    </section>

अद्यतन करें: यदि आप प्रारंभ में बटन को छिपाना चाहते हैं तो ईवेंट हैंडलर में बटन को एक बार अपडेट करें (one() केवल एक बार निष्पादित करने की विधि) स्लाइड बदलने के बाद।

jQuery(function($) {
  $('.hero-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    infinite: true
  });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
  $('.slick-prev').toggle(currentSlide != 0);
  $('.slick-next').toggle(currentSlide != 2);

  $('.hero-slider').one('afterChange', function() {
    $('.slick-prev,.slick-next').show();
  });
});
jQuery(function($) {
  $('.hero-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    infinite: true
  });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
  $('.slick-prev').toggle(currentSlide != 0);
  $('.slick-next').toggle(currentSlide != 2);
  
  $('.hero-slider').one('afterChange', function() {
    $('.slick-prev,.slick-next').show();
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
  <div class="hero-slider">
    <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
      </div>
    </div>
    <div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
      </div>
    </div>
    <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
      </div>
    </div>
  </div>
</section>
2
Pranav C Balan 16 जिंदा 2017, 12:19
आपके द्वारा दिया गया कोड "अगला" और "पिछला" दोनों तीरों को अक्षम कर रहा है जब यह अगली स्लाइड (स्लाइड 1) तक पहुंच रहा है।
 – 
Rishika
16 जिंदा 2017, 10:41
अद्यतन कोड "पिछला" तीर को अक्षम नहीं कर रहा है। मैंने पहले भी इस प्रकार के तर्क की कोशिश की थी। स्लाइड चल रही हैं लेकिन जब यह 0वीं स्लाइड पर पहुंच रही है, तो पिछला तीर अक्षम हो रहा है
 – 
Rishika
16 जिंदा 2017, 10:44
अभी भी वही मुद्दा: / "पिछला" तीर अभी भी अक्षम है
 – 
Rishika
16 जिंदा 2017, 10:53