ካሩሰል

በንጥረ ነገሮች - ምስሎች ወይም የጽሑፍ ስላይዶች - እንደ ካሮዝል ብስክሌት ለመንዳት የስላይድ ትዕይንት አካል።

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

ካሩሰል በተከታታይ ይዘት፣ በCSS 3D ትራንስፎርሜሽን እና በትንሽ ጃቫስክሪፕት የተገነባ የብስክሌት ትዕይንት ነው። ከተከታታይ ምስሎች፣ ጽሑፍ ወይም ብጁ ምልክት ማድረጊያ ጋር ይሰራል። እንዲሁም ለቀድሞ/ቀጣይ መቆጣጠሪያዎች እና ጠቋሚዎች ድጋፍን ያካትታል።

የገጽ ታይነት ኤፒአይ በሚደገፍባቸው አሳሾች ድረ-ገጹ ለተጠቃሚው በማይታይበት ጊዜ ካሮሴል መንሸራተትን ያስወግዳል (ለምሳሌ የአሳሹ ትር ሲቦዝን፣ የአሳሹ መስኮቱ ሲቀንስ ወዘተ)።

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

እባካችሁ የጎጆ ካሮሴሎች እንደማይደገፉ እና ካሮሴሎች በአጠቃላይ የተደራሽነት ደረጃዎችን የማያከብሩ መሆናቸውን ይገንዘቡ።

ለምሳሌ

ካሮሴሎች የስላይድ ልኬቶችን በራስ-ሰር መደበኛ አያደርጉም። እንደዚያው፣ ይዘቱን በተገቢው መጠን ለመለካት ተጨማሪ መገልገያዎችን ወይም ብጁ ቅጦችን መጠቀም ሊኖርብዎ ይችላል። ካሮሴሎች ቀዳሚ/ቀጣይ መቆጣጠሪያዎችን እና አመላካቾችን ሲደግፉ፣ በግልጽ አያስፈልጉም። እንደፈለጉት ያክሉ እና ያብጁ።

.activeክፍሉን ወደ አንዱ ስላይድ መጨመር ያስፈልገዋል, አለበለዚያ ካሮውስ አይታይም. idእንዲሁም ለአማራጭ መቆጣጠሪያዎች ልዩ ማቀናበርዎን እርግጠኛ ይሁኑ .carousel፣ በተለይ በአንድ ገጽ ላይ ብዙ ካሮሴሎችን እየተጠቀሙ ከሆነ። የቁጥጥር እና አመላካች አካላት ከኤለመንት ጋር የሚዛመድ ባህሪ (ወይም ለአገናኞች) ሊኖራቸው data-bs-targetይገባል ።hrefid.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ተንሸራታቾችን ከስላይድ ይልቅ የደበዘዘ ሽግግር ለማድረግ ወደ ካርሶልዎ ያክሉ ። በእርስዎ የካሮሰል ይዘት ላይ በመመስረት (ለምሳሌ፣ የጽሑፍ ስላይዶች ብቻ)፣ ለትክክለኛው መሻገሪያ .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>

የግለሰብ `.carousel-item`ክፍተት

ወደ ቀጣዩ ንጥል በራስ-ሰር በብስክሌት መንዳት መካከል የሚዘገይበትን ጊዜ ለመቀየር ወደ data-bs-interval=""አክል ።.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። .carouselቁጥጥሮች ከነባሪያቸው filterየሲኤስኤስ ንብረት ጋር ከተሞሉ ተገለባብጠዋል። colorመግለጫ ፅሁፎች እና ቁጥጥሮች የ እና የሚበጁ ተጨማሪ የ Sass ተለዋዋጮች አሏቸው background-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>

ብጁ ሽግግር

የተቀናበረውን CSS እየተጠቀሙ ከሆነ የሽግግሩ ቆይታ .carousel-itemበ Sass ተለዋዋጭ ወይም ብጁ ቅጦች ሊቀየር ይችላል ። $carousel-transition-durationብዙ ሽግግሮች ከተተገበሩ፣ የለውጡ ሽግግር መጀመሪያ መገለጹን ያረጋግጡ (ለምሳሌ transition: transform 2s ease, opacity .5s ease-out)።

ሳስ

ተለዋዋጮች

ለሁሉም የ carousels ተለዋዋጮች:

$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ቁልፍ ቃላትን ይቀበላል prevወይም next, ይህም የስላይድ አቀማመጥ አሁን ካለው አቀማመጥ አንጻር ይለውጣል. በአማራጭ፣ data-bs-slide-toጥሬ ስላይድ መረጃ ጠቋሚን ወደ ካሮሴል ለማለፍ ይጠቀሙ data-bs-slide-to="2"፣ ይህም በ ጀምሮ የተንሸራታች ቦታን ወደ አንድ የተወሰነ መረጃ ጠቋሚ ይቀይራል 0።

ባህሪው data-bs-ride="carousel"ከገጽ ጭነት ጀምሮ ካሮሴልን እንደ እነማ ለማመልከት ይጠቅማል። ካሮሴልዎን data-bs-ride="carousel"ለማስጀመር ካልተጠቀሙበት, እራስዎ ማስጀመር አለብዎት. ከተመሳሳይ ካሮሴል (ከተደጋጋሚ እና አላስፈላጊ) ግልጽ ጃቫስክሪፕት ማስጀመሪያ ጋር በማጣመር መጠቀም አይቻልም።

በጃቫስክሪፕት በኩል

ካሮሴልን በእጅ ይደውሉ፡-

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

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። 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`	ካሮሴሉ ያለማቋረጥ ማሽከርከር ወይም ጠንካራ ማቆሚያዎች ሊኖሩት ይችላል።

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

ከካሮሴል ገንቢ ጋር የካሮሰል ምሳሌ መፍጠር ይችላሉ፣ ለምሳሌ፣ ከተጨማሪ አማራጮች ጋር ለመጀመር እና በእቃዎች ብስክሌት መንዳት ይጀምሩ፡

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's carousel ክፍል ወደ carousel ተግባር ለመያያዝ ሁለት ክስተቶችን ያጋልጣል። ሁለቱም ክስተቶች የሚከተሉት ተጨማሪ ባህሪያት አሏቸው:

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...
})

ካሩሰል

እንዴት እንደሚሰራ

ለምሳሌ

ስላይዶች ብቻ

ከመቆጣጠሪያዎች ጋር

ከአመላካቾች ጋር

ከመግለጫ ፅሁፎች ጋር

የመጀመሪያ ስላይድ መለያ

ሁለተኛ ስላይድ መለያ

ሦስተኛው ስላይድ መለያ

ክሮስፋድ

የግለሰብ .carousel-itemክፍተት

የንክኪ ማንሸራተትን አሰናክል

ጨለማ ተለዋጭ

የመጀመሪያ ስላይድ መለያ

ሁለተኛ ስላይድ መለያ

ሦስተኛው ስላይድ መለያ

ብጁ ሽግግር

ሳስ

ተለዋዋጮች

አጠቃቀም

በውሂብ ባህሪያት በኩል

በጃቫስክሪፕት በኩል

አማራጮች

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ክስተቶች

የግለሰብ `.carousel-item`ክፍተት