முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
Check
in English

கொணர்வி

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

இந்தப் பக்கத்தில்

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

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

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

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

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

உதாரணமாக

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

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

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

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

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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>

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

முந்தைய மற்றும் அடுத்த கட்டுப்பாடுகளைச் சேர்த்தல். உறுப்புகளைப் பயன்படுத்த பரிந்துரைக்கிறோம் <button>, ஆனால் நீங்கள் <a>உடன் உறுப்புகளையும் பயன்படுத்தலாம் role="button".

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

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

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

கிராஸ்ஃபேட்

.carousel-fadeஸ்லைடுக்கு பதிலாக ஃபேட் ட்ரான்சிஷன் மூலம் ஸ்லைடுகளை அனிமேட் செய்ய உங்கள் கொணர்வியில் சேர்க்கவும் . உங்கள் கொணர்வி உள்ளடக்கத்தைப் பொறுத்து (எ.கா., டெக்ஸ்ட் மட்டும் ஸ்லைடுகள்), நீங்கள் சரியான குறுக்குவழிக்காக s இல் .bg-bodyசில தனிப்பயன் CSS ஐச் சேர்க்க விரும்பலாம் ..carousel-item

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

டச் ஸ்வைப் செய்வதை முடக்கு

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

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

இருண்ட மாறுபாடு

இருண்ட கட்டுப்பாடுகள், குறிகாட்டிகள் மற்றும் தலைப்புகளுக்குச் சேர்க்கவும் .carousel-dark. CSS .carouselபண்புடன் அவற்றின் இயல்பு வெள்ளை நிரப்புதலில் இருந்து கட்டுப்பாடுகள் தலைகீழாக மாற்றப்பட்டுள்ளன . filterதலைப்புகள் மற்றும் கட்டுப்பாடுகளில் கூடுதல் Sass மாறிகள் உள்ளன, அவை colorமற்றும் background-color.

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

விருப்ப மாற்றம்

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

சாஸ்

மாறிகள்

அனைத்து கொணர்விகளுக்கான மாறிகள்:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

இருண்ட கொணர்விக்கான மாறிகள் :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

பயன்பாடு

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

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

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

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

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

const carousel = new bootstrap.Carousel('#myCarousel')

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

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் வழியாக விருப்பங்களை அனுப்ப முடியும் என்பதால், இல் உள்ளதைப் போல விருப்பப் பெயரை நீங்கள் data-bs-சேர்க்கலாம் data-bs-animation="{value}". தரவு பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, ​​" camelCase " என்பதிலிருந்து " kebab-case " என்ற விருப்பப் பெயரின் கேஸ் வகையை மாற்றுவதை உறுதிசெய்யவும் . எடுத்துக்காட்டாக, க்கு data-bs-custom-class="beautifier"பதிலாக பயன்படுத்தவும் data-bs-customClass="beautifier".

பூட்ஸ்டார்ப் 5.2.0 இன் படி, அனைத்து கூறுகளும் ஒரு சோதனை முன்பதிவு செய்யப்பட்ட தரவு பண்புக்கூறை ஆதரிக்கின்றன data-bs-config, இது JSON சரமாக எளிய கூறு உள்ளமைவைக் கொண்டிருக்கும். ஒரு உறுப்பு data-bs-config='{"delay":0, "title":123}'மற்றும் data-bs-title="456"பண்புக்கூறுகள் இருக்கும்போது, ​​​​இறுதி titleமதிப்பு இருக்கும் 456மற்றும் தனி தரவு பண்புக்கூறுகள் இல் கொடுக்கப்பட்ட மதிப்புகளை மீறும் data-bs-config. கூடுதலாக, தற்போதுள்ள தரவு பண்புக்கூறுகள் போன்ற JSON மதிப்புகளை வைக்க முடியும் data-bs-delay='{"show":0,"hide":150}'.

பெயர் வகை இயல்புநிலை விளக்கம்
interval எண் 5000 ஒரு பொருளை தானாக சைக்கிள் ஓட்டுவதற்கு இடையில் தாமதமாகும் நேரம்.
keyboard பூலியன் true விசைப்பலகை நிகழ்வுகளுக்கு கொணர்வி எதிர்வினையாற்ற வேண்டுமா.
pause சரம், பூலியன் "hover" என அமைக்கப்பட்டால் "hover", கொணர்வியின் சைக்கிள் ஓட்டத்தை இடைநிறுத்தி, கொணர்வியின் mouseenterசைக்கிள் ஓட்டத்தை மீண்டும் தொடங்கும் mouseleave. என அமைக்கப்பட்டால் false, கொணர்வியின் மேல் வட்டமிடுவது இடைநிறுத்தப்படாது. டச்-இயக்கப்பட்ட சாதனங்களில், க்கு அமைக்கப்படும் போது "hover", ​​தானாக மீண்டும் தொடங்கும் முன், சைக்கிள் ஓட்டுதல் touchendஇரண்டு இடைவெளிகளுக்கு (பயனர் கொணர்வியுடன் தொடர்புகொண்டு முடித்தவுடன்) இடைநிறுத்தப்படும். இது சுட்டி நடத்தைக்கு கூடுதலாகும்.
ride சரம், பூலியன் false என அமைக்கப்பட்டால் true, முதல் உருப்படியை பயனர் கைமுறையாக சுழற்சி செய்த பிறகு, கொணர்வி தானாக இயக்கப்படும். என அமைக்கப்பட்டால் "carousel", கொணர்வி ஏற்றப்பட்டதைத் தானாக இயக்கும்.
touch பூலியன் true தொடுதிரை சாதனங்களில் இடது/வலது ஸ்வைப் தொடர்புகளை கொணர்வி ஆதரிக்க வேண்டுமா.
wrap பூலியன் true கொணர்வி தொடர்ந்து சுழற்சி செய்யப்பட வேண்டுமா அல்லது கடினமாக நிறுத்தப்பட வேண்டுமா.

முறைகள்

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

அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

கொணர்வி கட்டமைப்பாளருடன் நீங்கள் ஒரு கொணர்வி நிகழ்வை உருவாக்கலாம், எடுத்துக்காட்டாக, கூடுதல் விருப்பங்களுடன் தொடங்கவும் மற்றும் உருப்படிகள் மூலம் சைக்கிள் ஓட்டத் தொடங்கவும்:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
முறை விளக்கம்
cycle இடமிருந்து வலமாக கொணர்வி உருப்படிகள் மூலம் சுழற்சிகள்.
dispose ஒரு தனிமத்தின் கொணர்வியை அழிக்கிறது. (DOM உறுப்பில் சேமிக்கப்பட்ட தரவை நீக்குகிறது)
getInstance DOM உறுப்புடன் தொடர்புடைய கொணர்வி நிகழ்வைப் பெற உங்களை அனுமதிக்கும் நிலையான முறை, இதை நீங்கள் இப்படிப் பயன்படுத்தலாம்: bootstrap.Carousel.getInstance(element).
getOrCreateInstance DOM உறுப்புடன் தொடர்புடைய கொணர்வி நிகழ்வை வழங்கும் நிலையான முறை அல்லது அது துவக்கப்படாமல் இருந்தால் புதியதை உருவாக்குகிறத���. நீங்கள் இதை இப்படி பயன்படுத்தலாம்: bootstrap.Carousel.getOrCreateInstance(element).
next அடுத்த உருப்படிக்கான சுழற்சிகள். அடுத்த உருப்படி காட்டப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்புகிறது (எ.கா. slid.bs.carouselநிகழ்வு நிகழும் முன்).
nextWhenVisible பக்கம் தெரியாதபோது அல்லது கொணர்வி அல்லது அதன் பெற்றோர் தெரியாதபோது அடுத்ததாக சைக்கிள் கொணர்வியை இயக்க வேண்டாம். இலக்கு உருப்படி காட்டப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்புகிறது .
pause பொருட்கள் வழியாக சைக்கிள் ஓட்டுவதை கொணர்வி நிறுத்துகிறது.
prev முந்தைய உருப்படிக்கான சுழற்சிகள். முந்தைய உருப்படி காட்டப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்புகிறது (எ.கா., slid.bs.carouselநிகழ்வு நிகழும் முன்).
to கொணர்வியை ஒரு குறிப்பிட்ட சட்டகத்திற்குச் சுழற்றுகிறது (0 அடிப்படையிலானது, வரிசையைப் போன்றது). இலக்கு உருப்படி காட்டப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்புகிறது (எ.கா., slid.bs.carouselநிகழ்வு நிகழும் முன்).

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் கொணர்வி வகுப்பு, கொணர்வி செயல்பாட்டில் இணைக்கும் இரண்டு நிகழ்வுகளை வெளிப்படுத்துகிறது. இரண்டு நிகழ்வுகளும் பின்வரும் கூடுதல் பண்புகளைக் கொண்டுள்ளன:

  • direction: கொணர்வி சறுக்கும் திசையில் (ஒன்று "left"அல்லது "right").
  • relatedTarget: செயலில் உள்ள பொருளாக மாற்றப்படும் DOM உறுப்பு.
  • from: தற்போதைய உருப்படியின் குறியீடு
  • to: அடுத்த உருப்படியின் குறியீடு

அனைத்து கொணர்வி நிகழ்வுகளும் கொணர்வியிலேயே சுடப்படுகின்றன (அதாவது இல் <div class="carousel">).

நிகழ்வு வகை விளக்கம்
slid.bs.carousel கொணர்வி அதன் ஸ்லைடு மாற்றத்தை முடித்ததும் சுடப்பட்டது.
slide.bs.carousel slideநிகழ்வு முறை பயன்படுத்தப்படும் போது உடனடியாக சுடுகிறது . 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})