بوت اسپت 5 اسلائڈر

ਰੋਟੇਸ਼ਨ ਹੋਲੀਕਾਰ / ਸਲੈਡ

ਰੋਟੇਸ਼ਨ ਹੋਲੀਕਾਰ (ਸਲੈਡ ਸ਼ੋਅ) ਸਿਰਫ਼ ਚਕਰਵਾਤੀ ਤਰੀਕੇ ਨਾਲ ਏਜੈਂਟਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਸਲੈਡ ਹੈ:

ਕਿਵੇਂ ਰੋਟੇਸ਼ਨ ਹੋਲੀਕਾਰ ਬਣਾਓ

ਇਹ ਉਦਾਹਰਣ ਇਹ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਸਿੱਧੇ ਕਾਰੂਸਲ ਨੂੰ ਸਿੱਧੇ ਸੰਕੇਤਕਾਂ ਅਤੇ ਕੰਟਰੋਲਾਂ ਨਾਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:

ਉਦਾਹਰਣ

<!-- ਕਾਰੂਸਲ -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- ਸੰਕੇਤਕ / ਅੰਕ -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- ਸਲੈਡ ਸ਼ੋਅ / ਕਾਰੂਸਲ -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- ਕੋਣਾਂ ਸੰਕੇਤਕ / ਆਇਕਾਨ -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਸਿਖਰ ਕਰੋ

ਉਦਾਹਰਣ ਵਿਆਖਿਆ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ ਹਰ ਵਰਗ ਦੇ ਕੰਮ ਦੀ ਵਰਣਨਾ:

ਵਰਗ ਵਰਣਨ
.carousel ਕਾਰਸੈਲ ਬਣਾਓ。
.carousel-indicators ਕਾਰਸੈਲ ਵਿੱਚ ਇੱਕ ਇੰਡੀਕੇਟਰ ਜੋੜੋ, ਉਹ ਹਰ ਸਲੈਡ ਦੇ ਨੀਚੇ ਦੇ ਛੋਟੇ ਬਿੰਦੂ ਹਨ。
ਕਾਰਸੈਲ ਵਿੱਚ ਸਲੈਡਾਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਅਤੇ ਯੂਜ਼ਰ ਕੰਮ 'ਤੇ ਕਿਸ ਸਲੈਡ 'ਤੇ ਹੈ ਉਹ ਦਰਸਾਉਂਦਾ ਹੈ。
.carousel-inner ਸਲੈਡ ਨੂੰ ਕਾਰਸੈਲ ਵਿੱਚ ਜੋੜੋ。
.carousel-item ਹਰ ਸਲੈਡ ਦੇ ਸਮਗਰੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
.carousel-control-prev ਲਰਨ ਵਿੱਚ ਇੱਕ ਛੋਟੇ (ਪਿਛਲਾ) ਬਟਨ ਜੋੜੋ, ਯੂਜ਼ਰ ਨੂੰ ਸਲੈਡ ਵਿੱਚ ਪਿੱਛੇ ਜਾਣ ਦੀ ਇਜਾਜ਼ਤ ਦੇਵੇ。
.carousel-control-next ਲਰਨ ਵਿੱਚ ਇੱਕ ਸੱਜੇ (ਅਗਲਾ) ਬਟਨ ਜੋੜੋ, ਯੂਜ਼ਰ ਨੂੰ ਸਲੈਡ ਵਿੱਚ ਅੱਗੇ ਜਾਣ ਦੀ ਇਜਾਜ਼ਤ ਦੇਵੇ。
.carousel-control-prev-icon ਨਾਲ .carousel-control-prev ਵਰਤੋਂ ਕਰਕੇ 'ਪਿਛਲਾ' ਬਟਨ ਬਣਾਓ。
.carousel-control-next-icon ਨਾਲ .carousel-control-next ਵਰਤੋਂ ਕਰਕੇ 'ਅਗਲਾ' ਬਟਨ ਬਣਾਓ。
.slide ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਤੋਂ ਦੂਜੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸਕਰਲ ਕਰਦੇ ਸਮੇਂ CSS ਟਰਾਂਸੀਸ਼ਨ ਅਤੇ ਏਨੀਮੇਸ਼ਨ ਜੋੜੋ。
ਅਗਰ ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਪ੍ਰਭਾਵ ਨਹੀਂ ਚਾਹੁੰਦੇ, ਤਾਂ ਇਸ ਵਰਗ ਨੂੰ ਹਟਾਓ。

ਸਲੈਡ ਲਈ ਸਿਰਲੇਖ ਜੋੜੋ

ਹਰ ਵਿੱਚ ਸਲੈਡ ਲਈ ਸਿਰਲੇਖ ਜੋੜੋ <div class="carousel-item"> ਅੰਦਰ <div class="carousel-caption"> ਅੰਦਰ ਵਿੱਚ ਏਕਲੀ ਵਸਤੂ ਜੋੜੋ, ਹਰ ਸਲੈਡ ਲਈ ਸਿਰਲੇਖ ਬਣਾਓ:

ਉਦਾਹਰਣ

<div class="carousel-item">
  <img src="beijing.jpg" alt="ਬੀਜਿੰਗ">
  <div class="carousel-caption">
    <h3>ਬੀਜਿੰਗ</h3>
    <p>ਧੰਨਵਾਦ, ਬੀਜਿੰਗ!</p>
  </div>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਸਿਖਰ ਕਰੋ