കറൗസൽ

ഒരു കറൗസൽ പോലെയുള്ള ഘടകങ്ങൾ-ചിത്രങ്ങൾ അല്ലെങ്കിൽ ടെക്‌സ്‌റ്റിന്റെ സ്ലൈഡുകൾ എന്നിവയിലൂടെ സൈക്ലിംഗ് ചെയ്യുന്നതിനുള്ള ഒരു സ്ലൈഡ്‌ഷോ ഘടകം.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

CSS 3D രൂപാന്തരങ്ങളും കുറച്ച് ജാവാസ്ക്രിപ്റ്റും ഉപയോഗിച്ച് നിർമ്മിച്ച ഉള്ളടക്കത്തിന്റെ ഒരു പരമ്പരയിലൂടെ സൈക്കിൾ ചവിട്ടുന്നതിനുള്ള ഒരു സ്ലൈഡ് ഷോയാണ് കറൗസൽ. ചിത്രങ്ങൾ, ടെക്‌സ്‌റ്റ് അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത മാർക്ക്അപ്പ് എന്നിവയുടെ ഒരു ശ്രേണിയിൽ ഇത് പ്രവർത്തിക്കുന്നു. മുമ്പത്തെ/അടുത്ത നിയന്ത്രണങ്ങൾക്കും സൂചകങ്ങൾക്കുമുള്ള പിന്തുണയും ഇതിൽ ഉൾപ്പെടുന്നു.

പേജ് വിസിബിലിറ്റി API പിന്തുണയ്‌ക്കുന്ന ബ്രൗസറുകളിൽ , ഉപയോക്താവിന് വെബ്‌പേജ് ദൃശ്യമാകാത്തപ്പോൾ കറൗസൽ സ്ലൈഡുചെയ്യുന്നത് ഒഴിവാക്കും (ബ്രൗസർ ടാബ് നിഷ്‌ക്രിയമാകുമ്പോൾ, ബ്രൗസർ വിൻഡോ ചെറുതാക്കുമ്പോൾ, മുതലായവ).

നെസ്റ്റഡ് കറൗസലുകൾ പിന്തുണയ്ക്കുന്നില്ലെന്നും കറൗസലുകൾ പൊതുവെ പ്രവേശനക്ഷമത മാനദണ്ഡങ്ങൾ പാലിക്കുന്നില്ലെന്നും ദയവായി ശ്രദ്ധിക്കുക.

അവസാനമായി, നിങ്ങൾ ഉറവിടത്തിൽ നിന്നാണ് ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്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 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 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>

വ്യക്തിഗത .carousel-itemഇടവേള

അടുത്ത ഇനത്തിലേക്ക് സ്വയമേവ സൈക്കിൾ ചവിട്ടുന്നതിന് ഇടയിലുള്ള കാലതാമസം മാറ്റാൻ a-ലേക്ക് data-interval=""ചേർക്കുക ..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-toകറൗസലിലേക്ക് ഒരു റോ സ്ലൈഡ് സൂചിക കൈമാറാൻ ഉപയോഗിക്കുക data-slide-to="2", അത് സ്ലൈഡ് സ്ഥാനം എന്നതിൽ ആരംഭിക്കുന്ന ഒരു പ്രത്യേക സൂചികയിലേക്ക് മാറ്റുന്നു 0.

പേജ് ലോഡ് മുതൽ ആനിമേറ്റിംഗ് ആയി ഒരു കറൗസൽ data-ride="carousel"അടയാളപ്പെടുത്താൻ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു. ഒരേ കറൗസലിന്റെ (അനാവശ്യവും അനാവശ്യവും) സ്പഷ്ടമായ JavaScript ഇനീഷ്യലൈസേഷനുമായി സംയോജിച്ച് ഇത് ഉപയോഗിക്കാൻ കഴിയില്ല.

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')

ഒരു മൂലകത്തിന്റെ കറൗസൽ നശിപ്പിക്കുന്നു.

ഇവന്റുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ കറൗസൽ ക്ലാസ് കറൗസൽ പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി രണ്ട് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു. രണ്ട് ഇവന്റുകൾക്കും ഇനിപ്പറയുന്ന അധിക ഗുണങ്ങളുണ്ട്:

• direction: കറൗസൽ സ്ലൈഡുചെയ്യുന്ന ദിശ (ഒന്നുകിൽ "left"അല്ലെങ്കിൽ "right").
• relatedTarget: സജീവ ഇനമായി സ്ലൈഡ് ചെയ്യുന്ന DOM ഘടകം.
• from: നിലവിലെ ഇനത്തിന്റെ സൂചിക
• to: അടുത്ത ഇനത്തിന്റെ സൂചിക

എല്ലാ കറൗസൽ പരിപാടികളും കറൗസലിൽ തന്നെ (അതായത് ) വെടിവയ്ക്കുന്നു <div class="carousel">.

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

പരിവർത്തന ദൈർഘ്യം മാറ്റുക

നിങ്ങൾ കംപൈൽ ചെയ്ത CSS ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, കംപൈലിങ്ങിന് മുമ്പ് Sass വേരിയബിൾ ഉപയോഗിച്ച് അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത ശൈലികൾ ഉപയോഗിച്ച് ന്റെ സംക്രമണ ദൈർഘ്യം .carousel-itemമാറ്റാവുന്നതാണ് . $carousel-transitionഒന്നിലധികം സംക്രമണങ്ങൾ പ്രയോഗിച്ചാൽ, പരിവർത്തന സംക്രമണം ആദ്യം നിർവചിക്കപ്പെട്ടിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക (ഉദാ. transition: transform 2s ease, opacity .5s ease-out).