ಏರಿಳಿಕೆ

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

ಈ ಪುಟದಲ್ಲಿ

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

ಏರಿಳಿಕೆಯು CSS 3D ರೂಪಾಂತರಗಳು ಮತ್ತು ಸ್ವಲ್ಪ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ವಿಷಯದ ಸರಣಿಯ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್‌ಗಾಗಿ ಸ್ಲೈಡ್‌ಶೋ ಆಗಿದೆ. ಇದು ಚಿತ್ರಗಳ ಸರಣಿ, ಪಠ್ಯ ಅಥವಾ ಕಸ್ಟಮ್ ಮಾರ್ಕ್‌ಅಪ್‌ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಹಿಂದಿನ/ಮುಂದಿನ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸೂಚಕಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ.

ಪುಟ ಗೋಚರತೆ API ಅನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ , ಬಳಕೆದಾರರಿಗೆ ವೆಬ್‌ಪುಟವು ಗೋಚರಿಸದಿದ್ದಾಗ ಏರಿಳಿಕೆ ಸ್ಲೈಡಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ನಿಷ್ಕ್ರಿಯವಾಗಿರುವಾಗ, ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಕಡಿಮೆಗೊಳಿಸಿದಾಗ, ಇತ್ಯಾದಿ.).

ಈ ಘಟಕದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು prefers-reduced-motionಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ .

ನೆಸ್ಟೆಡ್ ಕರೋಸೆಲ್‌ಗಳು ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಮತ್ತು ಕ್ಯಾರೌಸೆಲ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರವೇಶಿಸುವಿಕೆ ಮಾನದಂಡಗಳಿಗೆ ಅನುಗುಣವಾಗಿಲ್ಲ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ತಿಳಿದಿರಲಿ.

ಉದಾಹರಣೆ

ಏರಿಳಿಕೆಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಲೈಡ್ ಆಯಾಮಗಳನ್ನು ಸಾಮಾನ್ಯಗೊಳಿಸುವುದಿಲ್ಲ. ಅಂತೆಯೇ, ವಿಷಯವನ್ನು ಸೂಕ್ತವಾಗಿ ಗಾತ್ರಗೊಳಿಸಲು ನೀವು ಹೆಚ್ಚುವರಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಅಥವಾ ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು. ಏರಿಳಿಕೆಗಳು ಹಿಂದಿನ/ಮುಂದಿನ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸೂಚಕಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆಯಾದರೂ, ಅವುಗಳು ಸ್ಪಷ್ಟವಾಗಿ ಅಗತ್ಯವಿಲ್ಲ. ನಿಮಗೆ ಸರಿಹೊಂದುವಂತೆ ಸೇರಿಸಿ ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.

.activeಸ್ಲೈಡ್‌ಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ ಇಲ್ಲದಿದ್ದರೆ ಏರಿಳಿಕೆ ಗೋಚರಿಸುವುದಿಲ್ಲ . ಐಚ್ಛಿಕ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಅನನ್ಯವನ್ನು ಹೊಂದಿಸಲು ಮರೆಯದಿರಿ , ವಿಶೇಷವಾಗಿ ನೀವು ಒಂದೇ ಪುಟದಲ್ಲಿ ಅನೇಕ ಏರಿಳಿಕೆಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ id. .carouselನಿಯಂತ್ರಣ ಮತ್ತು ಸೂಚಕ ಅಂಶಗಳು ಅಂಶಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ಗುಣಲಕ್ಷಣವನ್ನು data-bs-target(ಅಥವಾ hrefಲಿಂಕ್‌ಗಳಿಗಾಗಿ) ಹೊಂದಿರಬೇಕು.id.carousel

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

ಸ್ಲೈಡ್‌ಗಳನ್ನು ಮಾತ್ರ ಹೊಂದಿರುವ ಏರಿಳಿಕೆ ಇಲ್ಲಿದೆ. ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಇಮೇಜ್ ಜೋಡಣೆಯನ್ನು ತಡೆಗಟ್ಟಲು ಏರಿಳಿಕೆ ಚಿತ್ರಗಳ ಉಪಸ್ಥಿತಿಯನ್ನು ಗಮನಿಸಿ .d-block..w-100

<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"

<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>

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

ನಿಯಂತ್ರಣಗಳ ಜೊತೆಗೆ ನೀವು ಸೂಚಕಗಳನ್ನು ಏರಿಳಿಕೆಗೆ ಸೇರಿಸಬಹುದು.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <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.

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

ಮೊದಲ ಸ್ಲೈಡ್‌ಗಾಗಿ ಕೆಲವು ಪ್ರಾತಿನಿಧಿಕ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯ.

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

ಎರಡನೇ ಸ್ಲೈಡ್‌ಗಾಗಿ ಕೆಲವು ಪ್ರಾತಿನಿಧಿಕ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯ.

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

ಮೂರನೇ ಸ್ಲೈಡ್‌ಗಾಗಿ ಕೆಲವು ಪ್ರಾತಿನಿಧಿಕ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯ.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <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ಸ್ಲೈಡ್ ಬದಲಿಗೆ ಫೇಡ್ ಪರಿವರ್ತನೆಯೊಂದಿಗೆ ಸ್ಲೈಡ್‌ಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ನಿಮ್ಮ ಏರಿಳಿಕೆಗೆ ಸೇರಿಸಿ .

<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

<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ಗುಣಲಕ್ಷಣವನ್ನು ಒಳಗೊಂಡಿಲ್ಲ ಮತ್ತು data-bs-interval="false"ಅದು ಸ್ವಯಂಪ್ಲೇ ಆಗುವುದಿಲ್ಲ.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="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ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳು ಹೆಚ್ಚುವರಿ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದು ಅದು colorಮತ್ತು background-color.

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

ಮೊದಲ ಸ್ಲೈಡ್‌ಗಾಗಿ ಕೆಲವು ಪ್ರಾತಿನಿಧಿಕ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯ.

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

ಎರಡನೇ ಸ್ಲೈಡ್‌ಗಾಗಿ ಕೆಲವು ಪ್ರಾತಿನಿಧಿಕ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯ.

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

ಮೂರನೇ ಸ್ಲೈಡ್‌ಗಾಗಿ ಕೆಲವು ಪ್ರಾತಿನಿಧಿಕ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯ.

<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", ನೀವೇ ಅದನ್ನು ಪ್ರಾರಂಭಿಸಬೇಕು. ಅದೇ ಏರಿಳಿಕೆಯ (ಅನಾವಶ್ಯಕ ಮತ್ತು ಅನಗತ್ಯ) ಸ್ಪಷ್ಟ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾರಂಭದೊಂದಿಗೆ ಸಂಯೋಜನೆಯಲ್ಲಿ ಇದನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.

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

ಇದರೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಏರಿಳಿಕೆಗೆ ಕರೆ ಮಾಡಿ:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-bs-, data-bs-interval="".

ಹೆಸರು	ಮಾದರಿ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`interval`	ಸಂಖ್ಯೆ	`5000`	ಐಟಂ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೈಕ್ಲಿಂಗ್ ಮಾಡುವ ನಡುವೆ ವಿಳಂಬವಾಗುವ ಸಮಯ. ಒಂದು ವೇಳೆ `false`, ಏರಿಳಿಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೈಕಲ್ ಆಗುವುದಿಲ್ಲ.
`keyboard`	ಬೂಲಿಯನ್	`true`	ಕೀಬೋರ್ಡ್ ಈವೆಂಟ್‌ಗಳಿಗೆ ಏರಿಳಿಕೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕೆ.
`pause`	ದಾರ \| ಬೂಲಿಯನ್	`'hover'`	ಗೆ ಹೊಂದಿಸಿದರೆ `'hover'`, ಏರಿಳಿಕೆಯ ಸೈಕ್ಲಿಂಗ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಆನ್ `mouseenter`ಏರಿಳಿಕೆಯ ಸೈಕ್ಲಿಂಗ್ ಅನ್ನು ಪುನರಾರಂಭಿಸುತ್ತದೆ `mouseleave`. ಗೆ ಹೊಂದಿಸಿದರೆ `false`, ಏರಿಳಿಕೆ ಮೇಲೆ ತೂಗಾಡುವುದರಿಂದ ಅದನ್ನು ವಿರಾಮಗೊಳಿಸುವುದಿಲ್ಲ. ಟಚ್-ಸಕ್ರಿಯಗೊಳಿಸಿದ ಸಾಧನಗಳಲ್ಲಿ, ಗೆ ಹೊಂದಿಸಿದಾಗ, ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪುನರಾರಂಭಿಸುವ ಮೊದಲು ಎರಡು ಮಧ್ಯಂತರಗಳವರೆಗೆ `'hover'`ಸೈಕ್ಲಿಂಗ್ `touchend`(ಬಳಕೆದಾರರು ಏರಿಳಿಕೆಯೊಂದಿಗೆ ಸಂವಹನವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ) ವಿರಾಮಗೊಳಿಸಲಾಗುತ್ತದೆ. ಇದು ಮೇಲಿನ ಮೌಸ್ ವರ್ತನೆಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
`ride`	ದಾರ \| ಬೂಲಿಯನ್	`false`	ಬಳಕೆದಾರರು ಮೊದಲ ಐಟಂ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಸೈಕಲ್ ಮಾಡಿದ ನಂತರ ಏರಿಳಿಕೆಯನ್ನು ಸ್ವಯಂಪ್ಲೇ ಮಾಡುತ್ತದೆ. ಗೆ ಹೊಂದಿಸಿದರೆ `'carousel'`, ಲೋಡ್‌ನಲ್ಲಿ ಏರಿಳಿಕೆಯನ್ನು ಸ್ವಯಂಪ್ಲೇ ಮಾಡುತ್ತದೆ.
`wrap`	ಬೂಲಿಯನ್	`true`	ಏರಿಳಿಕೆ ನಿರಂತರವಾಗಿ ಸೈಕಲ್ ಮಾಡಬೇಕೆ ಅಥವಾ ಹಾರ್ಡ್ ಸ್ಟಾಪ್‌ಗಳನ್ನು ಹೊಂದಿರಬೇಕೆ.
`touch`	ಬೂಲಿಯನ್	`true`	ಟಚ್‌ಸ್ಕ್ರೀನ್ ಸಾಧನಗಳಲ್ಲಿ ಎಡ/ಬಲ ಸ್ವೈಪ್ ಸಂವಹನಗಳನ್ನು ಏರಿಳಿಕೆ ಬೆಂಬಲಿಸಬೇಕೆ.

ವಿಧಾನಗಳು

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

ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ .

ನೀವು ಏರಿಳಿಕೆ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ನೊಂದಿಗೆ ಏರಿಳಿಕೆ ನಿದರ್ಶನವನ್ನು ರಚಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ಹೆಚ್ಚುವರಿ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ಮತ್ತು ಐಟಂಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

ವಿಧಾನ	ವಿವರಣೆ
`cycle`	ಎಡದಿಂದ ಬಲಕ್ಕೆ ಏರಿಳಿಕೆ ಐಟಂಗಳ ಮೂಲಕ ಸೈಕಲ್‌ಗಳು.
`pause`	ಐಟಂಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಮಾಡುವುದರಿಂದ ಏರಿಳಿಕೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ.
`prev`	ಹಿಂದಿನ ಐಟಂಗೆ ಸೈಕಲ್‌ಗಳು. ಹಿಂದಿನ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ (ಉದಾ, `slid.bs.carousel`ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು).
`next`	ಮುಂದಿನ ಐಟಂಗೆ ಸೈಕಲ್‌ಗಳು. ಮುಂದಿನ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ (ಉದಾ, `slid.bs.carousel`ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು).
`nextWhenVisible`	ಪುಟವು ಗೋಚರಿಸದಿದ್ದಾಗ ಅಥವಾ ಏರಿಳಿಕೆ ಅಥವಾ ಅದರ ಪೋಷಕ ಗೋಚರಿಸದಿದ್ದಾಗ ಮುಂದಿನದಕ್ಕೆ ಏರಿಳಿಕೆಯನ್ನು ಸೈಕಲ್ ಮಾಡಬೇಡಿ. ಗುರಿ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ
`to`	ಏರಿಳಿಕೆಯನ್ನು ನಿರ್ದಿಷ್ಟ ಫ್ರೇಮ್‌ಗೆ ಸೈಕಲ್ ಮಾಡುತ್ತದೆ (0 ಆಧಾರಿತ, ರಚನೆಯಂತೆಯೇ). ಗುರಿಯ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು (ಉದಾ, ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .`slid.bs.carousel`
`dispose`	ಒಂದು ಅಂಶದ ಏರಿಳಿಕೆಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. (DOM ಅಂಶದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ)
`getInstance`	DOM ಅಂಶಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಏರಿಳಿಕೆ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ, ನೀವು ಇದನ್ನು ಈ ರೀತಿ ಬಳಸಬಹುದು:`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	DOM ಅಂಶಕ್ಕೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಏರಿಳಿಕೆ ನಿದರ್ಶನವನ್ನು ಹಿಂದಿರುಗಿಸುವ ಸ್ಥಿರ ವಿಧಾನ ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಿ. ನೀವು ಇದನ್ನು ಈ ರೀತಿ ಬಳಸಬಹುದು:`bootstrap.Carousel.getOrCreateInstance(element)`

ಕಾರ್ಯಕ್ರಮಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಏರಿಳಿಕೆ ವರ್ಗವು ಏರಿಳಿಕೆ ಕಾರ್ಯಚಟುವಟಿಕೆಗೆ ಹುಕ್ ಮಾಡಲು ಎರಡು ಈವೆಂಟ್‌ಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಎರಡೂ ಘಟನೆಗಳು ಈ ಕೆಳಗಿನ ಹೆಚ್ಚುವರಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿವೆ:

direction: ಏರಿಳಿಕೆ ಸ್ಲೈಡಿಂಗ್ ಆಗುವ ದಿಕ್ಕಿನಲ್ಲಿ (ಒಂದೋ "left"ಅಥವಾ "right").
relatedTarget: DOM ಅಂಶವನ್ನು ಸಕ್ರಿಯ ಐಟಂ ಆಗಿ ಸ್ಲೈಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ.
from: ಪ್ರಸ್ತುತ ಐಟಂನ ಸೂಚ್ಯಂಕ
to: ಮುಂದಿನ ಐಟಂನ ಸೂಚ್ಯಂಕ

ಎಲ್ಲಾ ಏರಿಳಿಕೆ ಘಟನೆಗಳನ್ನು ಏರಿಳಿಕೆಯಲ್ಲಿಯೇ (ಅಂದರೆ ನಲ್ಲಿ <div class="carousel">) ಹಾರಿಸಲಾಗುತ್ತದೆ.

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

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

ಏರಿಳಿಕೆ

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

ಉದಾಹರಣೆ

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

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

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

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

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

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

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

ಕ್ರಾಸ್ಫೇಡ್

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

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

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

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

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

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

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

ಸಾಸ್

ಅಸ್ಥಿರ

ಬಳಕೆ

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

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

ಆಯ್ಕೆಗಳು

ವಿಧಾನಗಳು

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

ಕಾರ್ಯಕ್ರಮಗಳು

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