ਕੈਰੋਸਲ

ਐਲੀਮੈਂਟਸ ਦੁਆਰਾ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਭਾਗ — ਚਿੱਤਰ ਜਾਂ ਟੈਕਸਟ ਦੀਆਂ ਸਲਾਈਡਾਂ — ਜਿਵੇਂ ਇੱਕ ਕੈਰੋਜ਼ਲ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਕਿਦਾ ਚਲਦਾ

ਕੈਰੋਜ਼ਲ ਸਮੱਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਹੈ, ਜੋ ਕਿ CSS 3D ਟ੍ਰਾਂਸਫਾਰਮ ਅਤੇ ਥੋੜ੍ਹੀ ਜਿਹੀ JavaScript ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਇਹ ਚਿੱਤਰਾਂ, ਟੈਕਸਟ ਜਾਂ ਕਸਟਮ ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਲੜੀ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਪਿਛਲੇ/ਅਗਲੇ ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਸੂਚਕਾਂ ਲਈ ਸਮਰਥਨ ਵੀ ਸ਼ਾਮਲ ਹੈ।

ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਜਿੱਥੇ ਪੇਜ ਵਿਜ਼ੀਬਿਲਟੀ 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>

ਵਿਅਕਤੀਗਤ `.carousel-item`ਅੰਤਰਾਲ

ਅਗਲੀ ਆਈਟਮ 'ਤੇ ਆਟੋਮੈਟਿਕ ਸਾਈਕਲਿੰਗ ਦੇ ਵਿਚਕਾਰ ਦੇਰੀ ਲਈ ਸਮੇਂ ਦੀ ਮਾਤਰਾ ਨੂੰ ਬਦਲਣ 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ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ । .carouselਨਿਯੰਤਰਣ ਨੂੰ ਉਹਨਾਂ ਦੇ ਡਿਫੌਲਟ ਸਫੈਦ ਭਰਨ ਤੋਂ filterCSS ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਉਲਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ। ਸੁਰਖੀਆਂ ਅਤੇ ਨਿਯੰਤਰਣਾਂ ਵਿੱਚ ਵਾਧੂ 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 ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਕੰਪਾਇਲ ਕਰਨ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ ਤੋਂ ਪਹਿਲਾਂ Sass ਵੇਰੀਏਬਲ ਨਾਲ .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", ਤਾਂ ਤੁਹਾਨੂੰ ਇਸਨੂੰ ਖੁਦ ਸ਼ੁਰੂ ਕਰਨਾ ਪਵੇਗਾ। ਇਹ ਉਸੇ ਕੈਰੋਜ਼ਲ ਦੇ (ਬੇਲੋੜੀ ਅਤੇ ਬੇਲੋੜੀ) ਸਪੱਸ਼ਟ JavaScript ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

JavaScript ਰਾਹੀਂ

ਕੈਰੋਸੇਲ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:

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

ਵਿਕਲਪ

ਜਿਵੇਂ ਕਿ ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਵਿਕਲਪ ਦਾ ਨਾਮ ਜੋੜ ਸਕਦੇ ਹੋ data-bs-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-bs-animation="{value}"। ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਵਿਕਲਪਾਂ ਨੂੰ ਪਾਸ ਕਰਦੇ ਸਮੇਂ ਵਿਕਲਪ ਨਾਮ ਦੀ ਕੇਸ ਕਿਸਮ ਨੂੰ " ਕੈਮਲਕੇਸ " ਤੋਂ " ਕਬਾਬ-ਕੇਸ " ਵਿੱਚ ਬਦਲਣਾ ਯਕੀਨੀ ਬਣਾਓ । ਉਦਾਹਰਨ ਲਈ, ਦੀ 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 ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ।

ਤੁਸੀਂ ਕੈਰੋਜ਼ਲ ਕੰਸਟਰਕਟਰ ਦੇ ਨਾਲ ਇੱਕ ਕੈਰੋਜ਼ਲ ਉਦਾਹਰਨ ਬਣਾ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ, ਵਾਧੂ ਵਿਕਲਪਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨ ਅਤੇ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ:

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...
})

ਕੈਰੋਸਲ

ਕਿਦਾ ਚਲਦਾ

ਉਦਾਹਰਨ

ਸਿਰਫ਼ ਸਲਾਈਡਾਂ

ਨਿਯੰਤਰਣ ਦੇ ਨਾਲ

ਸੂਚਕਾਂ ਦੇ ਨਾਲ

ਸੁਰਖੀਆਂ ਦੇ ਨਾਲ

ਪਹਿਲੀ ਸਲਾਈਡ ਲੇਬਲ

ਦੂਜੀ ਸਲਾਈਡ ਲੇਬਲ

ਤੀਜੀ ਸਲਾਈਡ ਲੇਬਲ

ਕਰਾਸਫੇਡ

ਵਿਅਕਤੀਗਤ .carousel-itemਅੰਤਰਾਲ

ਟੱਚ ਸਵਾਈਪਿੰਗ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਓ

ਗੂੜ੍ਹਾ ਰੂਪ

ਪਹਿਲੀ ਸਲਾਈਡ ਲੇਬਲ

ਦੂਜੀ ਸਲਾਈਡ ਲੇਬਲ

ਤੀਜੀ ਸਲਾਈਡ ਲੇਬਲ

ਕਸਟਮ ਤਬਦੀਲੀ

ਸੱਸ

ਵੇਰੀਏਬਲ

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਰਾਹੀਂ

ਵਿਕਲਪ

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਤਬਦੀਲੀਆਂ

ਸਮਾਗਮ

ਵਿਅਕਤੀਗਤ `.carousel-item`ਅੰਤਰਾਲ