କାରୁସେଲ |

ଉପାଦାନଗୁଡ଼ିକ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ ଏକ ସ୍ଲାଇଡ୍ ଶୋ ଉପାଦାନ - ଚିତ୍ର କିମ୍ବା ପାଠ୍ୟର ସ୍ଲାଇଡ୍ - କାରୁସେଲ ପରି |

ଏହି ପୃଷ୍ଠାରେ |

ଏହା କିପରି କାମ କରେ |

CSS 3D ଟ୍ରାନ୍ସଫର୍ମ ଏବଂ ଟିକେ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ ନିର୍ମିତ ବିଷୟବସ୍ତୁ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ କାରୁସେଲ ହେଉଛି ଏକ ସ୍ଲାଇଡ୍ ଶୋ | ଏହା ଚିତ୍ର, ପାଠ୍ୟ, କିମ୍ବା କଷ୍ଟମ୍ ମାର୍କଅପ୍ ସହିତ କାର୍ଯ୍ୟ କରେ | ଏହା ପୂର୍ବ / ପରବର୍ତ୍ତୀ ନିୟନ୍ତ୍ରଣ ଏବଂ ସୂଚକ ପାଇଁ ସମର୍ଥନ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଯେଉଁଠାରେ ପେଜ୍ ଭିଜିବିଲିଟି API ସମର୍ଥିତ, ୱେବ୍ ପେଜ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ ନହେବା ସମୟରେ କାରୁସେଲ୍ ସ୍ଲାଇଡ୍ ଠାରୁ ଦୂରେଇ ରହିବ (ଯେପରିକି ଯେତେବେଳେ ବ୍ରାଉଜର୍ ଟ୍ୟାବ୍ ନିଷ୍କ୍ରିୟ, ବ୍ରାଉଜର୍ ୱିଣ୍ଡୋ କମ୍ କରାଯାଇଥାଏ, ଇତ୍ୟାଦି) |

ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ prefers-reduced-motionମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ |

ଦୟାକରି ସଚେତନ ରୁହନ୍ତୁ ଯେ ନେଷ୍ଟେଡ୍ କାରୁସେଲ୍ ସମର୍ଥିତ ନୁହେଁ, ଏବଂ କାରୁସେଲ୍ ସାଧାରଣତ access ଆକ୍ସେସିବିଲିଟି ଷ୍ଟାଣ୍ଡାର୍ଡ ସହିତ ଅନୁପଯୁକ୍ତ |

ଉଦାହରଣ |

କାରୁସେଲଗୁଡିକ ସ୍ଲାଇଡ୍ ଡାଇମେନ୍ସନ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସ୍ normal ାଭାବିକ କରେ ନାହିଁ | ଏହିପରି, ତୁମକୁ ଉପଯୁକ୍ତ ଆକାରର ବିଷୟବସ୍ତୁ ପାଇଁ ଅତିରିକ୍ତ ଉପଯୋଗୀତା କିମ୍ବା କଷ୍ଟମ୍ ଶ yles ଳୀ ବ୍ୟବହାର କରିବାକୁ ପଡିପାରେ | ଯେତେବେଳେ କାରୁସେଲ୍ ପୂର୍ବ / ପରବର୍ତ୍ତୀ ନିୟନ୍ତ୍ରଣ ଏବଂ ସୂଚକକୁ ସମର୍ଥନ କରେ, ସେଗୁଡିକ ସ୍ପଷ୍ଟ ଭାବରେ ଆବଶ୍ୟକ ନୁହେଁ | ଆପଣ ଯେପରି ଫିଟ୍ ଦେଖୁଛନ୍ତି ଯୋଡନ୍ତୁ ଏବଂ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ |

ଏକ .activeସ୍ଲାଇଡ୍ ସହିତ କ୍ଲାସ୍ ଯୋଡିବା ଆବଶ୍ୟକ, ନଚେତ୍ କାରୁସେଲ୍ ଦୃଶ୍ୟମାନ ହେବ ନାହିଁ | idବ al କଳ୍ପିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଏକ ଅନନ୍ୟ ସେଟ୍ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ .carousel, ବିଶେଷତ if ଯଦି ଆପଣ ଗୋଟିଏ ପୃଷ୍ଠାରେ ଏକାଧିକ କାରୁସେଲ ବ୍ୟବହାର କରୁଛନ୍ତି | କଣ୍ଟ୍ରୋଲ୍ ଏବଂ ସୂଚକ ଉପାଦାନଗୁଡ଼ିକର ଏକ data-bs-targetଗୁଣ (କିମ୍ବା hrefଲିଙ୍କ୍ ପାଇଁ) ରହିବା ଆବଶ୍ୟକ ଯାହା ଉପାଦାନର ମେଳ ସହିତ ମେଳ idଖାଏ .carousel|

କେବଳ ସ୍ଲାଇଡ୍ |

ଏଠାରେ କେବଳ ସ୍ଲାଇଡ୍ ସହିତ ଏକ କାରୁସେଲ୍ ଅଛି | ବ୍ରାଉଜରର ଡିଫଲ୍ଟ ଇମେଜ୍ ଆଲାଇନ୍ମେଣ୍ଟକୁ ରୋକିବା ପାଇଁ .d-blockଏବଂ କାରୁସେଲ ପ୍ରତିଛବିଗୁଡ଼ିକର ଉପସ୍ଥିତି ଧ୍ୟାନ ଦିଅନ୍ତୁ |.w-100

html

<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"|

html

<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>

ସୂଚକ ସହିତ |

ଆପଣ ନିୟନ୍ତ୍ରଣ ସହିତ କାରୁସେଲରେ ସୂଚକ ମଧ୍ୟ ଯୋଡିପାରିବେ |

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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|

ପ୍ରଥମେ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ପ୍ରଥମ ସ୍ଲାଇଡ୍ ପାଇଁ କିଛି ପ୍ରତିନିଧୀ ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |

ଦ୍ୱିତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ଦ୍ୱିତୀୟ ସ୍ଲାଇଡ୍ ପାଇଁ କିଛି ପ୍ରତିନିଧୀ ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |

ତୃତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ତୃତୀୟ ସ୍ଲାଇଡ୍ ପାଇଁ କିଛି ପ୍ରତିନିଧୀ ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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ସ୍ଲାଇଡ୍ ପରିବର୍ତ୍ତେ ଏକ ଦୁର୍ବଳ ସ୍ଥାନାନ୍ତରଣ ସହିତ ସ୍ଲାଇଡ୍ ଆନିମେଟ୍ କରିବାକୁ ଆପଣଙ୍କର କାରୁସେଲରେ ଯୋଡନ୍ତୁ | ତୁମର କାରୁସେଲ ବିଷୟବସ୍ତୁ ଉପରେ ନିର୍ଭର କରି (ଉଦାହରଣ ସ୍ୱରୂପ, କେବଳ ଟେକ୍ସଟ୍ ସ୍ଲାଇଡ୍), ତୁମେ ସଠିକ୍ କ୍ରସ୍ଫେଡିଂ ପାଇଁ s ରେ .bg-bodyକିଛି କଷ୍ଟମ୍ CSS ଯୋଡିବାକୁ କିମ୍ବା ଚାହିଁବ |.carousel-item

html

<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

html

<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ଗୁଣକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ନାହିଁ ତେଣୁ ଏହା ଅଟୋପ୍ଲେ ନୁହେଁ |

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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।

ପ୍ରଥମେ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ପ୍ରଥମ ସ୍ଲାଇଡ୍ ପାଇଁ କିଛି ପ୍ରତିନିଧୀ ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |

ଦ୍ୱିତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ଦ୍ୱିତୀୟ ସ୍ଲାଇଡ୍ ପାଇଁ କିଛି ପ୍ରତିନିଧୀ ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |

ତୃତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ତୃତୀୟ ସ୍ଲାଇଡ୍ ପାଇଁ କିଛି ପ୍ରତିନିଧୀ ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |

html

<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`)

ଗା dark କାରୁସେଲ ପାଇଁ ଭେରିଏବଲ୍ :

$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", ତୁମକୁ ଏହାକୁ ନିଜେ ଆରମ୍ଭ କରିବାକୁ ପଡିବ | ସମାନ କାରୁସେଲର (ଅନାବଶ୍ୟକ ଏବଂ ଅନାବଶ୍ୟକ) ସ୍ପଷ୍ଟ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ରାରମ୍ଭିକରଣ ସହିତ ଏହାକୁ ବ୍ୟବହାର କରାଯାଇପାରିବ ନାହିଁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ସହିତ କାରୁସେଲକୁ କଲ୍ କରନ୍ତୁ:

const carousel = new bootstrap.Carousel('#myCarousel')

ବିକଳ୍ପଗୁଡ଼ିକ

ଯେହେତୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ ହୋଇପାରିବ, ତୁମେ ଯେପରି ଏକ ଅପ୍ସନ୍ ନାମ ଯୋଡି data-bs-ପାରିବ data-bs-animation="{value}"| ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ କରିବାବେଳେ ଅପ୍ସନ୍ ନାମର କେସ୍ ପ୍ରକାରକୁ “ camelCase ” ରୁ “ kebab-case ” କୁ ପରିବର୍ତ୍ତନ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଏହା ପରିବର୍ତ୍ତେ ବ୍ୟବହାର data-bs-custom-class="beautifier"କରନ୍ତୁ data-bs-customClass="beautifier"|

ବୁଟଷ୍ଟ୍ରାପ୍ 5.2.0 ପରି, ସମସ୍ତ ଉପାଦାନଗୁଡିକ ଏକ ପରୀକ୍ଷାମୂଳକ ସଂରକ୍ଷିତ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କୁ ସମର୍ଥନ data-bs-configକରେ ଯାହା JSON ଷ୍ଟ୍ରିଙ୍ଗ ଭାବରେ ସରଳ ଉପାଦାନ ସଂରଚନାକୁ ଧାରଣ କରିପାରିବ | ଯେତେବେଳେ ଏକ ଉପାଦାନର ଗୁଣ data-bs-config='{"delay":0, "title":123}'ଏବଂ data-bs-title="456"ଗୁଣ ଅଛି, ଅନ୍ତିମ titleମୂଲ୍ୟ ହେବ 456ଏବଂ ପୃଥକ ଡାଟା ଗୁଣଗୁଡ଼ିକ ଦିଆଯାଇଥିବା ମୂଲ୍ୟଗୁଡ଼ିକୁ ନବଲିଖନ କରିବ data-bs-config| ଏହା ସହିତ, ବିଦ୍ୟମାନ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଗୁଡିକ JSON ମୂଲ୍ୟ ପରି ଘର କରିବାକୁ ସକ୍ଷମ data-bs-delay='{"show":0,"hide":150}'|

ନାମ	ଟାଇପ୍ କରନ୍ତୁ \|	ଡିଫଲ୍ଟ \|	ବର୍ଣ୍ଣନା
`interval`	ସଂଖ୍ୟା	`5000`	ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଆଇଟମ୍ ସାଇକେଲ ଚଲାଇବା ମଧ୍ୟରେ ବିଳମ୍ବ କରିବାର ସମୟ \|
`keyboard`	ବୁଲିଅନ୍	`true`	କୀବୋର୍ଡ୍ ଇଭେଣ୍ଟଗୁଡିକ ଉପରେ କାରୁସେଲ୍ ପ୍ରତିକ୍ରିୟା କରିବା ଉଚିତ କି ନୁହେଁ \|
`pause`	ଷ୍ଟ୍ରିଙ୍ଗ୍, ବୁଲିଅନ୍ \|	`"hover"`	ଯଦି ସେଟ୍ କରାଯାଏ `"hover"`, କାରୁସେଲର ସାଇକେଲ `mouseenter`ଚଲାଇବା ବନ୍ଦ କରି କାରୁସେଲର ସାଇକେଲ ଚଲାଇବା ଆରମ୍ଭ କରେ `mouseleave`\| ଯଦି ସେଟ୍ ହୋଇଛି `false`, କାରୁସେଲ ଉପରେ ଚଲାଇବା ଏହାକୁ ବିରାମ ଦେବ ନାହିଁ \| ଟଚ୍-ସକ୍ଷମ ଉପକରଣଗୁଡ଼ିକରେ, ଯେତେବେଳେ ସେଟ୍ ହୋଇଯାଏ `"hover"`, ସାଇକେଲ ଚଲାଇବା `touchend`(ଥରେ ଉପଭୋକ୍ତା କାରୁସେଲ ସହିତ ଯୋଗାଯୋଗ ସମାପ୍ତ କରିବା ପରେ) ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପୁନ ing ଆରମ୍ଭ ହେବା ପୂର୍ବରୁ ଦୁଇଟି ବ୍ୟବଧାନ ପାଇଁ ବିରାମ ଦେବ \| ଏହା ମାଉସ୍ ଆଚରଣ ସହିତ \|
`ride`	ଷ୍ଟ୍ରିଙ୍ଗ୍, ବୁଲିଅନ୍ \|	`false`	ଯଦି ସେଟ୍ ହୋଇଛି `true`, ଉପଭୋକ୍ତା ପ୍ରଥମ ଆଇଟମ୍ ମାନୁଆଲ୍ ଚକ୍ର କରିବା ପରେ କାରୁସେଲ୍କୁ ଅଟୋପ୍ଲେ କରନ୍ତି \| ଯଦି ସେଟ୍ ହୋଇଛି `"carousel"`, ଭାରରେ କାରୁସେଲକୁ ଅଟୋପ୍ଲେ କରେ \|
`touch`	ବୁଲିଅନ୍	`true`	ଟଚସ୍କ୍ରିନ ଉପକରଣଗୁଡ଼ିକରେ କାରୁସେଲ ବାମ / ଡାହାଣ ସ୍ୱାଇପ୍ ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ସମର୍ଥନ କରିବା ଉଚିତ କି ନୁହେଁ \|
`wrap`	ବୁଲିଅନ୍	`true`	କାରୁସେଲ କ୍ରମାଗତ ଭାବରେ ଚକ୍ର କରିବା ଉଚିତ କି ହାର୍ଡ ଷ୍ଟପ୍ ରହିବା ଉଚିତ୍ \|

ପ୍ରଣାଳୀ

ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |

ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |

ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଦେଖନ୍ତୁ |

ଆପଣ କାରୁସେଲ କନଷ୍ଟ୍ରକ୍ଟର ସହିତ ଏକ କାରୁସେଲ ଉଦାହରଣ ସୃଷ୍ଟି କରିପାରିବେ, ଉଦାହରଣ ସ୍ୱରୂପ, ଅତିରିକ୍ତ ବିକଳ୍ପ ସହିତ ଆରମ୍ଭ କରିବା ଏବଂ ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଆରମ୍ଭ କରିବା:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

ପଦ୍ଧତି	ବର୍ଣ୍ଣନା
`cycle`	ବାମରୁ ଡାହାଣକୁ କାରୁସେଲ ଆଇଟମ୍ ମାଧ୍ୟମରେ ଚକ୍ର \|
`dispose`	ଏକ ଉପାଦାନର କାରୁସେଲ୍ ନଷ୍ଟ କରେ \| (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ)
`getInstance`	ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ କାରୁସେଲ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ : `bootstrap.Carousel.getInstance(element)`।
`getOrCreateInstance`	ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଏକ କାରୁସେଲ୍ ଉଦାହରଣ ଫେରସ୍ତ କରେ କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରେ \| ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ : `bootstrap.Carousel.getOrCreateInstance(element)`।
`next`	ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ପାଇଁ ଚକ୍ର \| ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଯାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, `slid.bs.carousel`ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) \|
`nextWhenVisible`	ଯେତେବେଳେ ପୃଷ୍ଠା ଦୃଶ୍ୟମାନ ହୁଏ ନାହିଁ କିମ୍ବା କାରୁସେଲ କିମ୍ବା ଏହାର ପିତାମାତା ଦୃଶ୍ୟମାନ ହୁଏ ନାହିଁ, ପରବର୍ତ୍ତୀ ସମୟରେ କାରୁସେଲ୍ ଚକ୍ର କରନ୍ତୁ ନାହିଁ \| ଟାର୍ଗେଟ୍ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଯାଏ \|
`pause`	ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଠାରୁ କାରୁସେଲକୁ ବନ୍ଦ କରିଦିଏ \|
`prev`	ପୂର୍ବ ଆଇଟମ୍ କୁ ଚକ୍ର \| ପୂର୍ବ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, `slid.bs.carousel`ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) \|
`to`	କାରୁସେଲକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଫ୍ରେମ୍ (0 ଆଧାରିତ, ଏକ ଆରେ ପରି) ଚକ୍ର କରେ \| ଟାର୍ଗେଟ୍ ଆଇଟମ୍ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, `slid.bs.carousel`ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) \|

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପର କାରୁସେଲ ଶ୍ରେଣୀ କାରୁସେଲ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ ପାଇଁ ଦୁଇଟି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରିଥାଏ | ଉଭୟ ଇଭେଣ୍ଟରେ ନିମ୍ନଲିଖିତ ଅତିରିକ୍ତ ଗୁଣ ଅଛି:

direction: ଯେଉଁ ଦିଗରେ କାରୁସେଲ୍ ସ୍ଲାଇଡ୍ ହେଉଛି ( "left"କିମ୍ବା "right") |
relatedTarget: DOM ଉପାଦାନ ଯାହା ସକ୍ରିୟ ଆଇଟମ୍ ଭାବରେ ସ୍ଥାନିତ ହୋଇଛି |
from: ସାମ୍ପ୍ରତିକ ଆଇଟମ୍ ର ଇଣ୍ଡେକ୍ସ |
to: ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ର ସୂଚକାଙ୍କ |

ସମସ୍ତ କାରୁସେଲ ଇଭେଣ୍ଟ ନିଜେ କାରୁସେଲ ଉପରେ (ଅର୍ଥାତ୍ <div class="carousel">) ଉପରେ ଗୁଳି ଚଳାଇଥାଏ |

ଇଭେଣ୍ଟ ପ୍ରକାର \|	ବର୍ଣ୍ଣନା
`slid.bs.carousel`	ଯେତେବେଳେ କାରୁସେଲ୍ ଏହାର ସ୍ଲାଇଡ୍ ଟ୍ରାନ୍ସଫିସନ୍ ସମାପ୍ତ କଲା ସେତେବେଳେ ଫାୟାର୍ \|
`slide.bs.carousel`	`slide`ଉଦାହରଣ ପଦ୍ଧତି ଆହ୍ when ାନ ହେଲେ ତୁରନ୍ତ ଅଗ୍ନିକାଣ୍ଡ ହୁଏ \|

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

କାରୁସେଲ |

ଏହା କିପରି କାମ କରେ |

ଉଦାହରଣ |

କେବଳ ସ୍ଲାଇଡ୍ |

ନିୟନ୍ତ୍ରଣ ସହିତ |

ସୂଚକ ସହିତ |

କ୍ୟାପସନ୍ ସହିତ |

ପ୍ରଥମେ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ଦ୍ୱିତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ତୃତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

କ୍ରସଫେଡ୍ |

ବ୍ୟକ୍ତିଗତ .carousel-itemବ୍ୟବଧାନ

ଟଚ୍ ସ୍ୱିପିଙ୍ଗ୍ ଅକ୍ଷମ କରନ୍ତୁ |

ଗା ark ପ୍ରକାର |

ପ୍ରଥମେ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ଦ୍ୱିତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ତୃତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

କଷ୍ଟମ୍ ସ୍ଥାନାନ୍ତରଣ |

ସାସ୍ |

ଭେରିଏବଲ୍ |

ବ୍ୟବହାର

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ବିକଳ୍ପଗୁଡ଼ିକ

ପ୍ରଣାଳୀ

ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |

ଘଟଣା

ବ୍ୟକ୍ତିଗତ `.carousel-item`ବ୍ୟବଧାନ