Source

කැරොසල්

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

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

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

Page Visibility API සහාය දක්වන බ්‍රවුසරවල, වෙබ් පිටුව පරිශීලකයාට නොපෙනෙන විට (බ්‍රවුසර පටිත්ත අක්‍රිය වූ විට, බ්‍රවුසර කවුළුව අවම කර ඇති විට, යනාදී) කැරූසලය ලිස්සා යාම වළක්වයි.

මෙම සංරචකයේ සජීවිකරණ බලපෑම prefers-reduced-motionමාධ්‍ය විමසුම මත රඳා පවතී. අපගේ ප්‍රවේශ්‍යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න .

කැදලි කැරොසල් සඳහා සහය නොදක්වන බවත්, කැරොසල් සාමාන්‍යයෙන් ප්‍රවේශ්‍යතා ප්‍රමිතීන්ට අනුකූල නොවන බවත් කරුණාවෙන් සලකන්න.

අවසාන වශයෙන්, ඔබ අපගේ ජාවාස්ක්‍රිප්ට් ගොඩනගන්නේ මූලාශ්‍රයෙන් නම්, එයට අවශ්‍ය වේutil.js .

උදාහරණයක්

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

.activeපන්තිය එක් ස්ලයිඩයකට එකතු කළ යුතු අතර එසේ නොමැතිනම් කැරොසල් නොපෙනේ. විකල්ප පාලන සඳහා අනන්‍ය හැඳුනුම්පතක් සැකසීමට වග බලා ගන්න .carousel, විශේෂයෙන් ඔබ තනි පිටුවක කැරොසල් කිහිපයක් භාවිතා කරන්නේ නම්. පාලන සහ දර්ශක මූලද්‍රව්‍යවලට මූලද්‍රව්‍යයේ හැඳුනුම්පතට ගැළපෙන 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 id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>

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

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

JavaScript හරහා

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

$('.carousel').carousel()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-interval="".

නම ටයිප් කරන්න පෙරනිමිය විස්තර
පරතරය අංකය 5000 අයිතමයක් ස්වයංක්‍රීයව බයිසිකල් පැදීම අතර ප්‍රමාද විය යුතු කාලය. අසත්‍ය නම්, කැරොසල් ස්වයංක්‍රීයව චක්‍රීය නොවේ.
යතුරු පුවරුව බූලියන් සැබෑ කැරොසල් යතුරුපුවරු සිදුවීම්වලට ප්‍රතිචාර දැක්විය යුතුද යන්න.
විරාමයක් තන්තුව | බූලියන් "හවර්"

ලෙස සකසා ඇත්නම් "hover", කැරොසලයේ බයිසිකල් පැදීම විරාමයක් තබා කැරූසලයේ බයිසිකල් mouseenterපැදීම නැවත ආරම්භ කරයි mouseleave. ලෙස සකසා ඇත්නම් false, කැරොසල් මත සැරිසැරීමෙන් එය විරාමයක් නැත.

ස්පර්ශ-සක්‍රීය උපාංග මත, ලෙස සකසා ඇති විට , ස්වයංක්‍රීයව නැවත ආරම්භ වීමට පෙර "hover", බයිසිකල් පැදීම touchend(පරිශීලකයා කැරොසල් සමඟ අන්තර්ක්‍රියා කිරීම අවසන් වූ පසු) විරාම දෙකක් සඳහා විරාම ගන්වනු ඇත. මෙය ඉහත මවුස් හැසිරීමට අමතරව බව සලකන්න.
පදින්න නූල් බොරු පරිශීලකයා පළමු අයිතමය අතින් චක්‍රයෙන් පසු කැරොසල් ස්වයංක්‍රීයව ධාවනය කරයි. "කැරූසල්" නම්, පැටවීමේදී කැරොසල් ස්වයංක්‍රීයව ධාවනය කරයි.
එතුම බූලියන් සැබෑ කැරොසලය අඛණ්ඩව චක්‍රීය කළ යුතුද නැතහොත් දැඩි නැවතුම් තිබේද යන්න.
ස්පර්ශ කරන්න බූලියන් සැබෑ ටච්ස්ක්‍රීන් උපාංගවල වමට/දකුණට ස්වයිප් අන්තර්ක්‍රියා සඳහා කැරොසලය සහාය විය යුතුද යන්න.

ක්රම

අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් ආරම්භ කරන්න . සංක්‍රාන්තිය ආරම්භ වූ වහාම නමුත් එය අවසන් වීමට පෙර ඔවුන් නැවත අමතන්නා වෙත පැමිණේ . ඊට අමතරව, සංක්‍රාන්ති සංරචකයක ක්‍රම ඇමතුමක් නොසලකා හරිනු ඇත .

වැඩි විස්තර සඳහා අපගේ JavaScript ලේඛන බලන්න .

.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">) වෙඩි තබා ඇත.

සිදුවීම් වර්ගය විස්තර
slide.bs.carousel slideනිදසුන් ක්‍රමය ක්‍රියාත්මක කළ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
slid.bs.carousel කැරොසල් එහි ස්ලයිඩ සංක්‍රාන්තිය සම්පූර්ණ කළ විට මෙම සිදුවීම වෙඩි තබා ඇත. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

සංක්‍රාන්ති කාලය වෙනස් කරන්න

හි සංක්‍රාන්ති කාලසීමාව සම්පාදනය කිරීමට පෙර Sass විචල්‍යය .carousel-itemසමඟ වෙනස් කළ හැකිය $carousel-transitionහෝ ඔබ සම්පාදනය කළ CSS භාවිතා කරන්නේ නම් අභිරුචි මෝස්තර. බහු සංක්‍රාන්ති යොදන්නේ නම්, පරිවර්තන සංක්‍රාන්තිය පළමුව අර්ථ දක්වා ඇති බවට වග බලා ගන්න (උදා. transition: transform 2s ease, opacity .5s ease-out).