ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

କାରୁସେଲ |

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

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

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>

ପରବର୍ତ୍ତୀ ଆଇଟମକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସାଇକେଲ ଚଲାଇବା ମଧ୍ୟରେ ବିଳମ୍ବ କରିବାକୁ ସମୟ ପରିମାଣ ପରିବର୍ତ୍ତନ 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'

ଯଦି ସେଟ୍ କରାଯାଏ 'hover', କାରୁସେଲର ସାଇକେଲ mouseenterଚଲାଇବା ବନ୍ଦ କରି କାରୁସେଲର ସାଇକେଲ ଚଲାଇବା ଆରମ୍ଭ କରେ mouseleave| ଯଦି ସେଟ୍ ହୋଇଛି false, କାରୁସେଲ ଉପରେ ଚଲାଇବା ଏହାକୁ ବିରାମ ଦେବ ନାହିଁ |

ଟଚ୍-ସକ୍ଷମ ଉପକରଣଗୁଡ଼ିକରେ, ଯେତେବେଳେ ସେଟ୍ ହୋଇଯାଏ 'hover', ସାଇକେଲ ଚଲାଇବା touchend(ଥରେ ଉପଭୋକ୍ତା କାରୁସେଲ ସହିତ ଯୋଗାଯୋଗ ସମାପ୍ତ କରିବା ପରେ) ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପୁନ ing ଆରମ୍ଭ ହେବା ପୂର୍ବରୁ ଦୁଇଟି ବ୍ୟବଧାନ ପାଇଁ ବିରାମ ଦେବ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏହା ଉପରୋକ୍ତ ମାଉସ୍ ଆଚରଣ ସହିତ |

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...
})