ಏರಿಳಿಕೆ

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

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

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

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

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

ಕೊನೆಯದಾಗಿ, ನೀವು ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮೂಲದಿಂದ ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಇದು ಅಗತ್ಯವಿದೆ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 class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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>

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

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

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

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

$('.carousel').carousel()

ಆಯ್ಕೆಗಳು

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

ಪರಿವರ್ತನೆಯ ಅವಧಿಯನ್ನು ಬದಲಾಯಿಸಿ

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