मैं उस गति को कैसे नियंत्रित कर सकता हूं जो बूटस्ट्रैप आइटम में स्लाइड करती है?

85

मैं देखता हूं कि आप अंतराल सेट कर सकते हैं लेकिन मैं यह नियंत्रित करना चाहता हूं कि आइटम कितनी तेजी से स्लाइड करते हैं?

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});
twitter-bootstrap 
— genxgeek
स्रोत
Googler -> INTERVAL को धीमा करने के लिए (अगली छवि दिखाने के बीच का समय) ::: stackoverflow.com/a/38203373/1985648
— डॉन चेडल

जवाबों:

115

स्पीड को एपीआई द्वारा नियंत्रित नहीं किया जा सकता है। यद्यपि आप सीएसएस को संशोधित कर सकते हैं जो उस के प्रभारी हैं। में carousel.lessफ़ाइल खोजने

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

और .6sजो आप चाहते हैं उसे बदल दें।

यदि आप उपयोग नहीं करते हैं, तो bootstrap.cssफ़ाइल में खोजें:

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

और 0.6sआप चाहते हैं कि समय में परिवर्तन । आप नीचे दिए गए फ़ंक्शन कॉल में समय संपादित करना चाह सकते हैं:

.emulateTransitionEnd(2000)

पर bootstrap.jsसमारोह में Carousel.prototype.slide। यह संक्रमण को सिंक्रनाइज़ करता है और संक्रमण समाप्त होने से पहले स्लाइड को रोकने के लिए रोकता है।

EDIT 7/8/2014

जैसा कि @YellowShark ने बताया कि JS में संपादन की अब कोई आवश्यकता नहीं है। केवल सीएसएस परिवर्तन लागू करें।

EDIT 20/8/2015 अब, अपनी css फ़ाइल को संपादित करने के बाद, आपको बस CAROUSEL.TRANSITION_DURATION (bootstrap.js में) या c.TRANSITION_DURATION (यदि आप bootstrap.min.js का उपयोग करते हैं) और इसके अंदर के मान को बदलने की आवश्यकता है। (डिफ़ॉल्ट के लिए 600)। अंतिम मान वही होना चाहिए जो आपने अपनी css फ़ाइल में डाला है (उदाहरण के लिए cs में 10000 = 10000 में .js।

EDIT 16/01/2018 बूटस्ट्रैप 4 के लिए, संक्रमण समय को उदा में बदलने के लिए, 2 सेकंड, जोड़ें

$(document).ready(function() {
  jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000  // 2 seconds
});

आपकी साइट की JS फ़ाइल और

.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

आपकी साइट की CSS फ़ाइल में।

— दिमित्री एफिमेंको
स्रोत
1
उत्तर के लिए धन्यवाद! मैंने अपने मुख्य .html पेज की अपनी शैलियों में उत्तरार्द्ध डालने की कोशिश की और .6 को .1 में बदल दिया और ऐसा प्रतीत नहीं हुआ कि क्रोम का उपयोग करने का कोई प्रभाव नहीं है।
— जीनएक्सजेक
स्पष्ट नहीं ... क्या आपने बूटस्ट्रैप फ़ाइलों को संशोधित करने का प्रयास किया या आपने इस सामान को अपने सीएसएस में जोड़ा? यह बूटस्ट्रैप फ़ाइलों को संपादित करने के लिए सुरक्षित है। अन्यथा आपको यह सुनिश्चित करने की आवश्यकता है कि आपकी शैली अंतिम लोड करें और बूटस्ट्रैप शैलियों को अधिलेखित करें।
— दिमित्री एफिमेंको
2
बस यह इंगित करना चाहता था कि आपको किसी भी javaScript (अब) को संशोधित करने की आवश्यकता नहीं है, कोड में वह पंक्ति अब .cs ('ट्रांज़िशन-अवधि') मान खींचती है , इसलिए आपको बस ऊपर वर्णित अनुसार कुछ CSS जोड़ने की आवश्यकता है, और बस। (इसके अलावा, सुनिश्चित करें कि हिंडोला आइटम में "स्लाइड" वर्ग है, यह सुनिश्चित नहीं है कि डॉक्स में उल्लेख किया गया है।)
— येलशार्क
5
बूटस्ट्रैप 3 (v3.3.5, वैसे भी) में जेएस अब सीएसएस से उस अवधि मान को नहीं खींचता है। यह आसानी से सेट किया जा सकता बूटस्ट्रैप को संशोधित किए बिना : तो जैसेjQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
— Walf
1
jQuery.fn.carousel.Constructor.TRANSITION_DURATION अपरिभाषित देता है। कोई इसे कैसे बदलता है? संक्रमण काम करता है और यह धीरे-धीरे स्लाइड करता है, लेकिन जो छवि बाहर निकलती है वह प्रदर्शित होती है: कोई नहीं; बहुत जल्दी।
— बेन
94

बस हिंडोला data-intervalमें लिखें div:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">

उदाहरण w3schools से लिया गया ।

— जसविंदर सिंह
स्रोत
कृपया अपने प्रश्न को अधिक उचित तरीके से प्रारूपित करने का प्रयास करें। Btw। लिंक को केवल अच्छे उत्तर के रूप में नहीं माना जाता है।
— ckruczek
1
चेतावनी: "डेटा-अंतराल" को मिलिसेकंड में मापा जाता है। 500 = 0,5 सेकंड (इतना तेज़)। यदि आपके पास स्लाइड पर दिखाने के लिए कुछ पाठ है, तो 10000 (10 सेकंड) बेहतर है। ठीक काम करता है। मुझे लगता है कि स्वीकृत उत्तर होना चाहिए।
— रेनासिंज़ा
19
यह उत्तर गलत है । data-intervalसमय अवधि निर्धारित करता है जिसके बाद नई स्लाइड चलती है। यह निर्धारित नहीं करता है कि एक स्लाइड को चलने में कितना समय लगता है।
— user31782
1
धन्यवाद दोस्त, यह मेरा दिन बचाया। +1 और इसे bootstrap.css फ़ाइल को संपादित करने के बजाय सही उत्तर के रूप में जांचा जाना चाहिए।
— फोंगोह मार्टिन
2
मैं इस सटीक उत्तर की तलाश कर रहा था ... लेकिन इससे पहले कि मुझे लगता है कि स्लाइड की गति के साथ क्या करना था, इससे पहले कि दूसरे जवाब की कोशिश की, जबकि यह जवाब स्लाइड के बीच के अंतराल से संबंधित है। तो इस उत्तर को शामिल करने के लिए धन्यवाद, क्योंकि यह वही था जो मैं चाहता था! (भले ही 500 बहुत तेज़ है, लेकिन यह एक अलग कहानी है)
— मालाची
13

आपको मुख्य DIV में डेटा-अंतराल टैग के रूप में अंतराल सेट करने की आवश्यकता है। यह ठीक काम करेगा और आप अलग-अलग स्लाइड को अलग-अलग समय दे सकते हैं।

<div class="carousel" data-interval="5000">
— अली उमैर
स्रोत
क्या आप एक उदाहरण दे सकते हैं। मुझे अलग-अलग स्लाइड्स के लिए अलग-अलग समय अंतराल देने की आवश्यकता है और ये मेरे नियंत्रक से एक एपीआई कॉल से वापस कॉन्फ़िगर किए गए हैं। क्या हम स्लाइडर के साथ वेब पेज भी दिखा सकते हैं?
— अर्चना
1
डेटा-अंतराल समय अवधि निर्धारित करता है जिसके बाद नई स्लाइड चलती है, न कि एनीमेशन अवधि।
— रिकार्डो विगत्ती
11

ट्विटर बूटस्ट्रैप 3 के लिए:

आपको सीएसएस संक्रमण को अन्य उत्तर में निर्दिष्ट के रूप में बदलना होगा:

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

0.6 सेकंड से 1.5 सेकंड (उदाहरण के लिए)।

लेकिन इसके अलावा, कुछ जावास्क्रिप्ट को बदलना है। Bootstrap.js में एक पंक्ति है:

.emulateTransitionEnd(600)

इसे मिलीसेकंड की संगत राशि में बदला जाना चाहिए। तो 1.5 सेकंड के लिए आप संख्या को 1500 में बदल देंगे:

.emulateTransitionEnd(1500)
— क्रिस हैरिसन
स्रोत
क्रिस, बहुत बढ़िया। धन्यवाद!
— Genxgeek
8

एक बात मैंने देखी कि बूटस्ट्रैप 3 शैलियों को जोड़ रहा है .6sऔर दोनों के साथ 0.6s। तो आपको इस तरह अपनी संक्रमण अवधि को स्पष्ट रूप से परिभाषित करने की आवश्यकता हो सकती है (सीएसएस)

    .carousel-inner>.item {
    -webkit-transition: 0.9s ease-in-out left;
    transition: 0.9s ease-in-out left;
    -webkit-transition: 0.9s, ease-in-out, left;
    -moz-transition: .9s, ease-in-out, left;
    -o-transition: .9s, ease-in-out, left;
    transition: .9s, ease-in-out, left;
    }
— bkrall
स्रोत
1
मेरे लिए काम नहीं :( यह अभी भी तेजी से एक कार के रूप में रोल है जिसमें कोई बदलाव नहीं हुआ (मैं 1.6 में बदल गया)
— एंडियाना
7

बूटस्ट्रैप 4 के साथ, बस इस सीएसएस का उपयोग करें:

.carousel .carousel-item {
    transition-duration: 3s;
}

3sअपनी पसंद की अवधि में परिवर्तन करें।

— kmoser
स्रोत
1
बहुत बहुत अच्छा :)
— मोहम्मद बशर
6

मेरे लिए मेरे विचार के अंत में इसे जोड़ने का काम किया:

<script type="text/javascript">
$(document).ready(function(){
     $("#myCarousel").carousel({
         interval : 8000,
         pause: false
     });
});
</script>

यह हिंडोला को 8 सेकंड का अंतराल देता है

— एरिक
स्रोत
3

किसी भी बाहरी कोड की जरूरत नहीं data-interval=""विशेषता का उपयोग करें

अधिक जानकारी यात्रा getbootstrap

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

जब आप परिवर्तन गति बदलना चाहते हैं "2500"

— चेतना कल्प
स्रोत
2

यदि आपको इसे बदलने के लिए प्रोग्रामेटिक रूप से करने की आवश्यकता है (उदाहरण के लिए) शायद कुछ हिंडोले के केवल एक पर कुछ शर्तों के आधार पर गति, आप इस तरह से कुछ कर सकते हैं:

यदि Html इस तरह है:

<div id="theSlidesList" class="carousel-inner" role="listbox">
  <div id="Slide_00" class="item active"> ...
  <div id="Slide_01" class="item"> ...
  ...
</div>

जावास्क्रिप्ट इस तरह होगा:

$( "#theSlidesList" ).find( ".item" ).css( "-webkit-transition", "transform 1.9s ease-in-out 0s" ).css( "transition", "transform 1.9s ease-in-out 0s" )

अन्य ब्राउज़र शामिल करने के लिए और .css (...) जोड़ें।

— Jelgab
स्रोत
2

एक को शामिल करने bootstrap.min.jsया असम्बद्ध करने के बाद , आप बस एक पैरामीटर के रूप में अंतराल जोड़ सकते हैं जैसा कि jQuery("#numbers").carousel({'interval':900 });यह मेरे लिए काम करता है

— पैट्रिक मुतवारी
स्रोत
2

यदि आप बूटस्ट्रैप की js फ़ाइलों को बदलना नहीं चाहते हैं, तो आप सीधे jquery प्लगइन (बूटस्ट्रैप 3.3.6) में वांछित मूल्य को भी इंजेक्ट कर सकते हैं।

यह निश्चित रूप से आवश्यक है, कि हिंडोला js के माध्यम से मैन्युअल रूप से सक्रिय है, सीधे डेटा-राइड विशेषता के माध्यम से नहीं।

उदाहरण के लिए:

var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
    interval : interval
});
— एंड्रियास
स्रोत
मुझे यह दृष्टिकोण पसंद है क्योंकि इसे आपको संपादित करने bootstrap.jsऔर "अप्राप्य" बनाने की आवश्यकता नहीं है ..
— TryingToImprove
200 में बदलने के बाद, मुझे अब सुगम एनीमेशन दिखाई नहीं दे रहा है, छवियों को संक्रमण के बीच में ठीक-ठीक
— नापसंद किया जा रहा है
हाय @TomSawyer - एनिमेशन सीएसएस के माध्यम से बनाए रखा जाता है, लेकिन यह महत्वपूर्ण है, कि पूर्ण संक्रमण को कवर करने के लिए, TRANSITON_DURATION काफी लंबा है। जावास्क्रिप्ट में यह सिर्फ परिभाषित करता है, जब inकक्षा सेट की जाती है, और जब इसे फिर से हटा दिया जाता है। यदि आप एनीमेशन को छोटा करना चाहते हैं, तो कृपया जाँचें, जहाँ इसे कम फ़ाइलों में परिभाषित किया गया है।
— एंड्रियास
2

एससीएसएस साथ बूटस्ट्रैप 4 के लिए, आप विन्यास चर अधिलेखित कर सकते हैं $carousel-transition-durationअपने में _variables.scssइस तरह:

$carousel-transition-duration: 2s;

या तत्व के लिए अलग-अलग अवधि निर्धारित की जाती है

.carousel-item {
    transition-duration: 2s;
}

अपने विशिष्ट तत्व के अपने सीएसएस / एसएसएस में।

— shaack
स्रोत
1

मेरे लिए जो काम किया गया था वह बूटस्ट्रैप.जेएस में अंतराल को बदलने के लिए था

  Carousel.DEFAULTS = {
    interval: 2000,      // <----- change this
    pause: 'hover',
    wrap: true,
    keyboard: true
  }
— paulo62
स्रोत
1
यह एनिमेशन की आवृत्ति को नियंत्रित करता है, न कि किसी व्यक्तिगत एनीमेशन की गति को।
— वॉल्फ
1

अपने सीएसएस फ़ाइल को संपादित करने के बाद पिछले उत्तरों को पूरक करने के लिए, आपको बस CAROUSEL.TRANSITION_DURATION( bootstrap.js में ) संपादित करने की आवश्यकता है या c.TRANSITION_DURATION(यदि आप bootstrap.min.js का उपयोग करते हैं ) और इसके अंदर मान बदलने के लिए (डिफ़ॉल्ट के लिए 600)। अंतिम मान वही होना चाहिए जो आपने अपनी CSS फ़ाइल में रखा है (उदाहरण के लिए, CSS में 10s = 10000 .js में)।

Carousel.VERSION  = '3.3.2'
Carousel.TRANSITION_DURATION = xxxxx /* Your number here*/
Carousel.DEFAULTS = {
interval: 5000 /* you could change this value too, but to add data-interval="xxxx" to your html it's fine too*/
pause: 'hover',
wrap: true,
keyboard: true
}
— सर्जियो ब्लैंको
स्रोत
1

यदि आप उस गति को संपादित करना चाह रहे हैं, जिसमें बूटस्ट्रैप 3.3.5 के लिए स्लाइड्स अंदर और बाहर आती हैं (अंतरालों को बदलते समय को अंतराल नहीं कहा जाता है)। CDN बूटस्ट्रैप शैलियों को लोड करने के बाद, निम्न वर्गों का उपयोग करके अपने स्वयं के सीएसएस स्टाइलसेट में शैलियों को ओवरराइट करें। 1.5 समय परिवर्तन है।

.carousel-inner > .item {
-webkit-transition: 1.5s ease-in-out ;
-o-transition: 1.5s ease-in-out ;
transition: 1.5s ease-in-out ;
}
.carousel-inner > .item {
-webkit-transition: -webkit-transform 1.5s ease-in-out;
-o-transition: -o-transform 1.5s ease-in-out;
transition: transform 1.5s ease-in-out;

}

उसके बाद, आपको जावास्क्रिप्ट में हिंडोला फ़ंक्शन को बदलने की आवश्यकता होगी। ऐसा करने के लिए आप इसे लोड करने के बाद डिफ़ॉल्ट बूटस्ट्रैप.min.js फ़ंक्शन को अधिलेखित कर देंगे। (मेरी राय में सीधे बूटस्ट्रैप फ़ाइलों को अधिलेखित करना एक अच्छा विचार नहीं है)। इसलिए एक mynewscript.js बनाएं और इसे bootstrap.min.js के बाद लोड करें और नया हिंडोला फ़ंक्शन जोड़ें। केवल एक पंक्ति जिसे आप संपादित करना चाहते हैं वह यह है, Carousel.TRANSITION_DURATION = 1500. 1500 1.5 है। उम्मीद है की यह मदद करेगा।

    +function ($) {
  'use strict';

  // CAROUSEL CLASS DEFINITION
  // =========================

  var Carousel = function (element, options) {
    this.$element    = $(element)
    this.$indicators = this.$element.find('.carousel-indicators')
    this.options     = options
    this.paused      = null
    this.sliding     = null
    this.interval    = null
    this.$active     = null
    this.$items      = null

    this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))

    this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
      .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
      .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
  }

  Carousel.VERSION  = '3.3.5'

  Carousel.TRANSITION_DURATION = 1500

  Carousel.DEFAULTS = {
    interval: 5000,
    pause: 'hover',
    wrap: true,
    keyboard: true
  }

  Carousel.prototype.keydown = function (e) {
    if (/input|textarea/i.test(e.target.tagName)) return
    switch (e.which) {
      case 37: this.prev(); break
      case 39: this.next(); break
      default: return
    }

    e.preventDefault()
  }

  Carousel.prototype.cycle = function (e) {
    e || (this.paused = false)

    this.interval && clearInterval(this.interval)

    this.options.interval
      && !this.paused
      && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))

    return this
  }

  Carousel.prototype.getItemIndex = function (item) {
    this.$items = item.parent().children('.item')
    return this.$items.index(item || this.$active)
  }

  Carousel.prototype.getItemForDirection = function (direction, active) {
    var activeIndex = this.getItemIndex(active)
    var willWrap = (direction == 'prev' && activeIndex === 0)
                || (direction == 'next' && activeIndex == (this.$items.length - 1))
    if (willWrap && !this.options.wrap) return active
    var delta = direction == 'prev' ? -1 : 1
    var itemIndex = (activeIndex + delta) % this.$items.length
    return this.$items.eq(itemIndex)
  }

  Carousel.prototype.to = function (pos) {
    var that        = this
    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))

    if (pos > (this.$items.length - 1) || pos < 0) return

    if (this.sliding)       return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
    if (activeIndex == pos) return this.pause().cycle()

    return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos))
  }

  Carousel.prototype.pause = function (e) {
    e || (this.paused = true)

    if (this.$element.find('.next, .prev').length && $.support.transition) {
      this.$element.trigger($.support.transition.end)
      this.cycle(true)
    }

    this.interval = clearInterval(this.interval)

    return this
  }

  Carousel.prototype.next = function () {
    if (this.sliding) return
    return this.slide('next')
  }

  Carousel.prototype.prev = function () {
    if (this.sliding) return
    return this.slide('prev')
  }

  Carousel.prototype.slide = function (type, next) {
    var $active   = this.$element.find('.item.active')
    var $next     = next || this.getItemForDirection(type, $active)
    var isCycling = this.interval
    var direction = type == 'next' ? 'left' : 'right'
    var that      = this

    if ($next.hasClass('active')) return (this.sliding = false)

    var relatedTarget = $next[0]
    var slideEvent = $.Event('slide.bs.carousel', {
      relatedTarget: relatedTarget,
      direction: direction
    })
    this.$element.trigger(slideEvent)
    if (slideEvent.isDefaultPrevented()) return

    this.sliding = true

    isCycling && this.pause()

    if (this.$indicators.length) {
      this.$indicators.find('.active').removeClass('active')
      var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
      $nextIndicator && $nextIndicator.addClass('active')
    }

    var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
    if ($.support.transition && this.$element.hasClass('slide')) {
      $next.addClass(type)
      $next[0].offsetWidth // force reflow
      $active.addClass(direction)
      $next.addClass(direction)
      $active
        .one('bsTransitionEnd', function () {
          $next.removeClass([type, direction].join(' ')).addClass('active')
          $active.removeClass(['active', direction].join(' '))
          that.sliding = false
          setTimeout(function () {
            that.$element.trigger(slidEvent)
          }, 0)
        })
        .emulateTransitionEnd(Carousel.TRANSITION_DURATION)
    } else {
      $active.removeClass('active')
      $next.addClass('active')
      this.sliding = false
      this.$element.trigger(slidEvent)
    }

    isCycling && this.cycle()

    return this
  }


  // CAROUSEL PLUGIN DEFINITION
  // ==========================

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.carousel')
      var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
      var action  = typeof option == 'string' ? option : options.slide

      if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
      if (typeof option == 'number') data.to(option)
      else if (action) data[action]()
      else if (options.interval) data.pause().cycle()
    })
  }

  var old = $.fn.carousel

  $.fn.carousel             = Plugin
  $.fn.carousel.Constructor = Carousel


  // CAROUSEL NO CONFLICT
  // ====================

  $.fn.carousel.noConflict = function () {
    $.fn.carousel = old
    return this
  }


  // CAROUSEL DATA-API
  // =================

  var clickHandler = function (e) {
    var href
    var $this   = $(this)
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
    if (!$target.hasClass('carousel')) return
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    Plugin.call($target, options)

    if (slideIndex) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  }

  $(document)
    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

  $(window).on('load', function () {
    $('[data-ride="carousel"]').each(function () {
      var $carousel = $(this)
      Plugin.call($carousel, $carousel.data())
    })
  })

}(jQuery);
— कैमरून
स्रोत
1

अपने सीएसएस में:

.carousel-item {
    transition-duration: 1.5s, 1.5s;
}

ध्यान रखना, हिंडोला के लिए परिभाषित डेटा-अंतराल में समय शामिल है।

आशा है कि इससे सहायता मिलेगी... :)

— ओविदियु कोस्म
स्रोत
0

सभी हिंडोला 

  <script type="text/javascript">
              $(document).ready(function () {
            $('.carousel').carousel({
                interval: 15000
            })
        });

    </script>
— سیدرسول میرعدیمی
स्रोत
कृपया उत्तर के साथ स्पष्टीकरण प्रदान करें
— पैंथर
1
एक बार फिर यह केवल अंतराल को निर्धारित करता है, संक्रमण का समय नहीं
— टिम हॉलमैन
0

अपने main.js फ़ाइल या bootstrap.js में, का मूल्य बदल autoplayTimeout

    $('.carousel').each(function () {
        $(this).owlCarousel({
            nav: $(this).data('nav'),
            dots: $(this).data('dots'),
            loop: $(this).data('loop'),
            margin: $(this).data('space'),
            center: $(this).data('center'),
            dotsSpeed: $(this).data('speed'),
            autoplay: $(this).data('autoplay'),
            transitionStyle: $(this).data('transition'),
            animateOut: $(this).data('animate-out'),
            animateIn: $(this).data('animate-in'),
            autoplayTimeout: 3000,
            responsive: {
                0: {
                    items: 1,
                },
                400: {
                    items: $(this).data('slide-sm'),
                },
                700: {
                    items: $(this).data('slide-md'),
                },
                1000: {
                    items: $(this).data('slide'),
                }
            }
        });
    });
स्निपेट का विस्तार करें

— डब्ल्यू। केजेडी
स्रोत
0

आप इसका उपयोग कर सकते हैं

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">

बस डेटा-अंतराल = "1000" जोड़ें जहां अगली तस्वीर है। 1 सेकंड के बाद होगा।

— जोवन इलिक
स्रोत
-1

यदि ngCarousel मॉड्यूल का उपयोग कर रहे हैं, तो फ़ाइल में अंतराल चर @ ng-bootstrap / ng-bootstrap / carousel-config.js को संपादित करें:

var NgbCarouselConfig = /** @class */ (function () {
function NgbCarouselConfig() {
    this.interval = 10000;
    this.wrap = true;
    ...
}
...
— user773881
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.