ਕੈਰੋਸਲ

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

ਕਿਦਾ ਚਲਦਾ

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

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

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

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

ਉਦਾਹਰਨ

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

ਵਿਕਲਪਿਕ ਨਿਯੰਤਰਣਾਂ ਲਈ 'ਤੇ ਇੱਕ ਵਿਲੱਖਣ ਆਈਡੀ ਸੈਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ .carousel, ਖਾਸ ਕਰਕੇ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਪੰਨੇ 'ਤੇ ਇੱਕ ਤੋਂ ਵੱਧ ਕੈਰੋਸੇਲ ਵਰਤ ਰਹੇ ਹੋ।

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

ਇੱਥੇ ਸਿਰਫ਼ ਸਲਾਈਡਾਂ ਵਾਲਾ ਕੈਰੋਸਲ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਚਿੱਤਰ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਰੋਕਣ ਲਈ ਕੈਰੋਜ਼ਲ ਚਿੱਤਰਾਂ ਦੀ ਮੌਜੂਦਗੀ ਨੂੰ ਨੋਟ ਕਰੋ .d-block।.img-fluid

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

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

ਪਿਛਲੇ ਅਤੇ ਅਗਲੇ ਨਿਯੰਤਰਣ ਵਿੱਚ ਜੋੜਨਾ:

ਪਿਛਲਾ ਅਗਲਾ

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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।

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

ਨੂਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫੈਰੇਟਰਾ ਔਗ ਮੋਲਿਸ ਇੰਟਰਡਮ।

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ਪਿਛਲਾ ਅਗਲਾ

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

ਵਰਤੋਂ

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

ਕੈਰੋਜ਼ਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। data-slideਕੀਵਰਡਸ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ prevਜਾਂ next, ਜੋ ਇਸਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦਾ ਹੈ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, data-slide-toਇੱਕ ਕੱਚੀ ਸਲਾਈਡ ਸੂਚਕਾਂਕ ਨੂੰ ਕੈਰੋਜ਼ਲ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ ਵਰਤੋ data-slide-to="2", ਜੋ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਇੱਕ ਖਾਸ ਸੂਚਕਾਂਕ ਵਿੱਚ ਬਦਲਦਾ ਹੈ 0।

ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ data-ride="carousel"ਵਰਤੋਂ ਪੰਨੇ ਦੇ ਲੋਡ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਚਿੰਨ੍ਹਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਉਸੇ ਕੈਰੋਜ਼ਲ ਦੇ (ਬੇਲੋੜੀ ਅਤੇ ਬੇਲੋੜੀ) ਸਪੱਸ਼ਟ JavaScript ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

JavaScript ਰਾਹੀਂ

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

$('.carousel').carousel()

ਵਿਕਲਪ

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

ਢੰਗ

.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">)।

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})