ಏರಿಳಿಕೆ

ಏರಿಳಿಕೆಯಂತಹ ಅಂಶಗಳು-ಚಿತ್ರಗಳು ಅಥವಾ ಪಠ್ಯದ ಸ್ಲೈಡ್‌ಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಮಾಡಲು ಸ್ಲೈಡ್‌ಶೋ ಘಟಕ.

ಈ ಪುಟದಲ್ಲಿ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಏರಿಳಿಕೆಯು 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>

ವೈಯಕ್ತಿಕ `.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. 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}". ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸುವಾಗ "ಒಂಟೆ ಕೇಸ್" ನಿಂದ "ಕಬಾಬ್-ಕೇಸ್" ಗೆ ಆಯ್ಕೆಯ ಹೆಸರಿನ ಕೇಸ್ ಪ್ರಕಾರವನ್ನು ಬದಲಾಯಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ . ಉದಾಹರಣೆಗೆ, 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`	Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`nextWhenVisible`	Don’t cycle carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the target item has been shown.
`pause`	Stops the carousel from cycling through items.
`prev`	Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`to`	Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the `slid.bs.carousel` event occurs).

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event type	Description
`slid.bs.carousel`	ಏರಿಳಿಕೆ ತನ್ನ ಸ್ಲೈಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಫೈರ್ ಮಾಡಲಾಗಿದೆ.
`slide.bs.carousel`	`slide`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಅನ್ವಯಿಸಿದಾಗ ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ.

const myCarousel = document.getElementById('myCarousel')

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

ಏರಿಳಿಕೆ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಉದಾಹರಣೆ

ಸ್ಲೈಡ್‌ಗಳು ಮಾತ್ರ

ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ

ಸೂಚಕಗಳೊಂದಿಗೆ

ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ

ಮೊದಲ ಸ್ಲೈಡ್ ಲೇಬಲ್

ಎರಡನೇ ಸ್ಲೈಡ್ ಲೇಬಲ್

ಮೂರನೇ ಸ್ಲೈಡ್ ಲೇಬಲ್

ಕ್ರಾಸ್ಫೇಡ್

ವೈಯಕ್ತಿಕ .carousel-itemಮಧ್ಯಂತರ

ಸ್ಪರ್ಶ ಸ್ವೈಪಿಂಗ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ

ಡಾರ್ಕ್ ರೂಪಾಂತರ

ಮೊದಲ ಸ್ಲೈಡ್ ಲೇಬಲ್

ಎರಡನೇ ಸ್ಲೈಡ್ ಲೇಬಲ್

ಮೂರನೇ ಸ್ಲೈಡ್ ಲೇಬಲ್

ಕಸ್ಟಮ್ ಪರಿವರ್ತನೆ

ಸಾಸ್

ಅಸ್ಥಿರ

ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

ಆಯ್ಕೆಗಳು

ವಿಧಾನಗಳು

ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು

Events

ವೈಯಕ್ತಿಕ `.carousel-item`ಮಧ್ಯಂತರ