बूटस्ट्रैप हिंडोला: ऑटो स्लाइड निकालें

119

मैं बूटस्ट्रैप हिंडोला का उपयोग कर रहा हूं। मैं बस इतना चाहता हूं कि स्लाइडर तब ही स्लाइड करेगा जब नेविगेशन या पेजेशन पर क्लिक किया जाएगा। मैंने निकालने की कोशिश की है

$('.carousel').carousel({
    interval: 6000
});

यह ठीक काम करता है, लेकिन मेरी समस्या एक बार मैंने पहले ही नेविगेशन या पृष्ठांकन पर क्लिक कर दी है, यह अब ऑटो स्लाइडिंग है। क्या ऑटो स्लाइडिंग फ़ंक्शन को निकालना संभव है? यदि हां, तो कैसे?

javascript jquery twitter-bootstrap

— khatzie
स्रोत

225

आप इसे 2 तरीके से कर सकते हैं, js या html (ईज़ीस्ट) के माध्यम से

वाया जे.एस.

$('.carousel').carousel({
  interval: false,
});

इससे ऑटो स्लाइडिंग स्टॉप बन जाएगा क्योंकि कोई मिलिसेकंड नहीं जोड़ा गया है और आगे कभी स्लाइडर नहीं होगा।

Html जोड़कर data-interval="false"और निकालकरdata-ride="carousel"

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

हो जाता है:

<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">

@ webMan की टिप्पणी के आधार पर अपडेट किया गया

— इलिया रेज़िस
स्रोत

38

data-ride="carousel"इनलाइन से भी छुटकारा पाएं ... और इनलाइन के लिए सही सिंटैक्स:data-interval="false"

— webMan

111

से सरकारी डॉक्स :

अंतराल स्वचालित रूप से एक आइटम को स्वचालित रूप से साइकिल चलाने के बीच विलंब की मात्रा। यदि गलत है , तो हिंडोला स्वचालित रूप से चक्र नहीं करेगा।

आप या तो जावास्क्रिप्ट के साथ इस मान को पारित कर सकते हैं या एक data-interval="false"विशेषता का उपयोग कर सकते हैं ।

— डिएगो अगुलो
स्रोत

9

डेटा-अंतराल = 'गलत' के लिए धन्यवाद, यदि आप the-bootstrapवर्डप्रेस में एक विषय का उपयोग कर रहे हैं तो आसान विकल्प

— toto_tico

32

data-interval="false"बहुत बेहतर समाधान है, बूटस्ट्रैप जेएस को छूने की कोई जरूरत नहीं है!

— lxg

2

यह मेरे लिए काम नहीं कर रहा है <div class = "carousel slide" data-Ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> ...। और कुछ भी नहीं ... अभी भी

— आटोस्लाइडिंग

यह वास्तव में सरल मामलों के लिए बहुत सरल है, लेकिन ध्यान रखें कि यह आपके कस्टम का उपयोग करने के लिए एक बेहतर डिज़ाइन है scripts.jsऔर HTML में कोई स्क्रिप्ट कोडिंग नहीं रखता है! ;)

— क्रैगॉक्स

55

आपको बस अपने DIV टैग में एक और विशेषता जोड़ने की आवश्यकता है जो है

data-interval="false"

जेएस को छूने की जरूरत नहीं!

— निकुंज धीमर
स्रोत

36

हिंडोला में डेटा-अंतराल = "गलत" में जोड़ें / बदलें

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

— अरुण
स्रोत

7

कृपया निम्नलिखित प्रयास कीजिए:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

— निकित बारोचिया
स्रोत

1

यह केवल एक ही है जो कंसोल का उपयोग करके रन-टाइम पर मेरे साथ काम करता है।

— बिशोय हन्ना

4

डेटा अंतराल = "false"

इसी div में जोड़ें ...

3

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

उपरोक्त स्क्रिप्ट का उपयोग करके, आप छवियों को स्वचालित रूप से स्थानांतरित करने में सक्षम होंगे

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

उपरोक्त स्क्रिप्ट का उपयोग करके, auto-rotationअवरुद्ध हो जाएगा क्योंकि intervalहैfalse

— नितिन अंवेकर
स्रोत