කැරොසල්

කැරොසලයක් වැනි මූලද්‍රව්‍ය-පින්තූර හෝ පෙළ විනිවිදක හරහා බයිසිකල් පැදීම සඳහා විනිවිදක දර්ශන සංරචකයකි.

එය ක්රියා කරන ආකාරය

කැරොසල් යනු CSS 3D පරිවර්තන සහ JavaScript ටිකක් සමඟ ගොඩනගා ඇති අන්තර්ගත මාලාවක් හරහා බයිසිකල් පැදීම සඳහා වූ විනිවිදක දර්ශනයකි. එය රූප, පෙළ, හෝ අභිරුචි සලකුණු මාලාවක් සමඟ ක්‍රියා කරයි. එයට පෙර/ඊළඟ පාලන සහ දර්ශක සඳහා සහය ද ඇතුළත් වේ.

Page Visibility 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.

පළමු විනිවිදක ලේබලය

Nulla vitae elit libero, a pharetra augu mollis interdum.

දෙවන විනිවිදක ලේබලය

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

තුන්වන විනිවිදක ලේබලය

ප්‍රෙසන්ට් කොමෝඩෝ කර්සස් මැග්නා, හෝ ස්ක්ලෙරිස්ක් නිසල් කොන්සෙක්ටූර්.

කලින් ඊළඟ

<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-toraw slide index එකක් carousel වෙත යැවීමට භාවිතා කරන්න data-slide-to="2", එය Slide ස්ථානය ආරම්භ වන විශේෂිත දර්ශකයකට මාරු කරයි 0.

පිටු data-ride="carousel"පූරණයෙන් ආරම්භ වන කැරොසල් සජීවීකරණයක් ලෙස සලකුණු කිරීමට උපලක්ෂණ භාවිතා වේ. එය එකම කැරූසලයේ (අතිරික්ත සහ අනවශ්‍ය) පැහැදිලි ජාවාස්ක්‍රිප්ට් ආරම්භ කිරීම සමඟ ඒකාබද්ධව භාවිතා කළ නොහැක.

JavaScript හරහා

කැරූසල් හස්තීයව අමතන්න:

$('.carousel').carousel()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය 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')

මූලද්රව්යයක කැරොසල් විනාශ කරයි.

සිදුවීම්

Bootstrap's carousel පන්තිය කැරූසල් ක්‍රියාකාරීත්වයට සම්බන්ධ කිරීම සඳහා සිදුවීම් දෙකක් හෙලිදරව් කරයි. සිදුවීම් දෙකටම පහත අමතර ගුණාංග ඇත:

• direction: කැරොසල් ලිස්සා යන දිශාව (එක්කෝ "left"හෝ "right").
• relatedTarget: DOM මූලද්‍රව්‍යය සක්‍රිය අයිතමය ලෙස ස්ථානගත වෙමින් පවතී.
• from: වත්මන් අයිතමයේ දර්ශකය
• to: ඊළඟ අයිතමයේ දර්ශකය

සියලුම කැරොසල් සිදුවීම් කැරූසල් වෙතම (එනම් හිදී <div class="carousel">) වෙඩි තබා ඇත.

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