ካሩሰል
በንጥረ ነገሮች - ምስሎች ወይም የጽሑፍ ስላይዶች - እንደ ካሮዝል ብስክሌት ለመንዳት የስላይድ ትዕይንት አካል።
እንዴት እንደሚሰራ
ካሩሰል በተከታታይ ይዘት፣ በCSS 3D ትራንስፎርሜሽን እና በትንሽ ጃቫስክሪፕት የተገነባ የብስክሌት ትዕይንት ነው። ከተከታታይ ምስሎች፣ ጽሑፍ ወይም ብጁ ምልክት ማድረጊያ ጋር ይሰራል። እንዲሁም ለቀድሞ/ቀጣይ መቆጣጠሪያዎች እና ጠቋሚዎች ድጋፍን ያካትታል።
የገጽ ታይነት ኤፒአይ በሚደገፍባቸው አሳሾች ድረ-ገጹ ለተጠቃሚው በማይታይበት ጊዜ ካሮሴል መንሸራተትን ያስወግዳል (ለምሳሌ የአሳሹ ትር ሲቦዝን፣ የአሳሹ መስኮቱ ሲቀንስ ወዘተ)።
prefers-reduced-motion
በመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ
።
እባካችሁ የጎጆ ካሮሴሎች እንደማይደገፉ እና ካሮሴሎች በአጠቃላይ የተደራሽነት ደረጃዎችን የማያከብሩ መሆናቸውን ይገንዘቡ።
በመጨረሻም፣ የእኛን ጃቫ ስክሪፕት ከምንጩ እየገነቡ ከሆነ፣ ያስፈልገዋልutil.js
።
ለምሳሌ
ካሮሴሎች የስላይድ ልኬቶችን በራስ-ሰር መደበኛ አያደርጉም። እንደዚያው፣ ይዘቱን በተገቢው መጠን ለመለካት ተጨማሪ መገልገያዎችን ወይም ብጁ ቅጦችን መጠቀም ሊኖርብዎ ይችላል። ካሮሴሎች ቀዳሚ/ቀጣይ መቆጣጠሪያዎችን እና አመላካቾችን ሲደግፉ፣ በግልጽ አያስፈልጉም። እንደፈለጉት ያክሉ እና ያብጁ።
.active
ክፍሉን ወደ አንዱ ስላይድ መጨመር ያስፈልገዋል, አለበለዚያ ካሮውስ አይታይም. id
እንዲሁም ለአማራጭ መቆጣጠሪያዎች ልዩ ማቀናበርዎን እርግጠኛ ይሁኑ .carousel
፣ በተለይ በአንድ ገጽ ላይ ብዙ ካሮሴሎችን እየተጠቀሙ ከሆነ። የቁጥጥር እና አመላካች አካላት ከኤለመንት ጋር የሚዛመድ ባህሪ (ወይም ለአገናኞች) ሊኖራቸው data-target
ይገባል ።href
id
.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 ማከል ወይም የተወሰነ ማከል ይፈልጉ ይሆናል።.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=""
አክል ።.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
ቁልፍ ቃላትን ይቀበላል prev
ወይም next
, ይህም የስላይድ አቀማመጥ አሁን ካለው አቀማመጥ አንጻር ይለውጣል. በአማራጭ፣ data-slide-to
ጥሬ ስላይድ መረጃ ጠቋሚን ወደ ካሮሴል ለማለፍ ይጠቀሙ data-slide-to="2"
፣ ይህም በ ጀምሮ የተንሸራታች ቦታን ወደ አንድ የተወሰነ መረጃ ጠቋሚ ይቀይራል 0
።
ባህሪው data-ride="carousel"
ከገጽ ጭነት ጀምሮ ካሮሴልን እንደ እነማ ለማመልከት ይጠቅማል። ካሮሴልዎን data-ride="carousel"
ለማስጀመር ካልተጠቀሙበት, እራስዎ ማስጀመር አለብዎት. ከተመሳሳይ ካሮሴል (ከተደጋጋሚ እና አላስፈላጊ) ግልጽ ጃቫስክሪፕት ማስጀመሪያ ጋር በማጣመር መጠቀም አይቻልም።
በጃቫስክሪፕት በኩል
ካሮሴልን በእጅ ይደውሉ፡-
$('.carousel').carousel()
አማራጮች
አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-
እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-interval=""
።
ስም | ዓይነት | ነባሪ | መግለጫ |
---|---|---|---|
ክፍተት | ቁጥር | 5000 | በንጥል በራስ-ሰር በብስክሌት መካከል የሚዘገይበት ጊዜ። ከሆነ false ካሩሰል በራስ ሰር አይሽከረከርም። |
የቁልፍ ሰሌዳ | ቡሊያን | እውነት ነው። | ካሮሴሉ ለቁልፍ ሰሌዳ ዝግጅቶች ምላሽ መስጠት እንዳለበት። |
ለአፍታ አቁም | ሕብረቁምፊ | ቡሊያን | 'ማንዣበብ' |
በንክኪ የነቁ መሣሪያዎች ላይ፣ ወደ ሲዋቀር |
ማሽከርከር | ሕብረቁምፊ | የውሸት | ተጠቃሚው የመጀመሪያውን ንጥል በእጅ ካዞረው በኋላ ካሮሴልን በራስ-ሰር ያጫውታል። '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
ክስተቶች
የ Bootstrap's carousel ክፍል ወደ carousel ተግባር ለመያያዝ ሁለት ክስተቶችን ያጋልጣል። ሁለቱም ክስተቶች የሚከተሉት ተጨማሪ ባህሪያት አሏቸው:
direction
: ካሮሴሉ የሚንሸራተቱበት አቅጣጫ (ወይ"left"
ወይም"right"
).relatedTarget
: እንደ ገባሪ ንጥል ወደ ቦታው እየተንሸራተተ ያለው የDOM አባል።from
: የአሁኑ ንጥል መረጃ ጠቋሚto
: የሚቀጥለው ንጥል መረጃ ጠቋሚ
ሁሉም የካሮሴል ዝግጅቶች በካሩሴል እራሱ (ማለትም በ <div class="carousel">
) ላይ ይቃጠላሉ.
የክስተት አይነት | መግለጫ |
---|---|
ስላይድ.bs.carousel | slide የአብነት ዘዴው ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል። |
slid.bs.ካሮሴል | ካሮሴሉ የስላይድ ሽግግሩን ሲያጠናቅቅ ይህ ክስተት ይቃጠላል። |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
የሽግግር ቆይታውን ይቀይሩ
የተቀናበረውን CSS እየተጠቀሙ ከሆነ የሽግግሩ ቆይታ .carousel-item
በ Sass ተለዋዋጭ ወይም ብጁ ቅጦች ሊቀየር ይችላል ። $carousel-transition
ብዙ ሽግግሮች ከተተገበሩ፣ የለውጡ ሽግግር መጀመሪያ መገለጹን ያረጋግጡ (ለምሳሌ transition: transform 2s ease, opacity .5s ease-out
)።