in English

କାରୁସେଲ |

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

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

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

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

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

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

ଶେଷରେ, ଯଦି ଆପଣ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ଉତ୍ସରୁ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେutil.js |

ଉଦାହରଣ |

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

ଏକ .activeସ୍ଲାଇଡ୍ ସହିତ କ୍ଲାସ୍ ଯୋଡିବା ଆବଶ୍ୟକ, ନଚେତ୍ କାରୁସେଲ୍ ଦୃଶ୍ୟମାନ ହେବ ନାହିଁ | idବ al କଳ୍ପିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଏକ ଅନନ୍ୟ ସେଟ୍ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ .carousel, ବିଶେଷତ if ଯଦି ଆପଣ ଗୋଟିଏ ପୃଷ୍ଠାରେ ଏକାଧିକ କାରୁସେଲ ବ୍ୟବହାର କରୁଛନ୍ତି | କଣ୍ଟ୍ରୋଲ୍ ଏବଂ ସୂଚକ ଉପାଦାନଗୁଡ଼ିକର ଏକ 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ଯେକ any ଣସି ଭିତରେ ଥିବା ଉପାଦାନ ସହିତ ସହଜରେ ଆପଣଙ୍କର ସ୍ଲାଇଡ୍ ରେ କ୍ୟାପସନ୍ ଯୋଡନ୍ତୁ .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>

ପରବର୍ତ୍ତୀ ଆଇଟମକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସାଇକେଲ ଚଲାଇବା ମଧ୍ୟରେ ବିଳମ୍ବ କରିବାକୁ ସମୟ ପରିମାଣ ପରିବର୍ତ୍ତନ data-interval=""କରିବାକୁ ଏକ ଯୋଗ କରନ୍ତୁ |.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ବ ly କଳ୍ପିକ ଭାବରେ, କଞ୍ଚା ସ୍ଲାଇଡ୍ ଇଣ୍ଡେକ୍ସକୁ କାରୁସେଲକୁ ପଠାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ data-slide-to="2", ଯାହା ସ୍ଲାଇଡ୍ ସ୍ଥିତିକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସୂଚକାଙ୍କକୁ ଆରମ୍ଭ କରିଥାଏ 0|

data-ride="carousel"ପେଜ୍ ଲୋଡ୍ ଠାରୁ ଆରମ୍ଭ କରି ଆନିମେସନ୍ ଭାବରେ ଏକ କାରୁସେଲ୍ ଚିହ୍ନିତ କରିବାକୁ ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହୃତ ହୁଏ | ଯଦି ତୁମେ ତୁମର କାରୁସେଲ ଆରମ୍ଭ କରିବାକୁ ବ୍ୟବହାର କରୁନାହଁ data-ride="carousel", ତୁମକୁ ଏହାକୁ ନିଜେ ଆରମ୍ଭ କରିବାକୁ ପଡିବ | ସମାନ କାରୁସେଲର (ଅନାବଶ୍ୟକ ଏବଂ ଅନାବଶ୍ୟକ) ସ୍ପଷ୍ଟ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ରାରମ୍ଭିକରଣ ସହିତ ଏହାକୁ ବ୍ୟବହାର କରାଯାଇପାରିବ ନାହିଁ |

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

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

$('.carousel').carousel()

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

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-interval=""|

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ବ୍ୟବଧାନ ସଂଖ୍ୟା 5000 ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଆଇଟମ୍ ସାଇକ୍ଲିଂ ମଧ୍ୟରେ ବିଳମ୍ବ କରିବାର ସମୟ | ଯଦି false, କାରୁସେଲ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଚକ୍ର କରିବ ନାହିଁ |
କୀବୋର୍ଡ୍ ବୁଲିଅନ୍ ସତ କୀବୋର୍ଡ୍ ଇଭେଣ୍ଟଗୁଡିକ ଉପରେ କାରୁସେଲ୍ ପ୍ରତିକ୍ରିୟା କରିବା ଉଚିତ କି ନୁହେଁ |
ବିରାମ string | ବୁଲିଅନ୍ 'ହୋଭର'

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

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

ଇଭେଣ୍ଟ ପ୍ରକାର | ବର୍ଣ୍ଣନା
ସ୍ଲାଇଡ୍। bs.carousel | slideଉଦାହରଣ ପଦ୍ଧତି ଆହ୍ when ାନ ହେଲେ ଏହି ଘଟଣା ତୁରନ୍ତ ଅଗ୍ନି ସଂଯୋଗ କରେ |
slid.bs.carousel କାରୁସେଲ ଏହାର ସ୍ଲାଇଡ୍ ଟ୍ରାନ୍ସଫିସନ୍ ସମାପ୍ତ କଲାବେଳେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ | 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

ପରିବର୍ତ୍ତନ ସମୟ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

ଯଦି ଆପଣ ସଙ୍କଳିତ CSS ବ୍ୟବହାର କରୁଛନ୍ତି ତେବେ କମ୍ପାଇଲ୍ କିମ୍ବା କଷ୍ଟମ୍ ଶ yles ଳୀ ପୂର୍ବରୁ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ପରିବର୍ତ୍ତନ ସମୟ .carousel-itemପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ | $carousel-transitionଯଦି ଏକାଧିକ ସଂକ୍ରମଣ ପ୍ରୟୋଗ କରାଯାଏ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରୂପାନ୍ତର ପରିବର୍ତ୍ତନ ପ୍ରଥମେ ବ୍ୟାଖ୍ୟା କରାଯାଇଛି (ଯଥା transition: transform 2s ease, opacity .5s ease-out) |