ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ካሮሰል

ብባእታታት-ስእልታት ወይ ስላይድ ጽሑፍ-ከም ካሮሰል ዝኣመሰለ ብሽክለታ ንምዝዋር ዝሕግዝ ስላይድ ሾው ባእታ።

ኣብዚ ገጽ

ከመይ ይሰርሕ

እቲ ካሮሰል ብተኸታታሊ ትሕዝቶታት ብሽክለታ ንምጉዓዝ ዝሕግዝ ስላይድ ሾው ኮይኑ፡ ብ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 ኣብቲ s ክትውስኽ ትኽእል ኢኻ ።.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ባህሪ ስለዘየጠቓልል autoplay ኣይገብርን እዩ።

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ንዝጸልመተ ቁጽጽር፡ መርኣዪታትን መግለጺታትን ወስኸሉ ። ቁጽጽራት ካብቲ ነባሪ ጻዕዳ ምምላኦም ብ filterCSS ንብረት ተገልቢጦም ኣለዉ። colorመግለጺ ጽሑፋትን ቁጽጽርን ተወሳኺ ናይ ሳስ ተለዋዋጢ ረቛሒታት ኣለዎም እሞ ነቲን 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>

ብሕታዊ ምስግጋር

ናይ ምስግጋር ንውሓት ግዜ ናይ ቅድሚ ምጥርናፍካ .carousel-itemብ Sass ተለዋዋጢ ወይ ብሕታዊ ቅዲታት ክትቅየር $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"ባዕልኻ ክትጅምሮ ኣለካ። ምስ (ተደራራቢን ዘየድልን) ግሉጽ ምጅማር ጃቫስክሪፕት ናይ ሓደ ዓይነት ካሮሰል ተደሚሩ ክጥቀመሉ ኣይክእልን።

ብመንገዲ ጃቫስክሪፕት።

ንካሮሰል ​​ብኢድካ ብ፤

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 ጀሚሩ ኩሎም ኣካላት ንሓደ ፈተነ ዝተሓዝአ ዳታ ባህሪ ይድግፉ እዚ data-bs-configድማ ቀሊል ውቅር ኣካላት ከም JSON ሕብረ ቃላት ከዕቁብ ይኽእል። ሓደ ባእታ data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes ምስ ዝህልዎ፡ እቲ ናይ መወዳእታ titleዋጋ ክኸውን እዩ 456፡ እቶም ዝተፈላለዩ ዳታ ባህርያት ድማ ኣብ data-bs-config. ብተወሳኺ፡ ዝጸንሑ ባህርያት ዳታ ከም 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 element ዝተዓቀበ ዳታ የወግድ)
getInstance ምስ ሓደ DOM element ዝተኣሳሰር ናይ ካሮሰል ምሳሌ ክትረክብ ዘኽእለካ ስታቲክ ሜላ፣ ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ: 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ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ።

ፍጻሜታት

ቡትስትራፕ ናይ ካሮሰል ክፍሊ ክልተ ፍጻመታት ንካሮሰል ​​ተግባር ምትእስሳር የቃልዕ። ክልቲኦም ፍጻመታት እዞም ዝስዕቡ ተወሳኺ ባህርያት ኣለዎም፤

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