Source

రంగులరాట్నం

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

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

రంగులరాట్నం అనేది 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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

క్రాస్‌ఫేడ్

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

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

వాడుక

డేటా లక్షణాల ద్వారా

రంగులరాట్నం యొక్క స్థానాన్ని సులభంగా నియంత్రించడానికి డేటా లక్షణాలను ఉపయోగించండి. data-slideకీలకపదాలను అంగీకరిస్తుంది prevలేదా next, స్లయిడ్ స్థానాన్ని దాని ప్రస్తుత స్థానానికి సంబంధించి మారుస్తుంది. ప్రత్యామ్నాయంగా, data-slide-toరంగులరాట్నంకు ముడి స్లయిడ్ సూచికను పాస్ చేయడానికి ఉపయోగించండి data-slide-to="2", ఇది స్లయిడ్ స్థానాన్ని నిర్దిష్ట సూచికతో ప్రారంభమయ్యే నిర్దిష్ట సూచికకు మారుస్తుంది 0.

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

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

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

$('.carousel').carousel()

ఎంపికలు

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

పేరు టైప్ చేయండి డిఫాల్ట్ వివరణ
విరామం సంఖ్య 5000 వస్తువును ఆటోమేటిక్‌గా సైక్లింగ్ చేయడం మధ్య ఆలస్యం కావాల్సిన సమయం. తప్పు అయితే, రంగులరాట్నం స్వయంచాలకంగా చక్రం తిప్పదు.
కీబోర్డ్ బూలియన్ నిజం రంగులరాట్నం కీబోర్డ్ ఈవెంట్‌లకు ప్రతిస్పందించాలా వద్దా.
విరామం స్ట్రింగ్ | బూలియన్ "హోవర్"

కు సెట్ చేయబడితే "hover", రంగులరాట్నం యొక్క సైక్లింగ్‌ను పాజ్ చేస్తుంది mouseenterమరియు రంగులరాట్నం యొక్క సైక్లింగ్‌ను మళ్లీ ప్రారంభిస్తుంది mouseleave. కు సెట్ చేస్తే false, రంగులరాట్నంపై కర్సర్ ఉంచడం పాజ్ చేయదు.

టచ్-ఎనేబుల్ చేయబడిన పరికరాలలో, కు సెట్ చేసినప్పుడు , స్వయంచాలకంగా పునఃప్రారంభించే ముందు "hover"సైక్లింగ్ touchendరెండు విరామాల వరకు (వినియోగదారు రంగులరాట్నంతో పరస్పర చర్య పూర్తి చేసిన తర్వాత) పాజ్ చేయబడుతుంది. ఇది పై మౌస్ ప్రవర్తనకు అదనం అని గమనించండి.
రైడ్ స్ట్రింగ్ తప్పుడు వినియోగదారు మొదటి అంశాన్ని మాన్యువల్‌గా సైకిల్ చేసిన తర్వాత రంగులరాట్నం ఆటోప్లే చేస్తుంది. "రంగులరాట్నం" అయితే, లోడ్‌లో రంగులరాట్నం ఆటోప్లే చేస్తుంది.
చుట్టు బూలియన్ నిజం రంగులరాట్నం నిరంతరం సైకిల్ చేయాలా లేదా హార్డ్ స్టాప్‌లను కలిగి ఉండాలా.

పద్ధతులు

అసమకాలిక పద్ధతులు మరియు పరివర్తనాలు

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

ఈవెంట్ రకం వివరణ
slide.bs.carousel ఇన్‌స్టెన్స్ మెథడ్‌ని ఉపయోగించినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది slide.
slid.bs.రంగులరాట్నం రంగులరాట్నం దాని స్లయిడ్ పరివర్తనను పూర్తి చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

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

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