ካሮሰል

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

ከመይ ይሰርሕ

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

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

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

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

ኣብ መወዳእታ ፡ ጃቫስክሪፕትናutil.js ካብ ምንጪ ትሃንጽ እንተኾንካ ፡ .

ኣብነት

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

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

ምስ ቁጽጽር

ኣብ ዝሓለፈን ዝቕጽልን ቁጽጽር ምውሳኽ። ባእታታት ክትጥቀም ንመክር <button>፣ ግን <a>ባእታታት ምስ role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

መስቀላዊ መልክዕ

.carousel-fadeስላይድ ኣብ ክንዲ ስላይድ ብናይ ምድምሳስ ምስግጋር ህይወት ንምሃብ ኣብ ካሮሰልካ ወስኸሉ ። ከከም ትሕዝቶ ካሮሰልካ (ንኣብነት፡ ጽሑፍ ጥራይ ስላይድ) ፡ ንግቡእ መስቀላዊ ምድምሳስ .bg-bodyወይ ገለ ብሕታዊ CSS ኣብቲ s ክትውስኽ ትኽእል ኢኻ ።.carousel-item

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

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

ኣብ መንጎ ብኣውቶማቲክ ብሽክለታ ናብቲ ዝቕጽል ኣቕሓ ምዝዋር ዘሎ መጠን ምድንጓይ ንምቕያር 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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

ካሮሰል ኣብ መንጎ ስላይድ ንምንቅስቓስ ኣብ መሳርሒታት ተንከስካሲ ስክሪን ንጸጋም/የማን ምውጥዋጥ ይድግፉ። data-touchእዚ ነቲ ባህሪ ተጠቒምካ ክስረዝ ይኽእል ። እዚ ኣብ ታሕቲ ዘሎ ኣብነት እውን ነቲ data-rideባህሪ ዘየጠቓልልን ኣለዎ data-interval="false"ስለዚ ኣውቶፕለይ ኣይገብርን እዩ።

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

ኣጠቓቕማ

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

ንኣቀማምጣ ናይቲ ካሮሰል ብቐሊሉ ንምቁጽጻር ናይ ዳታ ባህርያት ተጠቐም። ነቶም ቁልፊ ቃላት ወይ ፣ data-slideይቕበል ፣ እዚ ድማ ነቲ ናይ ስላይድ ቦታ ብተዛማዲ ምስቲ ሕጂ ዘለዎ ቦታ ይቕይሮ። ከም ኣማራጺ ፡ ጥረ ስላይድ ኢንዴክስ ናብቲ ካሮሰል ንምሕላፍ ተጠቐም ፣ እዚ ድማ ነቲ ስላይድ ቦታ ናብ ፍሉይ ኢንዴክስ ብ ዝጅምር የሰጋግሮ ።prevnextdata-slide-todata-slide-to="2"0

እቲ data-ride="carousel"ባህሪ ንሓደ ካሮሰል ካብ ጽዕነት ገጽ ጀሚሩ ከም ተንቀሳቓሲ ምልክት ንምግባር ይጥቀመሉ። ካሮሰልካ ንምጅማር እንተዘይተጠቒምካሉ data-ride="carousel"ባዕልኻ ክትጅምሮ ኣለካ። ምስ (ተደራራቢን ዘየድልን) ግሉጽ ምጅማር ጃቫስክሪፕት ናይ ሓደ ዓይነት ካሮሰል ተደሚሩ ክጥቀመሉ ኣይክእልን።

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

ንካሮሰል ብኢድካ ብ፤

$('.carousel').carousel()

ኣማራጺታት

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

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

ኣገባባት

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

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

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

`.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')`

ናይ ሓደ ባእታ ካሮሰል የጥፍኦ።

`.carousel('nextWhenVisible')`

ገጽ ኣብ ዘይረኣየሉ ወይ ካሮሰል ወይ ወላዲኡ ኣብ ዘይረኣየሉ እዋን ነቲ ካሮሰል ናብ ዝቕጽል ብብሽክለታ ኣይትዝውሮ። እቲ ዝቕጽል ኣቕሓ ቅድሚ ምርኣዩ (ማለት ቅድሚ እቲ ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ ።slid.bs.carousel

`.carousel('to')`

ነቲ ካሮሰል ናብ ሓደ ፍሉይ ፍሬም ይዘውሮ (0 መሰረት ዝገበረ፣ ምስ ስርዓት ዝመሳሰል)። እቲ ዝቕጽል ኣቕሓ ቅድሚ ምርኣዩ (ማለት ቅድሚ እቲ ፍጻመ ምፍጻሙ) ናብቲ ደዋሊ ይምለስ ።slid.bs.carousel

ፍጻሜታት

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

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

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

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

ናይ ምስግጋር ንውሓት ግዜ ምቕያር

ናይ ምስግጋር ንውሓት ግዜ ናይ ቅድሚ ምጥርናፍካ .carousel-itemብ Sass ተለዋዋጢ ወይ ብሕታዊ ቅዲታት ክትቅየር $carousel-transitionትኽእል ኢኻ እቲ ዝተጠርነፈ CSS ትጥቀም እንተኾንካ። ብዙሓት ምስግጋራት እንተተተግቢሮም፡ እቲ ናይ ምልዋጥ ምስግጋር መጀመርታ ከም ዝተገልጸ ኣረጋግጽ (ንኣብነት transition: transform 2s ease, opacity .5s ease-out)።