Негізгі мазмұнға өту Құжаттар шарлауына өту
Check
in English

Карусель

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

Бұл бетте

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

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

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

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

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

Мысал

Карусельдер слайд өлшемдерін автоматты түрде қалыпқа келтірмейді. Осылайша, мазмұнды дұрыс өлшемдеу үшін қосымша утилиталарды немесе теңшелетін мәнерлерді пайдалану қажет болуы мүмкін. Карусель алдыңғы/келесі басқару элементтері мен индикаторларды қолдағанымен, олар нақты талап етілмейді. Өзіңіз қалағандай қосыңыз және реттеңіз.

.activeСыныпты слайдтардың біріне қосу керек, әйтпесе карусель көрінбейді. idСондай-ақ , қосымша басқару элементтері үшін бірегей параметрді орнатуды ұмытпаңыз .carousel, әсіресе бір бетте бірнеше карусельді пайдалансаңыз. Басқару және көрсеткіш элементтерінде элементке сәйкес келетін төлсипат data-bs-target(немесе hrefсілтемелер үшін) болуы керек .id.carousel

Тек слайдтар

Мұнда тек слайдтары бар карусель бар. Браузердің әдепкі кескінді туралауын болдырмау үшін .d-blockжәне карусель кескіндерінің бар екенін ескеріңіз ..w-100

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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>

Басқару элементтерімен

Алдыңғы және келесі басқару элементтеріне қосу. Біз элементтерді пайдалануды ұсынамыз , бірақ элементтерді <button>де пайдалана аласыз .<a>role="button"

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Көрсеткіштермен

Сондай-ақ, басқару элементтерімен қатар индикаторларды карусельге қосуға болады.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Жазбалармен

.carousel-captionКез келген элементтің көмегімен слайдтарыңызға тақырыпты оңай қосыңыз .carousel-item. Оларды қосымша дисплей утилиталары арқылы төменде көрсетілгендей кішірек қарау порттарында оңай жасыруға болады . Біз оларды бастапқыда көмегімен жасырамыз .d-noneжәне көмегімен орташа өлшемді құрылғыларға қайтарамыз .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Кроссфад

.carousel-fadeСлайдтың орнына өшуі бар слайдтарды жандандыру үшін карусельге қосыңыз . Карусель мазмұнына байланысты (мысалы, тек мәтіндік слайдтар), дұрыс айқасу үшін s .bg-body-ға немесе кейбір реттелетін CSS қосқыңыз келуі мүмкін ..carousel-item

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Келесі элементке автоматты түрде өту арасындағы кідіріс уақытын өзгерту data-bs-interval=""үшін a -ға қосыңыз ..carousel-item

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Түртуді өшіру

Карусельдер слайдтар арасында жылжу үшін сенсорлық экран құрылғыларында солға/оңға сырғытуды қолдайды. data-bs-touchМұны атрибут арқылы өшіруге болады . Төмендегі мысал да data-bs-rideатрибутты қамтымайды, сондықтан ол автоматты түрде ойнатылмайды.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Қараңғы нұсқа

Қараңғы басқару элементтері, индикаторлар және жазулар үшін .carousel-darkқосыңыз . Басқару элементтері CSS сипатымен .carouselәдепкі ақ түсті толтырудан инверттелген . Жазулар мен басқару элементтерінде және filterтеңшейтін қосымша Sass айнымалылары бар .colorbackground-color

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Реттелетін ауысу

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

Сасс

Айнымалылар

Барлық карусельдер үшін айнымалылар:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Қараңғы карусель үшін айнымалылар :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Қолданылуы

Деректер атрибуттары арқылы

Карусель орнын оңай басқару үшін деректер атрибуттарын пайдаланыңыз. немесе data-bs-slideкілт сөздерін қабылдайды , бұл слайд орнын оның ағымдағы орнына қатысты өзгертеді. Немесе, слайд орнын - деп басталатын белгілі бір индекске жылжытатын шикі слайд индексін карусельге беру үшін пайдаланыңыз .prevnextdata-bs-slide-todata-bs-slide-to="2"0

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

JavaScript арқылы

Карусельге қолмен қоңырау шалыңыз:

const carousel = new bootstrap.Carousel('#myCarousel')

Опциялар

Опциялар деректер атрибуттары немесе JavaScript арқылы берілуі мүмкін болғандықтан, параметр атауын data-bs-сияқты қосуға болады data-bs-animation="{value}". Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін “ camelCase ” дан “ kebab-case ” түріне өзгертуді ұмытпаңыз. Мысалы, data-bs-custom-class="beautifier"орнына пайдаланыңыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 нұсқасы бойынша барлық компоненттер қарапайым құрамдас конфигурациясын JSON жолы ретінде орналастыра алатын эксперименттік сақталған деректер төлсипатын қолдайды. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'және data-bs-title="456"атрибуттары болғанда, соңғы titleмән болады 456және бөлек деректер атрибуттары параметрінде берілген мәндерді қайта анықтайды data-bs-config. Бұған қоса, бар деректер атрибуттары сияқты JSON мәндерін орналастыра алады data-bs-delay='{"show":0,"hide":150}'.

Аты Түр Әдепкі Сипаттама
interval саны 5000 Элементті автоматты түрде айналдыру арасындағы кідіріс уақыты.
keyboard логикалық true Карусель пернетақта оқиғаларына әрекет ету керек пе.
pause жол, логикалық "hover" күйіне орнатылса "hover", карусельдің айналуын кідіртеді және айналдыру циклін қосулы mouseenterжалғастырады mouseleave. параметріне орнатылған болса false, меңзерді карусельдің үстіне апару оны кідіртпейді. Сенсорлы құрылғыларда параметріне орнатылғанда "hover", велосипед touchendавтоматты түрде жалғаспас бұрын екі аралыққа (пайдаланушы карусельмен әрекеттесуін аяқтағаннан кейін) кідіртіледі. Бұл тінтуірдің әрекетіне қосымша.
ride жол, логикалық false параметріне орнатылса true, пайдаланушы бірінші элементті қолмен айналдырғаннан кейін карусельді автоматты түрде ойнатады. күйіне орнатылса "carousel", жүктеме кезінде карусельді автоматты түрде ойнатады.
touch логикалық true Карусель сенсорлық экран құрылғыларында солға/оңға сырғыту әрекеттестігін қолдау керек пе.
wrap логикалық true Карусель үздіксіз айналуы керек пе немесе қатты аялдамалар болуы керек пе.

Әдістері

Асинхронды әдістер мен ауысулар

Барлық API әдістері асинхронды және өтуді бастайды . Олар қоңырау шалушыға ауысу басталған бойда, бірақ аяқталмай тұрып қайтады . Сонымен қатар, өтпелі құрамдастағы әдіс шақыруы еленбейді .

Қосымша ақпарат алу үшін біздің JavaScript құжаттамасын қараңыз .

Карусель данасын карусель конструкторымен жасауға болады, мысалы, қосымша опциялармен инициализациялау және элементтерді айналдыруды бастау үшін:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Әдіс Сипаттама
cycle Карусель элементтерін солдан оңға қарай айналдырады.
dispose Элементтің карусельін бұзады. (DOM элементінде сақталған деректерді жояды)
getInstance DOM элементімен байланыстырылған карусель данасын алуға мүмкіндік беретін статикалық әдіс, оны келесідей пайдалануға болады: bootstrap.Carousel.getInstance(element).
getOrCreateInstance DOM элементімен байланыстырылған карусель данасын қайтаратын немесе инициализацияланбаған жағдайда жаңасын жасайтын статикалық әдіс. Сіз оны келесідей пайдалана аласыз: bootstrap.Carousel.getOrCreateInstance(element).
next Келесі элементке ауысады. Келесі элемент көрсетілмей тұрып (мысалы, slid.bs.carouselоқиға болғанға дейін) қоңырау шалушыға қайтады.
nextWhenVisible Бет көрінбейтін немесе карусель немесе оның ата-анасы көрінбейтін кезде, карусельді келесіге айналдырмаңыз. Мақсатты элемент көрсетілгенге дейін қоңырау шалушыға қайтарады .
pause Карусель элементтерді айналып өтуді тоқтатады.
prev Алдыңғы элементке ауысады. Қоңырау шалушыға алдыңғы элемент көрсетілмей тұрып қайтарады (мысалы, slid.bs.carouselоқиға болғанға дейін).
to Карусельді белгілі бір кадрға айналдырады (0 негізінде, массивке ұқсас). Қоңырау шалушыға мақсатты элемент көрсетілмей тұрып қайтарады (мысалы, slid.bs.carouselоқиға болғанға дейін).

Оқиғалар

Bootstrap карусель сыныбы карусель функциясына қосылу үшін екі оқиғаны көрсетеді. Екі оқиғаның да келесі қосымша қасиеттері бар:

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

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

Оқиға түрі Сипаттама
slid.bs.carousel Карусель сырғытуды аяқтаған кезде іске қосылады.
slide.bs.carousel slideДана әдісі шақырылған кезде бірден іске қосылады. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})