Source

Карусель

Карусель сияқты элементтерді (кескіндерді немесе мәтін слайдтарын) айналдыруға арналған слайд-шоу компоненті.

Бұл қалай жұмыс істейді

Карусель - CSS 3D түрлендірулерімен және аздап JavaScript-пен құрастырылған мазмұндар сериясы арқылы өтуге арналған слайд-шоу. Ол суреттер, мәтін немесе теңшелетін белгілер сериясымен жұмыс істейді. Ол сондай-ақ алдыңғы/келесі басқару элементтері мен көрсеткіштерді қолдауды қамтиды.

Page Visibility API қолдау көрсетілетін шолғыштарда веб-бет пайдаланушыға көрінбейтін кезде (мысалы, шолғыш қойындысы белсенді емес болғанда, шолғыш терезесі кішірейтілгенде және т.б.) карусель сырғуды болдырмайды.

Бұл компоненттің анимациялық әсері prefers-reduced-motionмедиа сұрауына байланысты. Арнайы мүмкіндіктер құжаттамасының қысқартылған қозғалыс бөлімін қараңыз .

Кірістірілген карусельдерге қолдау көрсетілмейтінін және карусельдерге әдетте қол жетімділік стандарттарына сәйкес келмейтінін ескеріңіз.

Соңында, егер сіз 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 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кілт сөздерін қабылдайды , бұл слайд орнын оның ағымдағы орнына қатысты өзгертеді. Немесе, слайд орнын - деп басталатын белгілі бір индекске жылжытатын шикі слайд индексін карусельге беру үшін пайдаланыңыз .prevnextdata-slide-todata-slide-to="2"0

Атрибут data-ride="carousel"карусельді бет жүктелуінен бастап анимация ретінде белгілеу үшін пайдаланылады. Карусельді инициализациялау үшін пайдаланбасаңыз data-ride="carousel", оны өзіңіз баптандыруыңыз керек. Оны бір карусельдің (артық және қажетсіз) анық JavaScript инициализациясымен бірге пайдалану мүмкін емес.

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 карусель сыныбы карусель функциясына қосылу үшін екі оқиғаны көрсетеді. Екі оқиғаның да келесі қосымша қасиеттері бар:

  • direction: Карусель қозғалатын бағыт ( "left"немесе "right").
  • relatedTarget: Белсенді элемент ретінде орнына сырғытылып жатқан DOM элементі.
  • from: Ағымдағы элементтің индексі
  • to: Келесі элементтің индексі

Барлық карусель оқиғалары карусельдің өзіне (яғни <div class="carousel">) жіберіледі.

Оқиға түрі Сипаттама
слайд.б.карусель slideБұл оқиға дана әдісі шақырылған кезде бірден іске қосылады.
слайд.б.карусель Бұл оқиға карусель слайдты ауыстыруды аяқтаған кезде тоқтатылады. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Өту ұзақтығын өзгерту

Өту ұзақтығын компиляциядан бұрын Sass айнымалысымен .carousel-itemөзгертуге болады $carousel-transitionнемесе құрастырылған CSS пайдалансаңыз, реттелетін мәнерлер. Бірнеше ауысулар қолданылса, алдымен түрлендіру ауысуы анықталғанын тексеріңіз (мысалы, transition: transform 2s ease, opacity .5s ease-out).