బూస్ట్రాప్ 5 స్లైడ్ శో

స్క్వైర్ మాడ్యూల్ / స్లైడ్

స్క్వైర్ మాడ్యూల్ (కార్సెల్) దానిని చూపించడానికి ఉపయోగించే ఒక లోపలిక ప్రదర్శన ఉంది:

స్క్వైర్ మాడ్యూల్ సృష్టించండి ఎలా

ఈ ఉదాహరణలో సూచకాలు మరియు కంట్రోల్స్ తో ప్రాథమిక కార్సెల్ ని సృష్టించండి చూపబడింది:

ఉదాహరణ

<!-- కార్సెల్ -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- సూచకాలు / పింక్స్ -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- స్లైడ్షీట్లు / కార్సెల్ -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- ప్రక్కప్పుడు కంట్రోల్స్ / చిహ్నాలు -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణ

పై ఉన్న ప్రతి క్లాస్ పరంగా చూపించబడిన పని వివరణ

క్లాస్ వివరణ
.carousel కార్యక్రమాన్ని సృష్టించండి.
.carousel-indicators కార్యక్రమానికి ఇన్డికేటర్స్ జోడించండి. అవి ప్రతి స్లైడ్ ప్రక్కన చిన్న పక్కలు ఉన్నాయి.
కార్యక్రమంలో స్లైడ్ సంఖ్యను మరియు వినియోగదారు ప్రస్తుతం చూస్తున్న స్లైడ్ ను ప్రతినిధీకరిస్తుంది.
.carousel-inner స్లైడ్ ను కార్యక్రమానికి జోడించండి.
.carousel-item ప్రతి స్లైడ్ కు విషయాన్ని నిర్ధారించండి.
.carousel-control-prev ఎడమకు (ముందు) బటన్ జోడించండి, వినియోగదారుకు స్లైడ్ మధ్య ప్రయాణం అనుమతిస్తుంది.
.carousel-control-next కుడికి (తరువాత) బటన్ జోడించండి, వినియోగదారుకు స్లైడ్ మధ్య ప్రయాణం అనుమతిస్తుంది.
.carousel-control-prev-icon .carousel-control-prev తో కలిసి వాడి, "ముందు" బటన్ సృష్టించండి.
.carousel-control-next-icon .carousel-control-next తో కలిసి వాడి, "తరువాత" బటన్ సృష్టించండి.
.slide ఒక ప్రాజెక్ట్ నుండి మరొక ప్రాజెక్ట్ కు స్లైడ్ ప్రయాణం చేయడం వద్ద సిఎస్ఎస్ ట్రాన్సిషన్ మరియు ఏనిమేషన్ జోడించండి.
ఈ ప్రభావాన్ని కావలసిన లేకపోతే, ఈ క్లాస్ తొలగించండి.

స్లైడ్ కు శీర్షిక జోడించండి

ప్రతి ఒక్క వద్ద శీర్షిక జోడించండి వేళ <div class="carousel-item"> లో <div class="carousel-caption"> లో మెటాడా పెట్టండి, ప్రతి స్లైడ్ కు శీర్షిక సృష్టించండి:

ఉదాహరణ

<div class="carousel-item">
  <img src="beijing.jpg" alt="బీజింగ్">
  <div class="carousel-caption">
    <h3>బీజింగ్</h3>
    <p>ధన్యవాదాలు, బీజింగ్!</p>
  </div>
</div>

స్వయంగా ప్రయత్నించండి