in English

கொணர்வி

கொணர்வி போன்ற உறுப்புகள்-படங்கள் அல்லது உரையின் ஸ்லைடுகள் மூலம் சைக்கிள் ஓட்டுவதற்கான ஸ்லைடுஷோ கூறு.

எப்படி இது செயல்படுகிறது

கொணர்வி என்பது CSS 3D உருமாற்றங்கள் மற்றும் ஜாவாஸ்கிரிப்ட்டின் பிட் மூலம் கட்டமைக்கப்பட்ட தொடர்ச்சியான உள்ளடக்கத்தின் மூலம் சைக்கிள் ஓட்டுவதற்கான ஒரு ஸ்லைடுஷோ ஆகும். இது தொடர்ச்சியான படங்கள், உரை அல்லது தனிப்பயன் மார்க்அப் மூலம் வேலை செய்கிறது. இது முந்தைய/அடுத்த கட்டுப்பாடுகள் மற்றும் குறிகாட்டிகளுக்கான ஆதரவையும் உள்ளடக்கியது.

பக்கத் தெரிவுநிலை API ஆதரிக்கப்படும் உலாவிகளில் , இணையப்பக்கம் பயனருக்குத் தெரியாதபோது (உலாவி தாவல் செயலற்றதாக இருக்கும்போது, ​​உலாவி சாளரம் சிறிதாக்கப்படும்போது போன்றவை) ஸ்லைடு செய்வதைத் தவிர்க்கும்.

இந்தக் கூறுகளின் அனிமேஷன் விளைவு prefers-reduced-motionமீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும் .

உள்ளமைக்கப்பட்ட கொணர்விகள் ஆதரிக்கப்படவில்லை என்பதையும், கொணர்விகள் பொதுவாக அணுகல்தன்மைத் தரங்களுடன் இணங்கவில்லை என்பதையும் கவனத்தில் கொள்ளவும்.

கடைசியாக, நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்குகிறீர்கள் என்றால், அதற்குutil.js .

உதாரணமாக

ஸ்லைடு பரிமாணங்களை கொணர்வி தானாகவே இயல்பாக்காது. எனவே, உள்ளடக்கத்தை சரியான அளவில் அளவிட கூடுதல் பயன்பாடுகள் அல்லது தனிப்பயன் பாணிகளைப் பயன்படுத்த வேண்டியிருக்கலாம். கொணர்விகள் முந்தைய/அடுத்த கட்டுப்பாடுகள் மற்றும் குறிகாட்டிகளை ஆதரிக்கும் போது, ​​அவை வெளிப்படையாகத் தேவையில்லை. நீங்கள் பொருத்தமாக இருப்பதைச் சேர்க்கவும் மற்றும் தனிப்பயனாக்கவும்.

ஸ்லைடுகளில் ஒன்றில் .activeவகுப்பைச் சேர்க்க வேண்டும் இல்லையெனில் கொணர்வி காணப்படாது. விருப்பக் கட்டுப்பாடுகளுக்கான தனிப்பட்ட ஐடியை அமைக்கவும் .carousel, குறிப்பாக நீங்கள் ஒரு பக்கத்தில் பல கொணர்விகளைப் பயன்படுத்தினால். கட்டுப்பாடு மற்றும் குறிகாட்டி கூறுகள் உறுப்பு ஐடியுடன் பொருந்தக்கூடிய data-targetபண்புக்கூறு (அல்லது இணைப்புகளுக்கு) இருக்க வேண்டும்.href.carousel

ஸ்லைடுகள் மட்டும்

ஸ்லைடுகளை மட்டும் கொண்ட கொணர்வி இதோ. உலாவி இயல்புநிலை பட சீரமைப்பைத் தடுக்க, கொணர்வி படங்கள் .d-blockஇருப்பதைக் கவனியுங்கள் ..w-100

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

கட்டுப்பாடுகளுடன்

முந்தைய மற்றும் அடுத்த கட்டுப்பாடுகளைச் சேர்த்தல்:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

குறிகாட்டிகளுடன்

கட்டுப்பாடுகளுடன், கொணர்வியில் குறிகாட்டிகளையும் சேர்க்கலாம்.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

தலைப்புகளுடன்

.carousel-captionஏதேனும் உள்ள உறுப்புடன் உங்கள் ஸ்லைடுகளுக்கு எளிதாக தலைப்புகளைச் சேர்க்கவும் .carousel-item. கீழே காட்டப்பட்டுள்ளபடி, விருப்பமான காட்சிப் பயன்பாடுகளுடன் , சிறிய வியூபோர்ட்களில் அவற்றை எளிதாக மறைக்க முடியும் . முதலில் அவற்றை மறைத்து .d-noneநடுத்தர அளவிலான சாதனங்களில் கொண்டு வருகிறோம் .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

கிராஸ்ஃபேட்

.carousel-fadeஸ்லைடுக்கு பதிலாக ஃபேட் ட்ரான்சிஷன் மூலம் ஸ்லைடுகளை அனிமேட் செய்ய உங்கள் கொணர்வியில் சேர்க்கவும் .

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

அடுத்த உருப்படிக்கு தானாக சைக்கிள் ஓட்டுவதற்கு இடையில் தாமதமாகும் நேரத்தை மாற்ற, data-interval=""a இல் சேர்க்கவும் ..carousel-item

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

கொணர்வியின் நிலையை எளிதாகக் கட்டுப்படுத்த தரவு பண்புக்கூறுகளைப் பயன்படுத்தவும். data-slideமுக்கிய வார்த்தைகளை ஏற்றுக்கொள்கிறது prevஅல்லது next, ஸ்லைடு நிலையை அதன் தற்போதைய நிலைக்கு மாற்றும். மாற்றாக, data-slide-toஒரு மூல ஸ்லைடு குறியீட்டை கொணர்விக்கு அனுப்ப பயன்படுத்தவும் data-slide-to="2", இது ஸ்லைடு நிலையை ஒரு குறிப்பிட்ட குறியீட்டிற்கு மாற்றுகிறது 0.

data-ride="carousel"பக்க ஏற்றத்தில் தொடங்கி ஒரு கொணர்வியை அனிமேட் செய்வதாகக் குறிக்க பண்புக்கூறு பயன்படுத்தப்படுகிறது . உங்கள் கொணர்வியை துவக்க நீங்கள் பயன்படுத்தவில்லை என்றால் data-ride="carousel", அதை நீங்களே துவக்க வேண்டும். அதே கொணர்வியின் (தேவையற்ற மற்றும் தேவையற்ற) வெளிப்படையான ஜாவாஸ்கிரிப்ட் துவக்கத்துடன் இதைப் பயன்படுத்த முடியாது.

ஜாவாஸ்கிரிப்ட் வழியாக

கொணர்வியை கைமுறையாக அழைக்கவும்:

$('.carousel').carousel()

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-interval="".

பெயர் வகை இயல்புநிலை விளக்கம்
இடைவெளி எண் 5000 ஒரு பொருளை தானாக சைக்கிள் ஓட்டுவதற்கு இடையில் தாமதமாகும் நேரம். தவறு எனில், கொணர்வி தானாக சுழற்சி செய்யாது.
விசைப்பலகை பூலியன் உண்மை விசைப்பலகை நிகழ்வுகளுக்கு கொணர்வி எதிர்வினையாற்ற வேண்டுமா.
இடைநிறுத்தம் சரம் | பூலியன் "பயணம்"

என அமைக்கப்பட்டால் "hover", கொணர்வியின் சைக்கிள் ஓட்டத்தை இடைநிறுத்தி, கொணர்வியின் mouseenterசைக்கிள் ஓட்டத்தை மீண்டும் தொடங்கும் mouseleave. என அமைக்கப்பட்டால் false, கொணர்வியின் மேல் வட்டமிடுவது இடைநிறுத்தப்படாது.

டச்-இயக்கப்பட்ட சாதனங்களில், க்கு அமைக்கப்படும் போது "hover", ​​தானாக மீண்டும் தொடங்கும் முன், சைக்கிள் ஓட்டுதல் touchendஇரண்டு இடைவெளிகளுக்கு (பயனர் கொணர்வியுடன் தொடர்புகொண்டு முடித்தவுடன்) இடைநிறுத்தப்படும். இது மேலே உள்ள சுட்டி நடத்தைக்கு கூடுதலாக உள்ளது என்பதை நினைவில் கொள்ளவும்.
சவாரி லேசான கயிறு பொய் முதல் உருப்படியை பயனர் கைமுறையாக சுழற்சி செய்த பிறகு கொணர்வியைத் தானாக இயக்குகிறது. "கொணர்வி" என்றால், கொணர்வி ஏற்றப்பட்டதைத் தானாக இயக்கும்.
மடக்கு பூலியன் உண்மை கொணர்வி தொடர்ந்து சுழற்சி செய்யப்பட வேண்டுமா அல்லது கடினமாக நிறுத்தப்பட வேண்டுமா.
தொடுதல் பூலியன் உண்மை தொடுதிரை சாதனங்களில் இடது/வலது ஸ்வைப் தொடர்புகளை கொணர்வி ஆதரிக்க வேண்டுமா.

முறைகள்

ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

.carousel('nextWhenVisible')

Don’t cycle the carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('to')

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
  • from: The index of the current item
  • to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event Type Description
slide.bs.carousel This event fires immediately when the slide instance method is invoked.
slid.bs.carousel This event is fired when the carousel has completed its slide transition. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Change transition duration

நீங்கள் தொகுக்கப்பட்ட CSS ஐப் பயன்படுத்தினால், தொகுப்பதற்கு முன் சாஸ் மாறி அல்லது தனிப்பயன் பாணியுடன் மாறுதல் காலத்தை .carousel-itemமாற்றலாம் . $carousel-transitionபல மாற்றங்கள் பயன்படுத்தப்பட்டால், உருமாற்ற மாற்றம் முதலில் வரையறுக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும் (எ.கா. transition: transform 2s ease, opacity .5s ease-out).