बूस्ट्रैप 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="Beijing">
  <div class="carousel-caption">
    <h3>बीजिंग</h3>
    <p>धन्यवाद, बीजिंग!</p>
  </div>
</div>

आप खुद सिरजिए