ਕੈਰੋਸਲ
ਤੱਤਾਂ ਦੁਆਰਾ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਭਾਗ — ਚਿੱਤਰ ਜਾਂ ਟੈਕਸਟ ਦੀਆਂ ਸਲਾਈਡਾਂ — ਜਿਵੇਂ ਇੱਕ ਕੈਰੋਜ਼ਲ।
ਕਿਦਾ ਚਲਦਾ
ਕੈਰੋਜ਼ਲ ਸਮੱਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਹੈ, ਜੋ ਕਿ CSS 3D ਟ੍ਰਾਂਸਫਾਰਮ ਅਤੇ ਥੋੜ੍ਹੀ ਜਿਹੀ JavaScript ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਇਹ ਚਿੱਤਰਾਂ, ਟੈਕਸਟ ਜਾਂ ਕਸਟਮ ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਲੜੀ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਪਿਛਲੇ/ਅਗਲੇ ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਸੂਚਕਾਂ ਲਈ ਸਮਰਥਨ ਵੀ ਸ਼ਾਮਲ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਜਿੱਥੇ ਪੇਜ ਵਿਜ਼ੀਬਿਲਟੀ API ਸਮਰਥਿਤ ਹੈ, ਕੈਰੋਜ਼ਲ ਸਲਾਈਡ ਹੋਣ ਤੋਂ ਬਚੇਗਾ ਜਦੋਂ ਵੈਬਪੇਜ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਅਕਿਰਿਆਸ਼ੀਲ ਹੁੰਦੀ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਛੋਟੀ ਹੁੰਦੀ ਹੈ, ਆਦਿ)।
prefers-reduced-motion
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ
।
ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਨੇਸਟਡ ਕੈਰੋਜ਼ਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ, ਅਤੇ ਕੈਰੋਜ਼ਲ ਆਮ ਤੌਰ 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ ਮਾਪਦੰਡਾਂ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦੇ ਹਨ।
ਅੰਤ ਵਿੱਚ, ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ JavaScript ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਦੀ ਲੋੜ ਹੈ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
ਵਿੱਚ ਕੁਝ ਕਸਟਮ CSS ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ।.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"
, ਤਾਂ ਤੁਹਾਨੂੰ ਇਸਨੂੰ ਖੁਦ ਸ਼ੁਰੂ ਕਰਨਾ ਪਵੇਗਾ। ਇਹ ਉਸੇ ਕੈਰੋਜ਼ਲ ਦੇ (ਬੇਲੋੜੀ ਅਤੇ ਬੇਲੋੜੀ) ਸਪੱਸ਼ਟ JavaScript ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
JavaScript ਰਾਹੀਂ
ਕੈਰੋਸੇਲ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:
$('.carousel').carousel()
ਵਿਕਲਪ
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-interval=""
।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਅੰਤਰਾਲ | ਗਿਣਤੀ | 5000 | ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸਾਈਕਲ ਚਲਾਉਣ ਦੇ ਵਿਚਕਾਰ ਦੇਰੀ ਲਈ ਸਮੇਂ ਦੀ ਮਾਤਰਾ। ਜੇਕਰ false , ਕੈਰੋਜ਼ਲ ਆਪਣੇ ਆਪ ਚੱਕਰ ਨਹੀਂ ਲਵੇਗਾ। |
ਕੀਬੋਰਡ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਕੀਬੋਰਡ ਇਵੈਂਟਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। |
ਵਿਰਾਮ | ਸਤਰ | ਬੁਲੀਅਨ | 'ਹੋਵਰ' | ਜੇਕਰ ਇਸ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ਟਚ-ਸਮਰੱਥ ਡਿਵਾਈਸਾਂ 'ਤੇ, ਜਦੋਂ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ , ਤਾਂ |
ਸਵਾਰੀ | ਸਤਰ | ਝੂਠਾ | ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਪਹਿਲੀ ਆਈਟਮ ਨੂੰ ਹੱਥੀਂ ਚੱਕਰ ਲਗਾਉਣ ਤੋਂ ਬਾਅਦ ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਟੋਪਲੇ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ 'carousel' , ਤਾਂ ਲੋਡ ਹੋਣ 'ਤੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਟੋਪਲੇ ਕਰਦਾ ਹੈ। |
ਸਮੇਟਣਾ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਲਗਾਤਾਰ ਸਾਈਕਲ ਚਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਸਖ਼ਤ ਸਟਾਪਾਂ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। |
ਛੂਹ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਟੱਚਸਕ੍ਰੀਨ ਡਿਵਾਈਸਾਂ 'ਤੇ ਖੱਬੇ/ਸੱਜੇ ਸਵਾਈਪ ਇੰਟਰੈਕਸ਼ਨਾਂ ਦਾ ਸਮਰਥਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। |
ਢੰਗ
ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
.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 ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਕੰਪਾਇਲ ਕਰਨ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ ਤੋਂ ਪਹਿਲਾਂ Sass ਵੇਰੀਏਬਲ ਨਾਲ .carousel-item
ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ । $carousel-transition
ਜੇਕਰ ਮਲਟੀਪਲ ਪਰਿਵਰਤਨ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਟਰਾਂਸਫਾਰਮ ਪਰਿਵਰਤਨ ਪਹਿਲਾਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ (ਉਦਾਹਰਨ ਲਈ transition: transform 2s ease, opacity .5s ease-out
)।