କାରୁସେଲ |
ଉପାଦାନଗୁଡ଼ିକ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ ଏକ ସ୍ଲାଇଡ୍ ଶୋ ଉପାଦାନ - ଚିତ୍ର କିମ୍ବା ପାଠ୍ୟର ସ୍ଲାଇଡ୍ - କାରୁସେଲ ପରି |
ଏହା କିପରି କାମ କରେ |
CSS 3D ଟ୍ରାନ୍ସଫର୍ମ ଏବଂ ଟିକେ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ ନିର୍ମିତ ବିଷୟବସ୍ତୁ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ କାରୁସେଲ ହେଉଛି ଏକ ସ୍ଲାଇଡ୍ ଶୋ | ଏହା ଚିତ୍ର, ପାଠ୍ୟ, କିମ୍ବା କଷ୍ଟମ୍ ମାର୍କଅପ୍ ସହିତ କାର୍ଯ୍ୟ କରେ | ଏହା ପୂର୍ବ / ପରବର୍ତ୍ତୀ ନିୟନ୍ତ୍ରଣ ଏବଂ ସୂଚକ ପାଇଁ ସମର୍ଥନ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଯେଉଁଠାରେ ପେଜ୍ ଭିଜିବିଲିଟି API ସମର୍ଥିତ, ୱେବ୍ ପେଜ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ ନହେବା ସମୟରେ କାରୁସେଲ୍ ସ୍ଲାଇଡ୍ ଠାରୁ ଦୂରେଇ ରହିବ (ଯେପରିକି ଯେତେବେଳେ ବ୍ରାଉଜର୍ ଟ୍ୟାବ୍ ନିଷ୍କ୍ରିୟ, ବ୍ରାଉଜର୍ ୱିଣ୍ଡୋ କମ୍ କରାଯାଇଥାଏ, ଇତ୍ୟାଦି) |
prefers-reduced-motion
ମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ
|
ଦୟାକରି ସଚେତନ ରୁହନ୍ତୁ ଯେ ବସା ବାନ୍ଧୁଥିବା କାରୁସେଲଗୁଡିକ ସମର୍ଥିତ ନୁହଁନ୍ତି ଏବଂ କାରୁସେଲଗୁଡିକ ସାଧାରଣତ access ଉପଲବ୍ଧତା ମାନକ ସହିତ ଅନୁପଯୁକ୍ତ |
ଉଦାହରଣ |
କାରୁସେଲଗୁଡିକ ସ୍ଲାଇଡ୍ ଡାଇମେନ୍ସନ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସ୍ normal ାଭାବିକ କରେ ନାହିଁ | ଏହିପରି, ତୁମକୁ ଉପଯୁକ୍ତ ଆକାରର ବିଷୟବସ୍ତୁ ପାଇଁ ଅତିରିକ୍ତ ଉପଯୋଗୀତା କିମ୍ବା କଷ୍ଟମ୍ ଶ yles ଳୀ ବ୍ୟବହାର କରିବାକୁ ପଡିପାରେ | ଯେତେବେଳେ କାରୁସେଲ୍ ପୂର୍ବ / ପରବର୍ତ୍ତୀ ନିୟନ୍ତ୍ରଣ ଏବଂ ସୂଚକକୁ ସମର୍ଥନ କରେ, ସେଗୁଡିକ ସ୍ପଷ୍ଟ ଭାବରେ ଆବଶ୍ୟକ ନୁହେଁ | ଆପଣ ଯେପରି ଫିଟ୍ ଦେଖୁଛନ୍ତି ଯୋଡନ୍ତୁ ଏବଂ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ |
ଏକ .active
ସ୍ଲାଇଡ୍ ସହିତ କ୍ଲାସ୍ ଯୋଡିବା ଆବଶ୍ୟକ, ନଚେତ୍ କାରୁସେଲ୍ ଦୃଶ୍ୟମାନ ହେବ ନାହିଁ | id
ବ al କଳ୍ପିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଏକ ଅନନ୍ୟ ସେଟ୍ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ .carousel
, ବିଶେଷତ if ଯଦି ଆପଣ ଗୋଟିଏ ପୃଷ୍ଠାରେ ଏକାଧିକ କାରୁସେଲ ବ୍ୟବହାର କରୁଛନ୍ତି | କଣ୍ଟ୍ରୋଲ୍ ଏବଂ ସୂଚକ ଉପାଦାନଗୁଡ଼ିକର ଏକ data-bs-target
ଗୁଣ (କିମ୍ବା href
ଲିଙ୍କ୍ ପାଇଁ) ରହିବା ଆବଶ୍ୟକ ଯାହା ଉପାଦାନର ମେଳ ସହିତ ମେଳ id
ଖାଏ .carousel
|
କେବଳ ସ୍ଲାଇଡ୍ |
ଏଠାରେ କେବଳ ସ୍ଲାଇଡ୍ ସହିତ ଏକ କାରୁସେଲ୍ ଅଛି | ବ୍ରାଉଜରର ଡିଫଲ୍ଟ ଇମେଜ୍ ଆଲାଇନ୍ମେଣ୍ଟକୁ ରୋକିବା ପାଇଁ .d-block
ଏବଂ କାରୁସେଲ ପ୍ରତିଛବିଗୁଡ଼ିକର ଉପସ୍ଥିତି ଧ୍ୟାନ ଦିଅନ୍ତୁ |.w-100
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
ସୂଚକ ସହିତ |
ଆପଣ ନିୟନ୍ତ୍ରଣ ସହିତ କାରୁସେଲରେ ସୂଚକ ମଧ୍ୟ ଯୋଡିପାରିବେ |
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
କ୍ୟାପସନ୍ ସହିତ |
.carousel-caption
ଯେକ any ଣସି ଭିତରେ ଥିବା ଉପାଦାନ ସହିତ ସହଜରେ ଆପଣଙ୍କର ସ୍ଲାଇଡ୍ ରେ କ୍ୟାପସନ୍ ଯୋଡନ୍ତୁ .carousel-item
| ଇଚ୍ଛାଧୀନ ପ୍ରଦର୍ଶନ ଉପଯୋଗିତା ସହିତ ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି ସେଗୁଡିକ ସହଜରେ ଛୋଟ ଦୃଶ୍ୟରେ ଲୁକ୍କାୟିତ ହୋଇପାରିବ | ଆମେ ସେମାନଙ୍କୁ ପ୍ରାରମ୍ଭରେ ଲୁଚାଇଥାଉ .d-none
ଏବଂ ସେମାନଙ୍କୁ ମଧ୍ୟମ ଆକାରର ଉପକରଣଗୁଡ଼ିକରେ ଫେରାଇ ଆଣିବା .d-md-block
|
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
କ୍ରସଫେଡ୍ |
.carousel-fade
ସ୍ଲାଇଡ୍ ପରିବର୍ତ୍ତେ ଏକ ଦୁର୍ବଳ ସ୍ଥାନାନ୍ତରଣ ସହିତ ସ୍ଲାଇଡ୍ ଆନିମେଟ୍ କରିବାକୁ ଆପଣଙ୍କର କାରୁସେଲରେ ଯୋଡନ୍ତୁ |
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
ବ୍ୟକ୍ତିଗତ .carousel-item
ବ୍ୟବଧାନ
ପରବର୍ତ୍ତୀ ଆଇଟମକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସାଇକେଲ ଚଲାଇବା ମଧ୍ୟରେ ବିଳମ୍ବ କରିବାକୁ ସମୟ ପରିମାଣ ପରିବର୍ତ୍ତନ data-bs-interval=""
କରିବାକୁ ଏକ ଯୋଗ କରନ୍ତୁ |.carousel-item
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
ଟଚ୍ ସ୍ୱିପିଙ୍ଗ୍ ଅକ୍ଷମ କରନ୍ତୁ |
ସ୍ଲାଇଡ୍ ମଧ୍ୟରେ ଗତି କରିବା ପାଇଁ କାରୁସେଲ୍ ଟଚ୍ ସ୍କ୍ରିନ୍ ଡିଭାଇସରେ ବାମ / ଡାହାଣକୁ ସ୍ୱିପିଙ୍ଗ୍ କୁ ସମର୍ଥନ କରେ | data-bs-touch
ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ଏହା ଅକ୍ଷମ ହୋଇପାରିବ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ମଧ୍ୟ data-bs-ride
ଗୁଣବତ୍ତା ଅନ୍ତର୍ଭୂକ୍ତ କରେ ନାହିଁ ଏବଂ data-bs-interval="false"
ଏହା ଅଟୋପ୍ଲେ କରେ ନାହିଁ |
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
ଗା ark ପ୍ରକାର |
ଗା er ଼ ନିୟନ୍ତ୍ରଣ, ସୂଚକ, ଏବଂ କ୍ୟାପ୍ସନ୍ ପାଇଁ .carousel-dark
ଯୋଡନ୍ତୁ | CSS ସମ୍ପତ୍ତି .carousel
ସହିତ ସେମାନଙ୍କର ଡିଫଲ୍ଟ ଧଳା ଭରଣରୁ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ଓଲଟା ହୋଇଛି | filter
କ୍ୟାପସନ୍ ଏବଂ କଣ୍ଟ୍ରୋଲରେ ଅତିରିକ୍ତ ସାସ୍ ଭେରିଏବଲ୍ ଅଛି ଯାହା color
ଏବଂ background-color
।
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<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" data-bs-interval="2000">
<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-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
କଷ୍ଟମ୍ ସ୍ଥାନାନ୍ତରଣ |
ଯଦି ଆପଣ ସଙ୍କଳିତ CSS ବ୍ୟବହାର କରୁଛନ୍ତି ତେବେ କମ୍ପାଇଲ୍ କିମ୍ବା କଷ୍ଟମ୍ ଶ yles ଳୀ ପୂର୍ବରୁ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ପରିବର୍ତ୍ତନ ସମୟ .carousel-item
ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ | $carousel-transition-duration
ଯଦି ଏକାଧିକ ସଂକ୍ରମଣ ପ୍ରୟୋଗ କରାଯାଏ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରୂପାନ୍ତର ପରିବର୍ତ୍ତନ ପ୍ରଥମେ ବ୍ୟାଖ୍ୟା କରାଯାଇଛି (ଯଥା transition: transform 2s ease, opacity .5s ease-out
) |
ସାସ୍ |
ଭେରିଏବଲ୍ |
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
ବ୍ୟବହାର
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |
କାରୁସେଲର ସ୍ଥିତିକୁ ସହଜରେ ନିୟନ୍ତ୍ରଣ କରିବାକୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରନ୍ତୁ | data-bs-slide
କୀ ଶବ୍ଦଗୁଡ଼ିକୁ ଗ୍ରହଣ କରେ prev
କିମ୍ବା next
, ଯାହା ବର୍ତ୍ତମାନର ସ୍ଥିତି ସହିତ ସ୍ଲାଇଡ୍ ପୋଜିସନ୍ ବଦଳାଇଥାଏ | data-bs-slide-to
ବ ly କଳ୍ପିକ ଭାବରେ, କଞ୍ଚା ସ୍ଲାଇଡ୍ ଇଣ୍ଡେକ୍ସକୁ କାରୁସେଲକୁ ପଠାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ data-bs-slide-to="2"
, ଯାହା ସ୍ଲାଇଡ୍ ସ୍ଥିତିକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସୂଚକାଙ୍କକୁ ଆରମ୍ଭ କରିଥାଏ 0
|
data-bs-ride="carousel"
ପେଜ୍ ଲୋଡ୍ ଠାରୁ ଆରମ୍ଭ କରି ଆନିମେସନ୍ ଭାବରେ ଏକ କାରୁସେଲ୍ ଚିହ୍ନିତ କରିବାକୁ ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହୃତ ହୁଏ | ଯଦି ତୁମେ ତୁମର କାରୁସେଲ ଆରମ୍ଭ କରିବାକୁ ବ୍ୟବହାର କରୁନାହଁ data-bs-ride="carousel"
, ତୁମକୁ ଏହାକୁ ନିଜେ ଆରମ୍ଭ କରିବାକୁ ପଡିବ | ସମାନ କାରୁସେଲର (ଅନାବଶ୍ୟକ ଏବଂ ଅନାବଶ୍ୟକ) ସ୍ପଷ୍ଟ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ରାରମ୍ଭିକରଣ ସହିତ ଏହାକୁ ବ୍ୟବହାର କରାଯାଇପାରିବ ନାହିଁ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |
ସହିତ କାରୁସେଲକୁ କଲ୍ କରନ୍ତୁ:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
ବିକଳ୍ପଗୁଡ଼ିକ
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-
ଯେପରି ଯୋଡନ୍ତୁ data-bs-interval=""
|
ନାମ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ | | ବର୍ଣ୍ଣନା |
---|---|---|---|
interval |
ସଂଖ୍ୟା | 5000 |
ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଆଇଟମ୍ ସାଇକ୍ଲିଂ ମଧ୍ୟରେ ବିଳମ୍ବ କରିବାର ସମୟ | ଯଦି false , କାରୁସେଲ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଚକ୍ର କରିବ ନାହିଁ | |
keyboard |
ବୁଲିଅନ୍ | true |
କୀବୋର୍ଡ୍ ଇଭେଣ୍ଟଗୁଡିକ ଉପରେ କାରୁସେଲ୍ ପ୍ରତିକ୍ରିୟା କରିବା ଉଚିତ କି ନୁହେଁ | |
pause |
string | ବୁଲିଅନ୍ | 'hover' |
ଯଦି ସେଟ୍ କରାଯାଏ ଟଚ୍-ସକ୍ଷମ ଉପକରଣଗୁଡ଼ିକରେ, ଯେତେବେଳେ ସେଟ୍ ହୋଇଯାଏ |
ride |
string | ବୁଲିଅନ୍ | false |
ଉପଭୋକ୍ତା ପ୍ରଥମ ଆଇଟମ୍ ମାନୁଆଲ୍ ଚକ୍ର କରିବା ପରେ କାରୁସେଲ୍କୁ ସ୍ୱୟଂଚାଳିତ କରେ | ଯଦି ସେଟ୍ ହୋଇଛି 'carousel' , ଭାରରେ କାରୁସେଲକୁ ଅଟୋପ୍ଲେ କରେ | |
wrap |
ବୁଲିଅନ୍ | true |
କାରୁସେଲ କ୍ରମାଗତ ଭାବରେ ଚକ୍ର କରିବା ଉଚିତ କି ହାର୍ଡ ଷ୍ଟପ୍ ରହିବା ଉଚିତ୍ | |
touch |
ବୁଲିଅନ୍ | true |
ଟଚସ୍କ୍ରିନ ଉପକରଣଗୁଡ଼ିକରେ କାରୁସେଲ ବାମ / ଡାହାଣ ସ୍ୱାଇପ୍ ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ସମର୍ଥନ କରିବା ଉଚିତ କି ନୁହେଁ | |
ପ୍ରଣାଳୀ
ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
ଆପଣ କାରୁସେଲ କନଷ୍ଟ୍ରକ୍ଟର ସହିତ ଏକ କାରୁସେଲ ଉଦାହରଣ ସୃଷ୍ଟି କରିପାରିବେ, ଉଦାହରଣ ସ୍ୱରୂପ, ଅତିରିକ୍ତ ବିକଳ୍ପ ସହିତ ଆରମ୍ଭ କରିବା ଏବଂ ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଆରମ୍ଭ କରିବା:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
ପଦ୍ଧତି | ବର୍ଣ୍ଣନା |
---|---|
cycle |
ବାମରୁ ଡାହାଣକୁ କାରୁସେଲ ଆଇଟମ୍ ମାଧ୍ୟମରେ ଚକ୍ର | |
pause |
ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଠାରୁ କାରୁସେଲକୁ ବନ୍ଦ କରିଦିଏ | |
prev |
ପୂର୍ବ ଆଇଟମ୍ କୁ ଚକ୍ର | ପୂର୍ବ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, slid.bs.carousel ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) | |
next |
ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ପାଇଁ ଚକ୍ର | ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଯାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, slid.bs.carousel ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) | |
nextWhenVisible |
ଯେତେବେଳେ ପୃଷ୍ଠା ଦୃଶ୍ୟମାନ ହୁଏ ନାହିଁ କିମ୍ବା କାରୁସେଲ କିମ୍ବା ଏହାର ପିତାମାତା ଦୃଶ୍ୟମାନ ହୁଏ ନାହିଁ, ପରବର୍ତ୍ତୀ ସମୟରେ କାରୁସେଲ୍ ଚକ୍ର କରନ୍ତୁ ନାହିଁ | ଟାର୍ଗେଟ୍ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଯାଏ | |
to |
କାରୁସେଲକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଫ୍ରେମ୍ (0 ଆଧାରିତ, ଏକ ଆରେ ପରି) ଚକ୍ର କରେ | ଟାର୍ଗେଟ୍ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, slid.bs.carousel ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) | |
dispose |
ଏକ ଉପାଦାନର କାରୁସେଲ୍ ନଷ୍ଟ କରେ | (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ) |
getInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ DOM ଉପାଦାନ ସହିତ ଜଡିତ କାରୁସେଲ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଏକ କାରୁସେଲ୍ ଉଦାହରଣ ଫେରସ୍ତ କରେ କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରେ | ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Carousel.getOrCreateInstance(element) |
ଘଟଣା
ବୁଟଷ୍ଟ୍ରାପର କାରୁସେଲ ଶ୍ରେଣୀ କାରୁସେଲ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ ପାଇଁ ଦୁଇଟି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରିଥାଏ | ଉଭୟ ଇଭେଣ୍ଟରେ ନିମ୍ନଲିଖିତ ଅତିରିକ୍ତ ଗୁଣ ଅଛି:
direction
: ଯେଉଁ ଦିଗରେ କାରୁସେଲ୍ ସ୍ଲାଇଡ୍ ହେଉଛି ("left"
କିମ୍ବା"right"
) |relatedTarget
: DOM ଉପାଦାନ ଯାହା ସକ୍ରିୟ ଆଇଟମ୍ ଭାବରେ ସ୍ଥାନିତ ହୋଇଛି |from
: ସାମ୍ପ୍ରତିକ ଆଇଟମ୍ ର ଇଣ୍ଡେକ୍ସ |to
: ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ର ସୂଚକାଙ୍କ |
ସମସ୍ତ କାରୁସେଲ ଇଭେଣ୍ଟ ନିଜେ କାରୁସେଲ ଉପରେ (ଅର୍ଥାତ୍ <div class="carousel">
) ଉପରେ ଗୁଳି ଚଳାଇଥାଏ |
ଇଭେଣ୍ଟ ପ୍ରକାର | | ବର୍ଣ୍ଣନା |
---|---|
slide.bs.carousel |
slide ଉଦାହରଣ ପଦ୍ଧତି ଆହ୍ when ାନ ହେଲେ ତୁରନ୍ତ ଅଗ୍ନିକାଣ୍ଡ ହୁଏ | |
slid.bs.carousel |
ଯେତେବେଳେ କାରୁସେଲ୍ ଏହାର ସ୍ଲାଇଡ୍ ଟ୍ରାନ୍ସଫିସନ୍ ସମାପ୍ତ କଲା ସେତେବେଳେ ଫାୟାର୍ | |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})