ካሮሰል

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

ኣብዚ ገጽ

ከመይ ይሰርሕ

እቲ ካሮሰል ብተኸታታሊ ትሕዝቶታት ብሽክለታ ንምጉዓዝ ዝሕግዝ ስላይድ ሾው ኮይኑ፡ ብCSS 3D ትራንስፎርምን ቁሩብ ጃቫስክሪፕትን ዝተሃንጸ እዩ። ብተኸታታሊ ምስልታት፡ ጽሑፍ ወይ ብሕታዊ ምልክት ይሰርሕ። ብተወሳኺ ንዝሓለፉ/ዝቕፅሉ ቁፅፅራትን መርኣይታትን ዝግበር ደገፍ እውን የጠቓልል።

ኣብቶም ገጽ ርኡይነት ኤፒኣይ ዝድገፈሎም ዳህሰስቲ ፡ እቲ መርበብ ሓበሬታ ንተጠቃሚ ኣብ ዘይርኣየሉ እዋን (ከም ትብ መርበብ ሓበሬታ ዘይንጡፍ ምስ ዝኸውን፡ መስኮት መርበብ ሓበሬታ ክጎድል ከሎ ወዘተ)፡ እቲ ካሮሰል ካብ ምዝንባል ክቑጠብ እዩ።

ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

በጃኹም ኣስተውዕሉ፡ ዝተሰቕሉ ካሮሰልታት ከምዘይድገፉ፡ ከምኡ’ውን ካሮሰላት ብሓፈሻ ምስ ደረጃታት ተበጻሕነት ከምዘይሰማምዑ።

ኣብነት

ካሮሰል ንኣውቶማቲክ መለክዒታት ስላይድ ንቡር ኣይገብርዎን እዮም። ከምኡ ስለዝኾነ፡ ንትሕዝቶ ብግቡእ ንምዕባይ ተወሳኺ ዩቲሊቲታት ወይ ብሕታዊ ቅዲታት ክትጥቀም ከድልየካ ይኽእል እዩ። ካሮሰላት ንዝሓለፉ/ዝቕጽል ቁጽጽርን መርኣይታትን ክድግፉ እንከለዉ፡ ብግልጺ ግን ኣየድልዩን እዮም። ከምቲ ዝደለኻዮ ወስኸሉን ኣመዓራርዮን።

እቲ .activeክፍሊ ኣብ ሓደ ካብቶም ስላይድ ክውሰኽ ኣለዎ እንተዘይኮይኑ እቲ ካሮሰል ኣይክረአን እዩ። ከምኡ ውን ንኣማራጺ ቁጽጽር ፍሉይ idኣብቲ .carouselንኣማራጺ ቁጽጽር ምቕማጥካ ኣረጋግጽ፣ ብፍ��ይ ኣብ ሓደ ገጽ ብዙሓት ካሮሰልታት ትጥቀም እንተኾንካ። ቁጽጽርን መርኣዪን ባእታታት ምስቲ ናይቲ ባእታ ዝሰማማዕ data-bs-targetባህሪ (ወይ ንመላግቦታት) ክህልዎም ኣለዎ።hrefid.carousel

ስላይድ ጥራይ

ኣብዚ ስላይድ ጥራይ ዘለዎ ካሮሰል ኣሎ። ንናይ መርበብ ሓበሬታ ነባሪ ምስሊ ኣሰላልፋ ንምክልኻል ህላወ ናይቲን ኣብ ካሮሰል ምስልታትን ኣስተውዕል .d-block።.w-100

<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".

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

ምስ መርኣይታት

ብተወሳኺ ነቶም መርኣይታት ኣብቲ ካሮሰል ክትውስኾም ትኽእል ኢኻ፣ ጎኒ ጎኒ እቶም መቆጻጸሪታት፣ እውን።

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <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.

ቀዳማይ ስላይድ ስያመ

ገለ ወኪል ትሕዝቶ ቦታ ንመጀመርታ ስላይድ።

ካልኣይ ስላይድ ስያመ

ገለ ውክልና ዘለዎ ትሕዝቶ ቦታ ንኻልኣይ ስላይድ።

ሳልሳይ ስላይድ ስያመ

ገለ ውክልና ዘለዎ ትሕዝቶ ቦታ ንሳልሳይ ስላይድ።

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <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ስላይድ ኣብ ክንዲ ስላይድ ብናይ ምድምሳስ ምስግጋር ህይወት ንምሃብ ኣብ ካሮሰልካ ወስኸሉ ።

<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=""ናብ a ወስኽ ።.carousel-item

<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ባህሪ ዘየጠቓልልን ኣለዎ data-bs-interval="false"ስለዚ ኣውቶፕለይ ኣይገብርን እዩ።

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="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.

ቀዳማይ ስላይድ ስያመ

ገለ ወኪል ትሕዝቶ ቦታ ንመጀመርታ ስላይድ።

ካልኣይ ስላይድ ስያመ

ገለ ውክልና ዘለዎ ትሕዝቶ ቦታ ንኻልኣይ ስላይድ።

ሳልሳይ ስላይድ ስያመ

ገለ ውክልና ዘለዎ ትሕዝቶ ቦታ ንሳልሳይ ስላይድ።

<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"ባዕልኻ ክትጅምሮ ኣለካ። ምስ (ተደራራቢን ዘየድልን) ግሉጽ ምጅማር ጃቫስክሪፕት ናይ ሓደ ዓይነት ካሮሰል ተደሚሩ ክጥቀመሉ ኣይክእልን።

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

ንካሮሰል ብኢድካ ብ፤

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-bs-፡ ከምቲ ኣብ data-bs-interval="".

ሽም	ዓይነት	ትሑዝ	መግለፂ
`interval`	ቑጽሪ	`5000`	ኣብ መንጎ ብኣውቶማቲክ ንሓደ ኣቕሓ ብሽክለታ ምዝዋር ዘሎ መጠን ግዜ ምድንጓይ። If `false`, ካሮሰል ብኣውቶማቲክ ዑደት ኣይገብርን እዩ።
`keyboard`	ቡልያን ዝብል እዩ።	`true`	እቲ ካሮሰል ንፍጻመታት ቁልፊ ሰሌዳ ግብረ መልሲ ክህብ ኣለዎ ድዩ የብሉን።
`pause`	ሕብረ ቃላት \| ቡልያን ዝብል እዩ።	`'hover'`	ናብ ፡ እንተተቐሚጡ `'hover'`፡ ንብሽክለታ ናይቲ ካሮሰል ኣብ ’ ዩ ደው የብሎ `mouseenter`እሞ፡ ንብሽክለታ ናይቲ ካሮሰል ኣብ `mouseleave`. ናብ ፡ እንተተቐሚጡ `false`፡ ኣብ ልዕሊ እቲ ካሮሰል ምዝንባል ደው ኣየብሎን እዩ። ኣብ ምትንኻፍ ዝኽእል መሳርሒታት፡ ናብ ፡ ምስ ዝቕየር፡ ምዝዋር ብሽክለታ ንኽልተ ፍልልይ `'hover'`ደው ክብል እዩ (ተጠቃሚ ምስቲ ካሮሰል ምትእስሳር ምስ ወድአ)፡ ቅድሚ ብኣውቶማቲክ ዳግማይ ምጅማሩ። `touchend`እዚ ኣብ ርእሲ እዚ ኣብ ላዕሊ ዝተጠቕሰ ባህሪ ማውስ ምዃኑ ኣስተውዕል።
`ride`	ሕብረ ቃላት \| ቡልያን ዝብል እዩ።	`false`	ተጠቃሚ ነቲ ቀዳማይ ኣቕሓ ብኢዱ ድሕሪ ምዝዋሩ ነቲ ካሮሰል ብኣውቶማቲክ ይጻወቶ። ናብ `'carousel'`, እንተተቐሚጡ፡ ነቲ ካሮሰል ኣብ ጽዕነት ብኣውቶማቲክ ይጻወቶ።
`wrap`	ቡልያን ዝብል እዩ።	`true`	እቲ ካሮሰል ብቐጻሊ ብሽክለታ ክዝውር ኣለዎ ድዩ ወይስ ተሪር ደውታ ክህልዎ ኣለዎ።
`touch`	ቡልያን ዝብል እዩ።	`true`	እቲ ካሮሰል ኣብ መሳርሒታት ተንከስካሲ ስክሪን ንጸጋማይ/የማናይ ስዋይፕ ምትእስሳር ክድግፍ ኣለዎ ድዩ የብሉን።

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

ብካሮሰል ሃናጺ ናይ ካሮሰል ምሳሌ ክትፈጥር ትኽእል ኢኻ፣ ንኣብነት፣ ብተወሳኺ ኣማራጺታት ክትጅምርን ብኣቑሑት ኣቢልካ ብሽክለታ ክትጅምርን፤

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

ሜላ	መግለፂ
`cycle`	ካብ ጸጋም ናብ የማን ብመንገዲ እቶም ናይ ካሮሰል ኣቑሑት ዑደት ይገብር።
`pause`	እቲ ካሮሰል ብኣቑሑት ኣቢሉ ካብ ብሽክለታ ከይዝውር ደው የብሎ።
`prev`	ናብቲ ዝሓለፈ ኣቕሓ ዑደት ይገብር። ቅድሚ እቲ ዝሓለፈ ኣቕሓ ምርኣይ (ንኣብነት፡ ቅድሚ እቲ `slid.bs.carousel`ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ።
`next`	ናብቲ ዝቕጽል ኣቕሓ ዑደት ይገብር። ቅድሚ እቲ ዝቕጽል ኣቕሓ ምርኣይ (ንኣብነት፡ ቅድሚ እቲ `slid.bs.carousel`ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ።
`nextWhenVisible`	ገጽ ኣብ ዘይረኣየሉ ወይ ካሮሰል ወይ ወላዲኡ ኣብ ዘይረኣየሉ እዋን ብሽክለታ ካሮሰል ናብ ዝቕጽል ኣይትዝውር። ቅድሚ እቲ ዕላማ ዝገበረ ኣቕሓ ምርኣይ ናብቲ ደዋሊ ይምለስ
`to`	ነቲ ካሮሰል ናብ ሓደ ፍሉይ ፍሬም ይዘውሮ (0 መሰረት ዝገበረ፣ ምስ ስርዓት ዝመሳሰል)። ቅድሚ እቲ ዕላማ ዝገበረ ኣቕሓ ምርኣይ (ንኣብነት፡ ቅድሚ እቲ `slid.bs.carousel`ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ።
`dispose`	ናይ ሓደ ባእታ ካሮሰል የጥፍኦ። (ኣብ DOM element ዝተዓቀበ ዳታ የወግድ)
`getInstance`	ምስ ሓደ DOM element ዝተኣሳሰር ናይ ካሮሰል ምሳሌ ክትረክብ ዘኽእለካ ስታቲክ ሜላ፣ ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ፤`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	ስታቲክ ሜላ ምስ ሓደ DOM ባእታ ዝተኣሳሰር ናይ ካሮሰል ምሳሌ ዝምለስ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ዝፈጥር። ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ፤`bootstrap.Carousel.getOrCreateInstance(element)`

ፍጻሜታት

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

direction: እቲ ካሮሰል ዝንሳፈፈሉ ዘሎ ኣንፈት (ወይ "left"ወይ "right").
relatedTarget: እቲ ከም ንጡፍ ኣቕሓ ናብ ቦታኡ ዝንሳፈፍ ዘሎ DOM ባእታ።
from: ናይቲ ሕጂ ዘሎ ኣቕሓ መመልከቲ
to፦ መመልከቲ ናይቲ ዝቕጽል ኣቕሓ

ኩሎም ናይ ካሮሰል ፍጻመታት ኣብቲ ካሮሰል ባዕሉ (ማለት ኣብቲ <div class="carousel">).

ዓይነት ፍጻመ	መግለፂ
`slide.bs.carousel`	`slide`እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
`slid.bs.carousel`	እቲ ካሮሰል ስላይድ ምስግጋሩ ምስ ወድአ ይትኮስ።

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

ካሮሰል

ከመይ ይሰርሕ

ኣብነት

ስላይድ ጥራይ

ምስ ቁጽጽር

ምስ መርኣይታት

ምስ መግለጺ ጽሑፍ

ቀዳማይ ስላይድ ስያመ

ካልኣይ ስላይድ ስያመ

ሳልሳይ ስላይድ ስያመ

መስቀላዊ መልክዕ

ውልቃዊ .carousel-itemፍልልይ

ምትንኻፍ ስዋይፒንግ ኣሰናኽል

ጸሊም ፍልልይ

ቀዳማይ ስላይድ ስያመ

ካልኣይ ስላይድ ስያመ

ሳልሳይ ስላይድ ስያመ

ብሕታዊ ምስግጋር

ሳስ

ተለዋዋጢ ረቛሒታት

ኣጠቓቕማ

ብመንገዲ ባህርያት ዳታ

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

ኣማራጺታት

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ፍጻሜታት

ውልቃዊ `.carousel-item`ፍልልይ