ކެރޮސެލް އެވެ
ކެރޮސެލް ފަދަ އުފެއްދުންތައް - ތަސްވީރު ނުވަތަ ލިޔުމުގެ ސްލައިޑްތައް - ސައިކަލް ކުރުމަށް ބޭނުންކުރާ ސްލައިޑްޝޯ ކޮމްޕޮނެންޓެކެވެ.
އެކަން ކުރާ ގޮތް
މި ކެރޮސެލް އަކީ ސީއެސްއެސް 3ޑީ ޓްރާންސްފޯމްތަކާއި ޖާވާސްކްރިޕްޓްގެ ތަންކޮޅެއް ބޭނުންކޮށްގެން ހަދާފައިވާ ސިލްސިލާ ކޮންޓެންޓެއްގެ ތެރެއިން ސައިކަލް ދުއްވުމަށް ސްލައިޑްޝޯއެކެވެ. އެއީ ސިލްސިލާ ތަސްވީރުތަކެއް، ލިޔުމެއް، ނުވަތަ ކަސްޓަމް މާކަޕްތަކަކާއެކު މަސައްކަތް ކުރާ އެއްޗެކެވެ. އަދި ކުރީގެ/ކުރިއަށް އޮތް ކޮންޓްރޯލްތަކާއި އިންޑިކޭޓަރތަކަށް ސަޕޯޓް ދިނުން ހިމެނެއެވެ.
ޕޭޖް ވިޒިބިލިޓީ އެޕީއައި އަށް ސަޕޯޓްކުރާ ބްރައުޒާތަކުގައި ، ވެބްޕޭޖް ޔޫޒަރަށް ނުފެންނަ ވަގުތުތަކުގައި (ބްރައުޒާ ޓެބް އިންއެކްޓިވް ވުމުން، ބްރައުޒާ ވިންޑޯ މިނިމައިޒް ވުމުން ފަދަ) ކެރޮސެލް ސްލައިޑް ނުވާނެއެވެ.
prefers-reduced-motion
މީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ
.
ނެސްޓްޑް ކެރޮސެލްތަކަށް ސަޕޯޓް ނުކުރާ ކަމާއި، އަދި ކެރޮސެލްތަކަކީ އާންމުކޮށް އެކްސެސިބިލިޓީ ސްޓޭންޑަރޑްތަކަށް ތަބާވާ އެއްޗެއް ނޫންކަން ސަމާލުކަން ދެއްވާށެވެ.
އެންމެ ފަހުން އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑް ކުރައްވަނީ ސޯސް އިން ނަމަ، އެއަށް ބޭނުންވަނީutil.js
.
މިސާލު
ކެރޮސެލްތަކުން އޮޓޮމެޓިކުން ސްލައިޑް ޑިމައިންސްތައް ނޯމަލައިޒް ނުކުރެއެވެ. އެގޮތުން، ކޮންޓެންޓް އެކަށީގެންވާ ގޮތެއްގައި ސައިޒް ކުރުމަށް އިތުރު ޔުޓިލިޓީސް ނުވަތަ ކަސްޓަމް ސްޓައިލްތައް ބޭނުން ކުރަން ޖެހިދާނެއެވެ. ކެރޮސެލްތަކުން ކުރީގެ/ކުރިއަށް އޮތް ކޮންޓްރޯލްތަކާއި އިންޑިކޭޓަރތަކަށް ސަޕޯޓްކުރާއިރު، އެއީ ސާފުކޮށް ބޭނުންވާ އެއްޗެއް ނޫނެވެ. އެޑްކޮށް ކަސްޓަމައިޒް ކުރާނީ ތިމާއަށް ފެންނަ ގޮތަކަށް.
އެއިން އެއް ސްލައިޑަކަށް .active
ކްލާސް އިތުރުކުރަން ޖެހޭ ނޫނީ ކެރޮސެލް ނުފެންނާނެއެވެ. އަދި ޚާއްޞަކޮށް އެއް ޞަފްޙާއެއްގައި އެތައް ކެރޮސެލްއެއް ބޭނުންކުރާނަމަ އިޚްތިޔާރީ ކޮންޓްރޯލްތަކަށް ޔުނިކް id
އޮން ދަ ސެޓް ކުރުން ޔަގީން ކުރައްވާށެވެ. .carousel
ކޮންޓްރޯލް އަދި އިންޑިކޭޓަރ އެލިމެންޓްތަކުގައި އެލިމެންޓާ އެއްގޮތްވާ އެޓްރިބިއުޓެއް data-target
(ނުވަތަ ލިންކްތަކަށް) ހުންނަންވާނެއެވެ .href
id
.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>
ކޮންޓްރޯލްތަކާއެކު
ކުރީގެ އަދި ދެން އޮތް ކޮންޓްރޯލްތަކުގައި އިތުރުކުރުން. އަޅުގަނޑުމެން ލަފާދެނީ އެލިމެންޓްސް ބޭނުންކުރުމަށެވެ، އެކަމަކު އާއެކު އެލިމެންޓްސް <button>
ވެސް ބޭނުންކުރެވިދާނެއެވެ .<a>
role="button"
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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>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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
ކްރޮސްފޭޑް އެވެ
.carousel-fade
ސްލައިޑްގެ ބަދަލުގައި ފޭޑް ޓްރާންސިޝަން އެއް އެކުލެވޭ ގޮތަށް ސްލައިޑްތައް އެނިމޭޓް ކުރުމަށް ކެރޮސެލް އަށް އެޑް ކޮށްލާށެވެ. ތިބާގެ ކެރޮސެލް ކޮންޓެންޓަށް ބަލާފައި (އެބަހީ، ހަމައެކަނި ޓެކްސްޓް ސްލައިޑްތައް)، ރަނގަޅަށް ކްރޮސްފޭޑިންގ އަށްޓަކައި s އަށް .bg-body
ނުވަތަ ކޮންމެވެސް ކަސްޓަމް ސީއެސްއެސްއެއް އިތުރުކުރަން ބޭނުންވެދާނެއެވެ ..carousel-item
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
ޓަޗް ސްވައިޕިންގ ޑިސެބިލް ކުރާށެވެ
ކެރޮސެލްސް އިން ސްލައިޑްތަކުގެ މެދުގައި ދަތުރުކުރުމަށް ޓަޗްސްކްރީން ޑިވައިސްތަކުގައި ކަނާތް/ވާތް ސްވައިޕް ކުރުމަށް ސަޕޯޓް ކުރެ އެވެ. data-touch
މިކަން އެޓްރިބިއުޓް ބޭނުންކޮށްގެން ޑިސެބިލް ކުރެވިދާނެއެވެ . ތިރީގައިވާ މިސާލުގައި ވެސް data-ride
އެޓްރިބިއުޓް data-interval="false"
ހިމަނާފައި ނުވާތީ އޮޓޯޕްލޭ ނުކުރެވެއެވެ.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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ރ | އެއްޗެއް އޮޓޮމެޓިކުން ސައިކަލް ދުއްވުމާ ދެމެދު ލަސްކުރަންޖެހޭ ވަގުތު. If false , ކެރޮސެލް އޮޓޮމެޓިކުން ސައިކަލް ނުކުރާނެއެވެ. |
ކީބޯޑެވެ | ބޫލިއަން އެވެ | ރަނގަޅު | ކީބޯޑް އިވެންޓްތަކަށް ކެރޮސެލް ރިއެކްޓް ކުރަންވީތޯ؟ |
މަޑުޖައްސާލުން | ސްޓްރިންގް | ބޫލިއަން އެވެ | 'ހޯވަރ' އެވެ. | އަށް ސެޓްކޮށްފިނަމަ ޓަޗް އެނެބަލް ޑިވައިސްތަކުގައި، އަށް ސެޓް ކުރުމުން ، އޮޓޮމެޓިކުން އަލުން ފެށުމުގެ ކުރިން |
ސަވާރީ | ސްޓްރިންގ | ރަނގަޅުނޫން | ފުރަތަމަ އެއްޗެއް މެނުއަލްކޮށް ސައިކަލް ކުރުމަށްފަހު ކެރޮސެލް އޮޓޯޕްލޭ ކޮށްދެއެވެ. އަށް ސެޓްކޮށްފިނަމަ 'carousel' ، ލޯޑްގައި ކެރޮސެލް އޮޓޯޕްލޭ ކޮށްދެއެވެ. |
އޮޅުން | ބޫލިއަން އެވެ | ރަނގަޅު | ކެރޮސެލް މެދުނުކެނޑި ސައިކަލް ދުއްވަންވީތޯ ނުވަތަ ހަރު ހުއްޓުމެއް ހުންނަންވީތޯއެވެ. |
އަތްލުން | ބޫލިއަން އެވެ | ރަނގަޅު | ޓަޗްސްކްރީން ޑިވައިސްތަކުގައި ކަނާތު/ވާތު ސްވައިޕް އިންޓަރެކްޝަންތަކަށް ކެރޮސެލް ސަޕޯޓް ކުރަންވީތޯ؟ |
ގޮތްތައް
އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް
ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާނަމަ އަޅާނުލެވޭނެއެވެ .
އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ .
.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
: އެކްޓިވް އައިޓަމްގެ ގޮތުގައި ތަނަށް ސްލައިޑް ކުރަމުންދާ ޑީއޯއެމް އެލިމެންޓް.from
: މިހާރު ހުރި އެއްޗެއްގެ އިންޑެކްސްto
: ދެން އަންނަ އެއްޗެއްގެ އިންޑެކްސް
ހުރިހާ ކެރޮސެލް އިވެންޓްތަކެއް ފަޔަރ ކުރަނީ ޚުދު ކެރޮސެލް އަށް (އެބަހީ އެ <div class="carousel">
) އެވެ.
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
ސްލައިޑް.ބީއެސް.ކެރޮސެލް | މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ slide އިންސްޓޭންސް މެތޯޑް އިންވޮކޭޓް ކުރުމުންނެވެ. |
ސްލިޑް.ބީއެސް.ކެރޮސެލް | މި އިވެންޓް ފަޔަރ ކުރެވެނީ ކެރޮސެލްގެ ސްލައިޑް ޓްރާންސިޝަން ފުރިހަމަ ކުރުމުންނެވެ. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
ޓްރާންސިޝަން މުއްދަތު ބަދަލުކުރުން
ކޮމްޕައިލް ކުރުމުގެ ކުރިން ސާސް ވެރިއޭބަލް އިން ނުވަތަ ކޮމްޕައިލް ކޮށްފައިވާ ސީއެސްއެސް ބޭނުންކުރާނަމަ ކަސްޓަމް ސްޓައިލްސް .carousel-item
އިން ބަދަލުކުރެވޭނީ ގެ ޓްރާންސިޝަން މުއްދަތެވެ . $carousel-transition
އެތައް ޓްރާންސިޝަންއެއް ތަންފީޒުކުރާނަމަ، ފުރަތަމަ ޓްރާންސްފޯމް ޓްރާންސިޝަން ކަނޑައެޅިފައިވާކަން ޔަޤީންކުރަންވާނެއެވެ (އެބަހީ transition: transform 2s ease, opacity .5s ease-out
).