Source

ਕੈਰੋਸਲ

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

ਕਿਦਾ ਚਲਦਾ

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

ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਜਿੱਥੇ ਪੇਜ ਵਿਜ਼ੀਬਿਲਟੀ API ਸਮਰਥਿਤ ਹੈ, ਕੈਰੋਜ਼ਲ ਸਲਾਈਡ ਹੋਣ ਤੋਂ ਬਚੇਗਾ ਜਦੋਂ ਵੈਬਪੇਜ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਅਕਿਰਿਆਸ਼ੀਲ ਹੁੰਦੀ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਛੋਟੀ ਹੁੰਦੀ ਹੈ, ਆਦਿ)।

ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ prefers-reduced-motionਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ ।

ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਨੇਸਟਡ ਕੈਰੋਜ਼ਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ, ਅਤੇ ਕੈਰੋਜ਼ਲ ਆਮ ਤੌਰ 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ ਮਾਪਦੰਡਾਂ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦੇ ਹਨ।

ਅੰਤ ਵਿੱਚ, ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ JavaScript ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਦੀ ਲੋੜ ਹੈutil.js ।

ਉਦਾਹਰਨ

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

.activeਕਲਾਸ ਨੂੰ ਇੱਕ ਸਲਾਈਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਨਹੀਂ ਤਾਂ ਕੈਰੋਸਲ ਦਿਖਾਈ ਨਹੀਂ ਦੇਵੇਗਾ। ਵਿਕਲਪਿਕ ਨਿਯੰਤਰਣਾਂ ਲਈ 'ਤੇ ਇੱਕ ਵਿਲੱਖਣ ਆਈਡੀ ਸੈਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ .carousel, ਖਾਸ ਕਰਕੇ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਪੰਨੇ 'ਤੇ ਇੱਕ ਤੋਂ ਵੱਧ ਕੈਰੋਸੇਲ ਵਰਤ ਰਹੇ ਹੋ। ਨਿਯੰਤਰਣ ਅਤੇ ਸੰਕੇਤਕ ਤੱਤਾਂ ਵਿੱਚ ਇੱਕ data-targetਵਿਸ਼ੇਸ਼ਤਾ (ਜਾਂ hrefਲਿੰਕਾਂ ਲਈ) ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਜੋ .carouselਤੱਤ ਦੀ id ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ।

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

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

JavaScript ਰਾਹੀਂ

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

$('.carousel').carousel()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-interval=""।

ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
ਅੰਤਰਾਲ ਗਿਣਤੀ 5000 ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸਾਈਕਲ ਚਲਾਉਣ ਦੇ ਵਿਚਕਾਰ ਦੇਰੀ ਲਈ ਸਮੇਂ ਦੀ ਮਾਤਰਾ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ ਕੈਰੋਸਲ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਚੱਕਰ ਨਹੀਂ ਲਵੇਗਾ।
ਕੀਬੋਰਡ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਕੀਬੋਰਡ ਇਵੈਂਟਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
ਵਿਰਾਮ ਸਤਰ | ਬੁਲੀਅਨ "ਹੋਵਰ"

ਜੇਕਰ ਇਸ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ "hover", ਤਾਂ ਕੈਰੋਜ਼ਲ ਦੀ ਸਾਈਕਲਿੰਗ ਚਾਲੂ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਕੈਰੋਜ਼ਲ mouseenterਦੀ ਸਾਈਕਲਿੰਗ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ mouseleave। ਜੇਕਰ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ false, ਤਾਂ ਕੈਰੋਜ਼ਲ 'ਤੇ ਹੋਵਰ ਕਰਨ ਨਾਲ ਇਸ ਨੂੰ ਰੋਕਿਆ ਨਹੀਂ ਜਾਵੇਗਾ।

ਟਚ-ਸਮਰੱਥ ਡਿਵਾਈਸਾਂ 'ਤੇ, ਜਦੋਂ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ , ਤਾਂ "hover"ਸਾਈਕਲਿੰਗ touchendਆਪਣੇ ਆਪ ਮੁੜ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ, ਦੋ ਅੰਤਰਾਲਾਂ ਲਈ (ਉਪਭੋਗਤਾ ਦੇ ਕੈਰੋਜ਼ਲ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਤੋਂ ਬਾਅਦ) ਰੁਕ ਜਾਵੇਗੀ। ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਉਪਰੋਕਤ ਮਾਊਸ ਵਿਵਹਾਰ ਤੋਂ ਇਲਾਵਾ ਹੈ।
ਸਵਾਰੀ ਸਤਰ ਝੂਠਾ ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਪਹਿਲੀ ਆਈਟਮ ਨੂੰ ਹੱਥੀਂ ਚੱਕਰ ਲਗਾਉਣ ਤੋਂ ਬਾਅਦ ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਟੋਪਲੇ ਕਰਦਾ ਹੈ। ਜੇਕਰ "ਕੈਰੋਜ਼ਲ", ਲੋਡ ਹੋਣ 'ਤੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਟੋਪਲੇ ਕਰਦਾ ਹੈ।
ਸਮੇਟਣਾ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਲਗਾਤਾਰ ਸਾਈਕਲ ਚਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਸਖ਼ਤ ਸਟਾਪਾਂ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।
ਛੂਹ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਟੱਚਸਕ੍ਰੀਨ ਡਿਵਾਈਸਾਂ 'ਤੇ ਖੱਬੇ/ਸੱਜੇ ਸਵਾਈਪ ਇੰਟਰੈਕਸ਼ਨਾਂ ਦਾ ਸਮਰਥਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਢੰਗ

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

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।

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

.carousel(options)

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

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

.carousel('cycle')

ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਰਾਹੀਂ ਚੱਕਰ।

.carousel('pause')

ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

.carousel(number)

ਕੈਰੋਸਲ ਨੂੰ ਕਿਸੇ ਖਾਸ ਫ੍ਰੇਮ (0 ਅਧਾਰਤ, ਇੱਕ ਐਰੇ ਦੇ ਸਮਾਨ) ਵਿੱਚ ਚੱਕਰ ਲਗਾਓ। ਟਾਰਗੇਟ ਆਈਟਮ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ slid.bs.carouselਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

.carousel('prev')

ਪਿਛਲੀ ਆਈਟਮ ਲਈ ਚੱਕਰ। ਪਿਛਲੀ ਆਈਟਮ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ slid.bs.carouselਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

.carousel('next')

ਅਗਲੀ ਆਈਟਮ 'ਤੇ ਚੱਕਰ ਲਗਾਓ। ਅਗਲੀ ਆਈਟਮ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ (ਭਾਵ slid.bs.carouselਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

.carousel('dispose')

ਕਿਸੇ ਤੱਤ ਦੇ ਕੈਰੋਸਲ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਕੈਰੋਜ਼ਲ ਕਲਾਸ ਕੈਰੋਜ਼ਲ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਦੋ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ। ਦੋਵਾਂ ਘਟਨਾਵਾਂ ਦੀਆਂ ਹੇਠ ਲਿਖੀਆਂ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ:

  • direction: ਉਹ ਦਿਸ਼ਾ ਜਿਸ ਵਿੱਚ ਕੈਰੋਜ਼ਲ ਖਿਸਕ ਰਿਹਾ ਹੈ (ਜਾਂ "left"ਜਾਂ "right")।
  • relatedTarget: DOM ਤੱਤ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਆਈਟਮ ਦੇ ਤੌਰ 'ਤੇ ਥਾਂ 'ਤੇ ਖਿਸਕਿਆ ਜਾ ਰਿਹਾ ਹੈ।
  • from: ਮੌਜੂਦਾ ਆਈਟਮ ਦਾ ਸੂਚਕਾਂਕ
  • to: ਅਗਲੀ ਆਈਟਮ ਦਾ ਸੂਚਕਾਂਕ

ਕੈਰੋਜ਼ਲ ਦੀਆਂ ਸਾਰੀਆਂ ਘਟਨਾਵਾਂ ਕੈਰੋਜ਼ਲ 'ਤੇ ਹੀ ਫਾਇਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ (ਭਾਵ 'ਤੇ <div class="carousel">)।

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
slide.bs.carousel ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ slideਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
slid.bs.carousel ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਕੈਰੋਜ਼ਲ ਆਪਣੀ ਸਲਾਈਡ ਤਬਦੀਲੀ ਨੂੰ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ। 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

ਤਬਦੀਲੀ ਦੀ ਮਿਆਦ ਬਦਲੋ

ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਕੰਪਾਇਲ ਕਰਨ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ ਤੋਂ ਪਹਿਲਾਂ Sass ਵੇਰੀਏਬਲ ਨਾਲ .carousel-itemਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ । $carousel-transitionਜੇਕਰ ਮਲਟੀਪਲ ਪਰਿਵਰਤਨ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਟਰਾਂਸਫਾਰਮ ਪਰਿਵਰਤਨ ਪਹਿਲਾਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ (ਉਦਾਹਰਨ ਲਈ transition: transform 2s ease, opacity .5s ease-out)।