రంగులరాట్నం

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

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

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

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

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

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

ఉదాహరణ

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

తరగతిని .activeస్లయిడ్‌లలో ఒకదానికి జోడించాలి లేకపోతే రంగులరాట్నం కనిపించదు. అలాగే మీరు ఐచ్ఛిక నియంత్రణల కోసం ప్రత్యేక IDని సెట్ చేశారని నిర్ధారించుకోండి .carousel, ప్రత్యేకించి మీరు ఒకే పేజీలో బహుళ క్యారౌసెల్‌లను ఉపయోగిస్తుంటే. నియంత్రణ మరియు సూచిక మూలకాలు తప్పనిసరిగా మూలకం యొక్క idకి సరిపోలే ఒక data-targetలక్షణాన్ని (లేదా hrefలింక్‌ల కోసం) కలిగి ఉండాలి..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>

నియంత్రణలతో

మునుపటి మరియు తదుపరి నియంత్రణలను జోడించడం:

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

క్రాస్ఫేడ్

.carousel-fadeస్లయిడ్‌కు బదులుగా ఫేడ్ ట్రాన్సిషన్‌తో స్లయిడ్‌లను యానిమేట్ చేయడానికి మీ రంగులరాట్నంకి జోడించండి .

<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>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

వ్యక్తిగత .carousel-itemవిరామం

తదుపరి అంశానికి స్వయంచాలకంగా సైక్లింగ్ మధ్య ఆలస్యం అయ్యే సమయాన్ని మార్చడానికి data-interval=""a కి జోడించండి ..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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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…
})

పరివర్తన వ్యవధిని మార్చండి

యొక్క పరివర్తన వ్యవధిని కంపైల్ చేయడానికి ముందు Sass వేరియబుల్‌తో .carousel-itemమార్చవచ్చు $carousel-transitionలేదా మీరు కంపైల్ చేసిన CSSని ఉపయోగిస్తుంటే అనుకూల శైలులు. బహుళ పరివర్తనాలు వర్తింపజేస్తే, పరివర్తన పరివర్తన మొదట నిర్వచించబడిందని నిర్ధారించుకోండి (ఉదా. transition: transform 2s ease, opacity .5s ease-out).