in English

ಏರಿಳಿಕೆ

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

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

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

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

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

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

ಕೊನೆಯದಾಗಿ, ನೀವು ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮೂಲದಿಂದ ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಇದು ಅಗತ್ಯವಿದೆutil.js .

ಉದಾಹರಣೆ

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

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

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

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

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

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

$('.carousel').carousel()

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ 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')

ಒಂದು ಅಂಶದ ಏರಿಳಿಕೆಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ.

.carousel('nextWhenVisible')

ಪುಟವು ಗೋಚರಿಸದಿದ್ದಾಗ ಅಥವಾ ಏರಿಳಿಕೆ ಅಥವಾ ಅದರ ಪೋಷಕರು ಗೋಚರಿಸದಿದ್ದಾಗ ಏರಿಳಿಕೆಯನ್ನು ಮುಂದಿನದಕ್ಕೆ ಸೈಕಲ್ ಮಾಡಬೇಡಿ. ಮುಂದಿನ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .slid.bs.carousel

.carousel('to')

ಏರಿಳಿಕೆಯನ್ನು ನಿರ್ದಿಷ್ಟ ಫ್ರೇಮ್‌ಗೆ ಸೈಕಲ್ ಮಾಡುತ್ತದೆ (0 ಆಧಾರಿತ, ರಚನೆಯಂತೆಯೇ). ಮುಂದಿನ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .slid.bs.carousel

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

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

  • 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 ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಕಸ್ಟಮ್ ಶೈಲಿಗಳೊಂದಿಗೆ ಪರಿವರ್ತನೆಯ ಅವಧಿಯನ್ನು .carousel-itemಬದಲಾಯಿಸಬಹುದು . $carousel-transitionಬಹು ಪರಿವರ್ತನೆಗಳನ್ನು ಅನ್ವಯಿಸಿದರೆ, ರೂಪಾಂತರ ಪರಿವರ್ತನೆಯನ್ನು ಮೊದಲು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾ. transition: transform 2s ease, opacity .5s ease-out).