Source

କାରୁସେଲ |

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

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

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

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

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

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

ଉଦାହରଣ |

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

ବ al କଳ୍ପିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଏକ ସ୍ୱତନ୍ତ୍ର id ସେଟ୍ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ .carousel, ବିଶେଷତ if ଯଦି ଆପଣ ଗୋଟିଏ ପୃଷ୍ଠାରେ ଏକାଧିକ କାରୁସେଲ ବ୍ୟବହାର କରୁଛନ୍ତି |

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

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

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

ପୂର୍ବ ଏବଂ ପରବର୍ତ୍ତୀ ନିୟନ୍ତ୍ରଣରେ ଯୋଗ କରିବା:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
ପ୍ରାରମ୍ଭିକ ସକ୍ରିୟ ଉପାଦାନ ଆବଶ୍ୟକ |

କ୍ଲାସ୍ ଏକ .activeସ୍ଲାଇଡ୍ ସହିତ ଯୋଡାଯିବା ଆବଶ୍ୟକ | ଅନ୍ୟଥା, କାରୁସେଲ୍ ଦୃଶ୍ୟମାନ ହେବ ନାହିଁ |

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

.carousel-captionଯେକ any ଣସି ଭିତରେ ଥିବା ଉପାଦାନ ସହିତ ସହଜରେ ଆପଣଙ୍କର ସ୍ଲାଇଡ୍ ରେ କ୍ୟାପସନ୍ ଯୋଡନ୍ତୁ .carousel-item| ଇଚ୍ଛାଧୀନ ପ୍ରଦର୍ଶନ ଉପଯୋଗିତା ସହିତ ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି ସେଗୁଡିକ ସହଜରେ ଛୋଟ ଦୃଶ୍ୟରେ ଲୁକ୍କାୟିତ ହୋଇପାରିବ | ଆମେ ସେମାନଙ୍କୁ ପ୍ରାରମ୍ଭରେ ଲୁଚାଇଥାଉ .d-noneଏବଂ ସେମାନଙ୍କୁ ମଧ୍ୟମ ଆକାରର ଉପକରଣଗୁଡ଼ିକରେ ଫେରାଇ ଆଣିବା .d-md-block|

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

ବ୍ୟବହାର

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

କାରୁସେଲର ସ୍ଥିତିକୁ ସହଜରେ ନିୟନ୍ତ୍ରଣ କରିବାକୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରନ୍ତୁ | data-slideକୀ ଶବ୍ଦଗୁଡ଼ିକୁ ଗ୍ରହଣ କରେ prevକିମ୍ବା next, ଯାହା ବର୍ତ୍ତମାନର ସ୍ଥିତି ସହିତ ସ୍ଲାଇଡ୍ ପୋଜିସନ୍ ବଦଳାଇଥାଏ | data-slide-toବ ly କଳ୍ପିକ ଭାବରେ, କଞ୍ଚା ସ୍ଲାଇଡ୍ ଇଣ୍ଡେକ୍ସକୁ କାରୁସେଲକୁ ପଠାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ data-slide-to="2", ଯାହା ସ୍ଲାଇଡ୍ ସ୍ଥିତିକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସୂଚକାଙ୍କକୁ ଆରମ୍ଭ କରିଥାଏ 0|

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

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

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

$('.carousel').carousel()

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

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

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

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

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

ରଥଯାତ୍ରା | ଷ୍ଟ୍ରିଙ୍ଗ୍ ମିଥ୍ୟା ଉପଭୋକ୍ତା ପ୍ରଥମ ଆଇଟମ୍ ମାନୁଆଲ୍ ଚକ୍ର କରିବା ପରେ କାରୁସେଲ୍କୁ ସ୍ୱୟଂଚାଳିତ କରେ | ଯଦି "କାରୁସେଲ", ଭାରରେ କାରୁସେଲକୁ ଅଟୋପ୍ଲେ କରେ |
ଗୁଡ଼ାଇ ଦିଅ | ବୁଲିଅନ୍ ସତ କାରୁସେଲ କ୍ରମାଗତ ଭାବରେ ଚକ୍ର କରିବା ଉଚିତ କି ହାର୍ଡ ଷ୍ଟପ୍ ରହିବା ଉଚିତ୍ |

ପ୍ରଣାଳୀ

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

ସମସ୍ତ 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')

ଏକ ଉପାଦାନର କାରୁସେଲ୍ ନଷ୍ଟ କରେ |

ଘଟଣା

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

  • 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…
})