ಏರಿಳಿಕೆ
ಏರಿಳಿಕೆಯಂತಹ ಅಂಶಗಳು-ಚಿತ್ರಗಳು ಅಥವಾ ಪಠ್ಯದ ಸ್ಲೈಡ್ಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಮಾಡಲು ಸ್ಲೈಡ್ಶೋ ಘಟಕ.
ಏರಿಳಿಕೆಯು 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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div>
</div>
</div>
ಹಿಂದಿನ ಮತ್ತು ಮುಂದಿನ ನಿಯಂತ್ರಣಗಳಲ್ಲಿ ಸೇರಿಸಲಾಗುತ್ತಿದೆ:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</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-slide
ಕೀವರ್ಡ್ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ prev
ಅಥವಾ next
, ಅದರ ಪ್ರಸ್ತುತ ಸ್ಥಾನಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಸ್ಲೈಡ್ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಪರ್ಯಾಯವಾಗಿ, data-slide-to
ಕಚ್ಚಾ ಸ್ಲೈಡ್ ಸೂಚ್ಯಂಕವನ್ನು ಏರಿಳಿಕೆಗೆ ರವಾನಿಸಲು ಬಳಸಿ data-slide-to="2"
, ಇದು ಸ್ಲೈಡ್ ಸ್ಥಾನವನ್ನು ನಿರ್ದಿಷ್ಟ ಸೂಚ್ಯಂಕಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ 0
.
data-ride="carousel"
ಪುಟ ಲೋಡ್ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಏರಿಳಿಕೆಯನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವಂತೆ ಗುರುತಿಸಲು ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ . ಅದೇ ಏರಿಳಿಕೆಯ (ಅನಾವಶ್ಯಕ ಮತ್ತು ಅನಗತ್ಯ) ಸ್ಪಷ್ಟ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾರಂಭದೊಂದಿಗೆ ಸಂಯೋಜನೆಯಲ್ಲಿ ಇದನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.
ಇದರೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಏರಿಳಿಕೆಗೆ ಕರೆ ಮಾಡಿ:
$('.carousel').carousel()
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-
, data-interval=""
.
ಹೆಸರು | ಮಾದರಿ | ಡೀಫಾಲ್ಟ್ | ವಿವರಣೆ |
---|---|---|---|
ಮಧ್ಯಂತರ | ಸಂಖ್ಯೆ | 5000 | ಐಟಂ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೈಕ್ಲಿಂಗ್ ಮಾಡುವ ನಡುವೆ ವಿಳಂಬವಾಗುವ ಸಮಯ. ತಪ್ಪಾಗಿದ್ದರೆ, ಏರಿಳಿಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೈಕಲ್ ಆಗುವುದಿಲ್ಲ. |
ಕೀಬೋರ್ಡ್ | ಬೂಲಿಯನ್ | ನಿಜ | ಕೀಬೋರ್ಡ್ ಈವೆಂಟ್ಗಳಿಗೆ ಏರಿಳಿಕೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕೆ. |
ವಿರಾಮ | ದಾರ | ಬೂಲಿಯನ್ | "ಹಾರಾಡುತ್ತಿರು" | ಗೆ ಹೊಂದಿಸಿದರೆ ಟಚ್-ಸಕ್ರಿಯಗೊಳಿಸಿದ ಸಾಧನಗಳಲ್ಲಿ, ಗೆ ಹೊಂದಿಸಿದಾಗ, ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪುನರಾರಂಭಿಸುವ ಮೊದಲು ಎರಡು ಮಧ್ಯಂತರಗಳವರೆಗೆ |
ಸವಾರಿ | ಸ್ಟ್ರಿಂಗ್ | ಸುಳ್ಳು | ಬಳಕೆದಾರರು ಮೊದಲ ಐಟಂ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಸೈಕಲ್ ಮಾಡಿದ ನಂತರ ಏರಿಳಿಕೆಯನ್ನು ಸ್ವಯಂಪ್ಲೇ ಮಾಡುತ್ತದೆ. "ಏರಿಳಿಕೆ" ಆಗಿದ್ದರೆ, ಲೋಡ್ನಲ್ಲಿ ಏರಿಳಿಕೆಯನ್ನು ಸ್ವಯಂಪ್ಲೇ ಮಾಡುತ್ತದೆ. |
ಸುತ್ತು | ಬೂಲಿಯನ್ | ನಿಜ | ಏರಿಳಿಕೆ ನಿರಂತರವಾಗಿ ಸೈಕಲ್ ಮಾಡಬೇಕೆ ಅಥವಾ ಹಾರ್ಡ್ ಸ್ಟಾಪ್ಗಳನ್ನು ಹೊಂದಿರಬೇಕೆ. |
ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು
ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .
ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಏರಿಳಿಕೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ object
ಮತ್ತು ಐಟಂಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
$('.carousel').carousel({
interval: 2000
})
ಎಡದಿಂದ ಬಲಕ್ಕೆ ಏರಿಳಿಕೆ ಐಟಂಗಳ ಮೂಲಕ ಸೈಕಲ್ಗಳು.
ಐಟಂಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಮಾಡುವುದರಿಂದ ಏರಿಳಿಕೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ.
ಏರಿಳಿಕೆಯನ್ನು ನಿರ್ದಿಷ್ಟ ಫ್ರೇಮ್ಗೆ ಸೈಕಲ್ ಮಾಡುತ್ತದೆ (0 ಆಧಾರಿತ, ರಚನೆಯಂತೆಯೇ). ಗುರಿಯ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .slid.bs.carousel
ಹಿಂದಿನ ಐಟಂಗೆ ಸೈಕಲ್ಗಳು. ಹಿಂದಿನ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗಿಸುತ್ತದೆ .slid.bs.carousel
ಮುಂದಿನ ಐಟಂಗೆ ಸೈಕಲ್ಗಳು. ಮುಂದಿನ ಐಟಂ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .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
).