రంగులరాట్నం

రంగులరాట్నం వంటి అంశాలు-చిత్రాలు లేదా వచన స్లయిడ్‌ల ద్వారా సైక్లింగ్ చేయడానికి స్లైడ్‌షో భాగం.

అది ఎలా పని చేస్తుంది

రంగులరాట్నం అనేది CSS 3D ట్రాన్స్‌ఫార్మ్‌లు మరియు కొంచెం జావాస్క్రిప్ట్‌తో రూపొందించబడిన కంటెంట్ శ్రేణి ద్వారా సైక్లింగ్ చేయడానికి ఒక స్లైడ్‌షో. ఇది చిత్రాల శ్రేణి, వచనం లేదా అనుకూల మార్కప్‌తో పని చేస్తుంది. ఇది మునుపటి/తదుపరి నియంత్రణలు మరియు సూచికలకు మద్దతును కూడా కలిగి ఉంటుంది.

పేజీ విజిబిలిటీ API కి మద్దతు ఉన్న బ్రౌజర్‌లలో , వెబ్‌పేజీ వినియోగదారుకు కనిపించనప్పుడు రంగులరాట్నం స్లయిడింగ్‌ను నివారిస్తుంది (బ్రౌజర్ ట్యాబ్ నిష్క్రియంగా ఉన్నప్పుడు, బ్రౌజర్ విండో కనిష్టీకరించబడినప్పుడు మొదలైనవి).

దయచేసి సమూహ రంగులరాట్నాలు మద్దతు ఇవ్వబడవని మరియు క్యారౌసెల్‌లు సాధారణంగా ప్రాప్యత ప్రమాణాలకు అనుగుణంగా ఉండవని గుర్తుంచుకోండి.

చివరగా, మీరు మూలం నుండి మా జావాస్క్రిప్ట్‌ను రూపొందిస్తున్నట్లయితే, దీనికి అవసరంutil.js .

ఉదాహరణ

రంగులరాట్నాలు స్వయంచాలకంగా స్లయిడ్ కొలతలు సాధారణీకరించవు. అందుకని, మీరు కంటెంట్‌ను సముచితంగా పరిమాణం చేయడానికి అదనపు యుటిలిటీలు లేదా అనుకూల శైలులను ఉపయోగించాల్సి రావచ్చు. కారౌసెల్‌లు మునుపటి/తదుపరి నియంత్రణలు మరియు సూచికలకు మద్దతు ఇస్తున్నప్పటికీ, అవి స్పష్టంగా అవసరం లేదు. మీకు సరిపోయే విధంగా జోడించండి మరియు అనుకూలీకరించండి.

ఐచ్ఛిక నియంత్రణల కోసం ప్రత్యేక ఐడిని సెట్ చేయాలని నిర్ధారించుకోండి .carousel, ప్రత్యేకించి మీరు ఒకే పేజీలో బహుళ క్యారౌసెల్‌లను ఉపయోగిస్తుంటే.

స్లయిడ్‌లు మాత్రమే

స్లయిడ్‌లతో మాత్రమే రంగులరాట్నం ఇక్కడ ఉంది. బ్రౌజర్ డిఫాల్ట్ ఇమేజ్ అలైన్‌మెంట్‌ను నిరోధించడానికి రంగులరాట్నం చిత్రాల .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>

శీర్షికలతో

.carousel-captionఏదైనా లోపల ఉన్న మూలకంతో సులభంగా మీ స్లయిడ్‌లకు శీర్షికలను జోడించండి .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రంగులరాట్నంకు ముడి స్లయిడ్ సూచికను పాస్ చేయడానికి ఉపయోగించండి data-slide-to="2", ఇది స్లయిడ్ స్థానాన్ని నిర్దిష్ట సూచికతో ప్రారంభమయ్యే నిర్దిష్ట సూచికకు మారుస్తుంది 0.

data-ride="carousel"పేజీ లోడ్ నుండి ప్రారంభమయ్యే రంగులరాట్నం యానిమేటింగ్‌గా గుర్తించడానికి లక్షణం ఉపయోగించబడుతుంది . ఇది అదే రంగులరాట్నం యొక్క స్పష్టమైన జావాస్క్రిప్ట్ ప్రారంభీకరణతో (నిరుపయోగమైన మరియు అనవసరమైన) కలయికతో ఉపయోగించబడదు.

జావాస్క్రిప్ట్ ద్వారా

దీనితో మాన్యువల్‌గా రంగులరాట్నం కాల్ చేయండి:

$('.carousel').carousel()

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-interval="".

పద్ధతులు

.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">) కాల్చబడతాయి.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})