Carousel bootstrap 3 උදාහරණ. සරල පියවර කිහිපයකින් Bootstrap මත ඔබේම ස්ලයිඩරයක් සාදන්න. ආරම්භක ක්රියාකාරී මූලද්රව්යය අවශ්ය වේ

⁰

Twitter Bootstrap 3 යනු අන්තර්ගත කළමනාකරණ පද්ධති සංවර්ධනය කිරීම සහ නඩත්තු කිරීම සඳහා හොඳම CSS රාමු වලින් එකකි. Bootstrap සමඟින්, ඔබට Twitter Bootstrap හි ජාලක පිරිසැලසුම් පද්ධතිය භාවිතයෙන් පහසුවෙන් බ්ලොග් හෝ කළඹ නිර්මාණය කළ හැක. බොහෝ CMS පද්ධතිවල හදවතේ, අපට සාමාන්‍යයෙන් "Slider" (Carousel) නමින් මූලික අංගයක් ඇත, මූලික වශයෙන් එය ස්වයංක්‍රීය අනුක්‍රමික රූප සංදර්ශනයකි, නමුත් එයට මෑතකදී නිම කරන ලද ව්‍යාපෘති, ඔබේ සේවාදායකයින්ගේ සමාලෝචන, විස්තර ප්‍රදර්ශනය කළ හැකිය. විශේෂ දීමනා, පුවත් හෝ නවතම බ්ලොග් ලිපි වෙත සබැඳි. මෙම ලිපියෙන් අපි Twitter Bootstrap 3 හි Carousel සංරචකය භාවිතයෙන් ස්ලයිඩරයක් සාදා ගන්නේ කෙසේදැයි බලමු.

Twitter Bootstrap 3 Carousel Component වෙත හැඳින්වීම

කැරොසල් සංරචකය සඳහා සලකුණු කිරීම මේ ආකාරයෙන් පෙනේ:

...

...

ඉහත කේතයෙන්, Bootstrap 3 ස්ලයිඩරය කොටස් කිහිපයකට බෙදා ඇති බව අපට පෙනේ:

සංඥා පුවරු
ස්ලයිඩර් අන්තර්ගතය
පාලනයන්

මූලද්‍රව්‍යයක් නැවත ලබා දීමට divස්ලයිඩරය තුළ, අපි පන්ති නම් එකතු කරමු: කැරොසල්සහ ස්ලයිඩය. පන්තිය කැරොසල්"කැරූසල්" බලපෑමක් ඇති කරයි, එනම්, එය රවුමක විනිවිදක වෙනස් කරයි. පන්තිය ස්ලයිඩයදකුණු හෝ වම් පැත්තෙන් ස්ලයිඩින් සජීවිකරණය එක් කරයි. පොයින්ටර් යනු ස්ලයිඩරයේ පතුලේ ඇති කුඩා කවයන් වන අතර ඒවා විනිවිදකයේ වත්මන් පිහිටීම සහ ස්ලයිඩ ගණන තීරණය කරයි. ඇණවුම් කළ ලැයිස්තුවක් භාවිතයෙන් දර්ශක නිර්මාණය වේ.

ඇණවුම් කළ ලැයිස්තුවක පන්තියක් ඇත කැරොසල්-දර්ශක, ළමා මූලද්රව්ය කුඩා කවයන් බවට පරිවර්තනය කරයි. එක් එක් මූලද්රව්යය liගුණාංගයක් තිබිය යුතුය දත්ත-ඉලක්කයමව් කන්ටේනරයේ හැඳුනුම්පත සමඟ. එහි ගුණාංගය ද තිබිය යුතුය data-slide-toඅද්විතීය සංඛ්‍යාත්මක අගයක් සමඟ, නිශ්චිත විනිවිදකයක් වෙත යොමු වීමට, අගයන් "0" සමඟ ආරම්භ විය යුතුය.

...

...

පන්තියක් සහිත සෑම අංගයක්ම අයිතමයඋප කොටස් දෙකක් ඇත: රූපසහ කැරොසල්-ශීර්ෂ පාඨය. ස්ලයිඩය සඳහා පසුබිම ලෙස රූපය භාවිතා වේ. පන්තිය සමඟ මූලද්රව්යය කැරොසල්-ශීර්ෂ පාඨයරූපයට ඉහලින් පිහිටා ඇති අතර, විනිවිදකයේ මාතෘකාව ලෙස භාවිතා වේ. තුල කැරොසල්-ශීර්ෂ පාඨය, අපට ටැග් හෝ දෙකම එකතු කළ හැක.

ස්ලයිඩ අතින් වෙනස් කිරීමට භාවිතා කරන වම් සහ දකුණු ඊතල මගින් පාලනය සපයනු ලැබේ.

මූලද්රව්ය දෙකක් තිබිය යුතුය: එක් එක් දිශාවට එකක්. පළමු මූලද්රව්යය වනු ඇත පරාසයපන්ති සමඟ මූලද්රව්යය glyphicon glyphicon-chevron-leftවම් ඊතල නිරූපකයක් වන අතර දෙවන මූලද්‍රව්‍යයට පන්ති ඇත glyphicon glyphicon-chevron-right, මෙය නිවැරදි ඊතලයයි. Bootstrap වලදී, අපට අයිකන පෙන්වීමට පින්තූර වෙනුවට අකුරු භාවිතා කළ හැකිය.

එච්චරයි! ඔබ ඔබේ වෙබ් අඩවිය සඳහා ස්ලයිඩරයක් නිර්මාණය කර ඇත. එසේම, ඔබ JavaScript කේතයේ එක පේළියක්වත් ලියා නැත, නමුත් bootstrap.js ඔබ වෙනුවෙන් සෑම දෙයක්ම කර ඇත.

කැරොසල් සැකසුම්

ස්ලයිඩරය තවදුරටත් අභිරුචිකරණය කිරීමට, ඔබට ගුණාංග කිහිපයක් එකතු කළ හැකිය දත්ත-*මාපිය කැරොසල් කන්ටේනරය සඳහා.

"දත්ත පරතරය" ස්ලයිඩ මාරු කිරීම අතර කාල පරතරය නියම කිරීමට භාවිතා කරයි. එය සංඛ්‍යාත්මක අගයක් ගන්නා අතර අංකය මිලි තත්පර වලින් විය යුතුය.
"දත්ත-විරාමය" විරාම සිදුවීම ක්‍රියාත්මක වන්නේ කවදාද යන්න තීරණය කිරීමට භාවිතා කරයි. උදාහරණයක් ලෙස, එය " සැරිසරන්න", මූසිකය ස්ලයිඩරයට ඉහළින් ඇති විට ස්ලයිඩ මාරු කිරීම නතර වේ.
"දත්ත එතුම" යනු විනිවිදක ලැයිස්තුවේ අවසානයට ළඟා වුවහොත් විනිවිදක මාරු කිරීම නැවත ආරම්භ කළ යුතුද යන්න සැකසීමට ඔබට ඉඩ සලසන Boolean ගුණාංගයකි.

jQuery සමඟ සැකසීම

ඔබ jQuery සහ data-* attributes භාවිතා කිරීමට කැමති නම්, Bootstrap JavaScript භාවිතයෙන් ආරම්භ කිරීමට ඉඩ දෙයි. මෙය සිදු කිරීම සඳහා ඔබට පහත කේතය ලිවිය හැකිය:

$(".කැරූසල්") .කැරූසල් ();

විකල්ප භාවිතයෙන් කැරොසල් සැකසුම් සැකසිය හැක. උදාහරණ වශයෙන්:

$(".කැරූසල්") .කැරූසල් ((
පරතරය: 2000
විරාමය: "හෝවර්" ,
wrap: ඇත්ත
} ) ;

ඔබට පහත කේතය භාවිතයෙන් ස්ලයිඩර් සිදුවීම් හස්තීයව ක්‍රියාරම්භ කිරීමටද හැකිය:

.carousel("විරාමය") // pause
.carousel("cycle") // විනිවිදක සක්‍රීය කරන්න
.carousel(3) // හතරවන විනිවිදකය පෙන්වන්න
.carousel("පෙර") // පෙර ස්ලයිඩය පෙන්වන්න
.carousel("ඊළඟ") // ඊළඟ ස්ලයිඩය පෙන්වන්න

ස්ලයිඩරයේ සාමාන්‍ය ක්‍රියාකාරිත්වය පාලනය කිරීම සඳහා ඉහත ක්‍රම ඕනෑම JavaScript කේතයකින් ඇමතිය හැක. මට සම්මත ඊතල වෙනුවට මගේම බොත්තම් පෙන්වීමට අවශ්‍ය නම් පෙර සහ ඊළඟ ක්‍රම ඉතා ප්‍රයෝජනවත් වේ. විශේෂයෙන්ම ඔවුන් කැරොසල් පිරිසැලසුමෙන් පිටත සිටින විට.

නිගමනය

ජාවාස්ක්‍රිප්ට් වල කෝඩ් පේලි දහස් ගණනක් නොලියා ස්ලයිඩරයක් සාදා ගන්නේ කෙසේදැයි ඉගෙන ගැනීමට කැමති අයට මෙම ලිපිය ප්‍රයෝජනවත් විය යුතුය. මෙය සංවර්ධනයේ වේගය වැඩි කරන බවට සැකයක් නැත. හොඳම දෙය නම්, මෙම විසඳුම හරස් බ්‍රවුසරයට අනුකූල වේ, එබැවින් පැරණි බ්‍රව්සර් මත ක්‍රියා කිරීමට ඔබේ හිසකෙස් ඉරා දැමීමට ඔබට සිදු නොවේ.

ඔබට කිසියම් ප්‍රශ්නයක් ඇත්නම්, අපගේ භාවිතය භාවිතා කිරීමට අපි නිර්දේශ කරමු

Bootstrap රාමුවේ අංග වලින් අලුත් දෙයක් ඉගෙන ගන්න කැමති හැමෝටම සුභ දවසක්. අද මාතෘකාව වනුයේ Bootstrap Carousel ස්ලයිඩරයයි. මෙය සෑම වෙබ් අඩවියකම පාහේ පවතින ජනප්‍රිය අංගයකි.

එමනිසා, “කැරසල්” ස්ලයිඩරයක් සාදා ගන්නේ කෙසේද, මේ සඳහා ඔබට අවශ්‍ය බිල්ට් මෙවලම් මොනවාද, ඔබට පරාමිති වින්‍යාසගත කරන්නේ කෙසේද, සහ ලිපිය අවසානයේ මම ඔබට නිශ්චිත උදාහරණයක් ක්‍රියාත්මක කිරීම පෙන්වන්නම්. . දැන් අපි වැඩේට බහිමු!

Bootstrap Carousel Plugin මෙවලම් ගැන සියල්ල

නව දීමනා, නිෂ්පාදන, වත්මන් ප්‍රවර්ධන ලැයිස්තුවක්, කළඹක් පහසුවෙන් බැලීම යනාදිය ඉදිරිපත් කිරීමට “කැරූසල්” වර්ගයේ ඡායාරූප ගැලරියක් භාවිතා වේ. ඒ නිසා Bootstrap Carousel Plugin යන නිල නාමය යටතේ මෙම ප්ලගිනය සමඟ වැඩ කිරීමට හැකිවීම අද වැදගත් වේ.

විස්තර කරන ලද මූලද්රව්යය Internet Explorer 9 සහ පෙර අනුවාදවල නිසි ලෙස සහාය නොදක්වන බව වහාම සඳහන් කිරීම වටී. කෙසේ වෙතත්, එය විශිෂ්ට ලෙස ක්‍රියා කරයි (වර්ඩ්ප්‍රෙස්, ජූම්ලා! සහ අනෙකුත් එන්ජින් සඳහා, රාමුව සම්බන්ධ කිරීම තරමක් සරල ය).

සියලුම පරාමිති පහසුවෙන් ක්‍රියාත්මක කිරීමට සහ ස්ලයිඩරය ඉක්මනින් අභිරුචිකරණය කිරීමට, ඔබ Bootstrap 3 හි ප්‍රධාන බිල්ට් පන්ති ඉගෙන ගත යුතුය.

පන්තිය	අරමුණ
කැරොසල්	කැරොසල් ස්ලයිඩරයම නිර්මාණය කරයි.
ස්ලයිඩය	CSS භාවිතා කරමින්, විනිවිදක අතර මාරු වන විට සජීවිකරණ සහ සංක්‍රාන්ති බලපෑම් එක් කරයි. පන්තිය අවශ්‍ය නොවේ.
කැරොසල්-දර්ශක	එක් එක් රූපයේ පතුලේ කුඩා තිත් ආකාරයෙන් පාලක පැනලයක් එකතු කරයි, ඒ සමඟ ඔබට ඉක්මනින් ඕනෑම පින්තූරයකට යා හැකිය. පන්තිය අවශ්‍ය නොවේ.
කැරූසල්-අභ්යන්තර	ගැලරිය වෙත විනිවිදක එක් කරයි.
කැරොසල්-ශීර්ෂ පාඨය	ග්රැෆික් ගොනු අත්සන් කිරීම සඳහා වගකිව යුතු ය. අවශ්‍ය පරිදි ඔන් කළ හැක.
අයිතමය	එක් එක් විනිවිදක සඳහා අන්තර්ගත කට්ටලයක් නිර්වචනය කරයි.
දකුණු / වම් කැරොසල් පාලනය	රාමු අතර මාරු වීමට නමට අනුව දකුණු සහ වම් බොත්තම් එකතු කරයි.

මීට අමතරව, එවැනි ගැලරි වල සැකැස්මේ වෙනත් ලක්ෂණ දැන ගැනීම වටී.

ආරම්භ කිරීම සඳහා, "කැරසල්" බ්ලොක් එක නිර්මාණය කිරීම සඳහා දෙවැන්න නිවැරදිව ක්‍රියා කිරීම සඳහා id="myCarousel" ප්‍රකාශය අවශ්‍ය වේ.

එම div තුළම ඔබට data-ride="carousel" ගුණාංගය එක් කිරීමට අවශ්‍ය වේ, එයින් පෙන්නුම් කරන්නේ සජීවිකරණය පිටුව පූරණය වීමත් සමඟම වහාම පූරණය විය යුතු බවයි.

දැන් අපි දර්ශක වෙත යමු. සෑම ලි ටැගයකම ගුණාංග කිහිපයක් එකතු කිරීම වටී: දත්ත-ඉලක්කය, නිශ්චිත “කැරූසල්” හඳුනාගැනීම සහ දත්ත-ස්ලයිඩ්-ට, කුමන රාමු අංකයට යා යුතුද යන්න තීරණය කරයි.

රූප ඉදිරියට හෝ පසුපසට මාරු කරන බොත්තම් සම්බන්ධයෙන් ගත් කල, ඒවා ක්‍රියාත්මක කිරීම සඳහා “පෙර” හෝ “ඊළඟ” යන මූල පදය සමඟ දත්ත විනිවිදක ගුණාංගය එක් කිරීම වටී.

දැන් ඔබ රාමුවේ මූලික අංග ගැන දන්නවා, ඔබට ස්ලයිඩර් සංදර්ශකය යම් ආකාරයකින් සංස්කරණය කළ හැකි ස්තුති. ස්වාභාවිකවම, ඔබට ස්වයංක්‍රීය රාමු අනුචලනය, රූප සිරස්තල හෝ පැති බොත්තම් අක්‍රිය කළ හැකිය.

විකල්ප පාලන යාන්ත්‍රණ

Bootstrap හි ඇති පන්ති භාවිතා කිරීමට අමතරව, ඔබට හැරවිය හැක. එබැවින්, එකම ක්‍රියාවන් සියල්ලම ක්‍රියාත්මක කරන බොහෝ ක්‍රම සහ විකල්ප JS හි ඇත, $.carousel() මෙවලම හරහා පමණි. ඒවා අතර පහත දැක්වේ:

දැනුම පරීක්ෂණය

හොඳයි, දැන් ඔබ ද්‍රව්‍ය ප්‍රගුණ කර ඇති ආකාරය පරීක්ෂා කිරීමට සහ ලබාගත් දැනුම තහවුරු කිරීමට කාලයයි. මෙය සිදු කිරීම සඳහා, කැරොසල් නිර්මාණය කිරීම සඳහා ඔබ විසින් ගත යුතු එක් එක් ක්රියාව මම විස්තර කරමි.

පළමුව, ඔබට අවශ්‍ය ස්ක්‍රිප්ට් සහ මෝස්තර සම්බන්ධ කළ යුතුය. මම කැමතියි, නමුත් ඔබට නිල වෙබ් අඩවියෙන් (http://getbootstrap.com/) රාමුව බාගත කර ව්‍යාපෘති නාමාවලියේ මූලයේ බාගත කළ ගොනු තැබිය හැකිය.

ඔබ මා සමඟ එකඟ නම්, ලේඛනයේ ශීර්ෂයේ අපි ලියන්නෙමු:

1 2 3

ඔබ දෙවන ක්‍රමයේ ආධාරකරුවෙකු නම්, සබැඳියේ පළමු කොටස වෙනුවට ඔබට ගොනුවට මාර්ගය ඇතුළත් කළ යුතුය.

දැන් ඉතිරිව ඇත්තේ එය ස්ලයිඩරය තුළ ක්රියාත්මක කිරීමයි. මෙය සිදු කිරීම සඳහා, ඔබ ලබාගත් දැනුම භාවිතා කර අවශ්‍ය කේත කොටස් පිළිවෙලට ලියන්න:

විස්තර කරන ලද මෙවලම සඳහා වගකිව යුතු පොදු බ්ලොක් එකක් විවෘත කිරීම;

පාලන දර්ශක දැක්වීම සඳහා අවහිර කිරීම;

ස්ලයිඩ සඳහාම අවහිර කරන්න;

පැති බොත්තම් ක්රියාත්මක කිරීම.

මෙම ලැයිස්තුවෙන් බැහැර කළ හැක්කේ දෙවන සහ අවසාන කොටස් පමණි.

දැන් ඔබ අනිවාර්යයෙන්ම වැඩසටහන් කේතය ලිවීමට සූදානම්.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

කැරොසල් ගැලරිය උදාහරණය .carousel-inner > .item > img, .carousel-inner > .item > a >
/*ප්‍රධාන කොටස නිර්මාණය කිරීම*/ /*ස්ලයිඩ පිරවීම*/

කැරොසල් ගැලරි උදාහරණය .carousel-inner > .item > img, .carousel-inner > .item > a > img (පළල: 70%; ආන්තිකය: ස්වයංක්‍රීය; )
/*ප්‍රධාන කොටස සාදන්න*/ /*පින්තූර ගණනට අනුකූලව දර්ශක 4ක් සඳහන් කරන්න*/ /*විනිවිදක පුරවන්න*/ රොමෑන්තික

ආදරය ප්රකාශ කිරීම සඳහා ටෙන්ඩර් රෝස මල් කළඹක්

උත්සව

ඕනෑම අවස්ථාවක් සඳහා දීප්තිමත් තෑග්ගක්

ගෙදර

නැවුම් මල් කූඩයක් ඕනෑම නිවසකට සුවපහසුව ගෙන එනු ඇත.

විවාහ

සියුම් වර්ණ උත්සවයේ වැදගත්කම අවධාරණය කරනු ඇත

/*පැති පාලන බොත්තම් නිර්මාණය*/ පෙර ඊළඟ

Twitter Bootstrap ලෙසද හඳුන්වන bootstrap රාමුව භාවිතයෙන් ස්ලයිඩරය ක්‍රියාත්මක කරමු. මෙය සිදු කිරීම සඳහා, අපි Bootstrap වෙබ් අඩවියට ගොස්, එහි ගොනු ඔබේ පරිගණකයට බාගත කර, මෙම ගොනු ඔබේ සංවර්ධන පරිසරයට මාරු කරමු.

මම සම්පූර්ණ ව්‍යුහය කල්තියා සූදානම් කර, ඒවායේ දර්ශක ගොනුවට ඇතුළත් කළ අතර, ඔබට පහත සබැඳියෙන් සම්පූර්ණ ලේඛනාගාරය බාගත කළ හැකිය.

එය Unzip කර ඔබගේ සංවර්ධන පරිසරයට සියලුම ගොනු මාරු කරන්න.

ලේඛනාගාරයේ ව්යුහය දෙස බලමු

අපි එහි සංරක්ෂිත ව්‍යුහය හරහා ගොස් එහි ඇති දේ බලමු.

අපි දර්ශක ගොනුව විවෘත කරන්නෙමු, ඉහළින්ම අපි Jquery පුස්තකාලය සම්බන්ධ කරමු, එය පිටුපසින් අපි JS ෆෝල්ඩරයේ පිහිටා ඇති js දිගුව සමඟ bootstrap රාමුව සම්බන්ධ කරමු, එය පිටුපස අපි CSS දිගුව සමඟ bootstrap සම්බන්ධ කරමු, සහ පහත අපි සම්බන්ධ කරමු. අපි අපේ මෝස්තර ලියන ගොනුව, මේ සියල්ල CSS ෆෝල්ඩරයේ ඇත. අකුරු ෆෝල්ඩරයේ, බූට්ස්ට්‍රැප් භාවිතා කරන අයිකන ඇත, Img හි ස්ලයිඩරය සඳහා පින්තූර සහ පසුබිම සඳහා රූපයක් ඇත.

මෙය සම්පූර්ණ අච්චුව සහ එහි සම්පූර්ණ ව්යුහය, පසුව අපි රාමුවේ විස්තරය වෙත යමු.

ප්‍රතිචාරාත්මක ස්ලයිඩරය

ස්ලයිඩර් රාමුව විස්තර කිරීම

ස්ලයිඩර් හඳුනාගැනීමේ id="dws-slider" සමඟ div block එකක් සාදා "carousel slide" පන්තිය එක් කරන්න.

ඉන්පසුව අපි ස්ලයිඩයේ සෑම අංගයක්ම වෙනම බ්ලොක් එකක ලියා ඒවායින් තුනක් සාදන්න.

(.item>img+.carousel-caption>h3.text-uppercase+p)*3

තවද පළමු විනිවිදකය දර්ශනය වීමට නම්, ඔබ පළමු මූලද්‍රව්‍ය සඳහා .active class එක එකතු කළ යුතුය. ඉන්පසුව අපි පෙළ අන්තර්ගතයෙන් කුට්ටි පුරවන්නෙමු.

ප්‍රතිචාරාත්මක ස්ලයිඩරය

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet elit lorem, ac congue mi eleifend sit amet. Sed dignissim viverra neque a tristique.

සජීවිකරණ අනුචලනය

Aenean cursus imperdiet Erat sit amet facilisis. Phasellus congue, sem in consectetur accumsan, Telus risus sollicitudin mauris, quis ornare libero magna eget ex.

පහසු ස්ථාපනය

ප්‍රෙසන්ට් ඩික්ටම්, ඔර්සි ඊගෙට් එලිෆෙන්ඩ් ඔක්ටර්, උර්නා එක්ස් ඩපිබස් ඔඩියෝ, වීටේ ප්‍රිටියම් නෙක් මැසා හෝ නෙක්. ඩොනෙක් සහ ඉන්ටර්ඩම් ඩයම්. Morbi dignissim vestibulum mi ac viverra.

දැන් අපි ස්ලයිඩරයේ පැතිවලට පාලන එකතු කරමු.

පෙර ඊළඟ

ස්වයංක්‍රීය ලැයිස්තුගත කිරීම තාවකාලිකව නතර කරමු.

$(".carousel").carousel(( interval: false ))

අපි අනුචලන දර්ශක එකතු කරමු.

අපි විලාසිතා සහ සජීවිකරණය විස්තර කරමු

අපි styles ගොනුව වෙත ගොස් පෙළ සමඟ බ්ලොක් විස්තර කරමු.

කැරොසල්-අභ්‍යන්තර h3 (පසුබිම්-වර්ණය: rgba(20, 49, 68, 0.6); පෑඩිං: 20px; ) .carousel-inner p (අකුරු ප්‍රමාණය: 18px; පසුබිම් වර්ණය: rgba(30, 29, 29, 0.6) ); පිරවුම: 20px;

ඒවාට key frames assign කරලා animation කරමු.

කැරොසල්-අභ්‍යන්තර h3 (පසුබිම්-වර්ණය: rgba(20, 49, 68, 0.6); පෑඩිං: 20px; සජීවිකරණය: anim-H3 1.3s පහසුව-පිටත; ) .carousel-inner p (අකුරු ප්‍රමාණය: 18px; පසුබිම- වර්ණය: rgba (30, 29, 29, 0.6); පෑඩිං: 20px; anim-P 1.6s ease-out; දක්වා (පාරාන්ධතාවය: 1; පරිවර්තනය: පරිවර්තනය: පරිවර්තනය (0); ) ) @keyframes anim-P ( ( පාරාන්ධතාවය: 0; පරිවර්තනය: translateX (2000px); ) සිට ( පාරාන්ධතාව: 1; පරිවර්තනය: පරිවර්තනය: පරිවර්තනය: පරිවර්තනය

පෙළ සමඟ කුට්ටි අනුවර්තනය කිරීම

මාධ්‍ය විමසුම් විලාසයන් නිවැරදිව ක්‍රියා කිරීම සඳහා, අපි viewport meta tag එක එකතු කරමු.

අපි මාධ්‍ය ගොනුව වෙත ගොස් විවිධ දිගු සඳහා පෙළ සහිත බ්ලොක් සඳහා මෝස්තර එහි විස්තර කරමු.

Carousel-inner h3 (අකුරු ප්‍රමාණය: 20px; padding: 15px; ) .carousel-inner p ( font-size: 16px; padding: 10px; ) @media all සහ (max-width: 768px) ( .carousel-caption පතුලේ: 10%; ( display: none; ) .carousel-inner p ( display: none; ) )

එවිට ඔබට ස්වයංක්‍රීය අනුචලන තත්පර 7 දක්වා සැකසිය හැකි අතර, ස්ලයිඩරය සූදානම් වේ.

$(".carousel").carousel(( interval: 7000 ))

Bootstrap 3 හි ස්ලයිඩරයක් ක්රියාත්මක කිරීමේ උදාහරණය ඔබ කැමති නම්, එය සමාජ ජාල වල ඔබේ මිතුරන් සමඟ බෙදා ගන්න.

පාඩම ඩෙනිස් ගොරෙලොව් විසින් සකස් කරන ලදී.

පාපැදි මූලද්‍රව්‍ය සඳහා විනිවිදක සංදර්ශන සංරචකය - රූප කැරොසල් හෝ පෙළ විනිවිදක.

එය ක්රියා කරන ආකාරය

Carousel යනු CSS 3D පරිවර්තන සහ JS ටිකක් භාවිතයෙන් නිර්මාණය කරන ලද අන්තර්ගත මාලාවක් ප්‍රදර්ශනය කිරීම සඳහා වන විනිවිදක දර්ශනයකි. එය පෙළ, පින්තූර හෝ සාමාන්‍ය සලකුණු සමඟ ක්‍රියා කරයි. එය "ඊළඟ/පෙර" බොත්තම් සඳහාද සහය දක්වයි.

කැදැලි කැරොසල් සඳහා සහය නොදක්වන බවත්, සාමාන්‍යයෙන් කැරොසල් "ප්‍රවේශ්‍යතා ප්‍රමිතීන්" මගින් ඉතා යෝග්‍ය නොවන බවත් කරුණාකර දැන ගන්න.

පහළම රේඛාව, ඔබ BS4 කැරොසල් භාවිතා කරන්නේ නම්, මෙයට util.js ඇතුළත් කිරීම අවශ්‍ය වේ.

උදාහරණයක්

කැරොසලය ඔබේ විනිවිදකවල අන්තර්ගතය ස්වයංක්‍රීයව ප්‍රතිප්‍රමාණ නොකරයි. එබැවින්, ඒවායේ අන්තර්ගතය අපේක්ෂිත ප්රමාණයට ප්රමාණ කිරීමට ඔබට අමතර උපයෝගිතා අවශ්ය විය හැකිය. කැරොසල් පෙර/ඊළඟ බොත්තම් සඳහා සහය දක්වන තාක්, ඒවා පැහැදිලිව එක් කිරීමට අවශ්‍ය නොවේ. ඒවා ඔබම එකතු කර වින්‍යාස කරන්න.

.ක්‍රියාකාරී පන්තිය එක් ස්ලයිඩයකට එකතු වේ, එසේ නොමැතිනම් කැරොසල් නොපෙනේ. එසේම, පාලන ක්‍රියාත්මක කිරීමට, ඔබ .carousel පන්තියේ මූලද්‍රව්‍යයට අනන්‍ය ID එකක් සැකසීමට අවශ්‍ය වේ, විශේෂයෙන් ඔබට එක් පිටුවක කැරොසල් රැසක් තිබේ නම්. පාලන සහ දර්ශක සඳහා දත්ත ඉලක්ක ගුණාංගයක් තිබිය යුතුය (හෝ href සඳහා ), එය class.carousel මූලද්‍රව්‍යයේ ID එකට ගැලපේ.

විනිවිදක පමණි

ස්ලයිඩ පමණක් සහිත කැරොසල් සඳහා උදාහරණයක් මෙන්න. කැරොසල් රූප සඳහා පෙරනිමි බ්‍රවුසර පෙළගැස්ම අභිබවා යන .d-block සහ .w-100 පන්ති පවතින බව සලකන්න.

ස්ථාන දරණ පළමු විනිවිදකය

ස්ථාන දරණ දෙවන ස්ලයිඩය

ස්ථාන දරණ තෙවන විනිවිදකය

පාලන සහිතව

පෙර/ඊළඟ බොත්තම් එකතු කරයි:

කලින් ඊළඟදර්ශක සමඟ

ඔබට පාලනයන් සමඟ කැරොසල් වෙත දර්ශක ද එක් කළ හැකිය.

කලින් ඊළඟආරම්භක ක්රියාකාරී මූලද්රව්යය අවශ්ය වේ

ඔබ එක් විනිවිදකයකට .ක්‍රියාකාරී පන්තිය එක් කළ යුතුය, එසේ නොමැතිනම් කැරොසල් දෘශ්‍යමාන නොවේ.

ශිලා ලේඛන සමඟ

ඕනෑම .carousel-item මූලද්‍රව්‍යයකට .carousel-ශීර්ෂ මූලාංගයක් එක් කිරීමෙන් ඔබේ විනිවිදකවලට සිරස්තල එක් කරන්න. සංදර්ශක උපයෝගිතා භාවිතයෙන් කුඩා උපාංගවල සිරස්තල සැඟවීමට පහසුය. ඒවා මුලින් .d-none පන්තිය භාවිතයෙන් සඟවා ඇති අතර .d-md-block පන්තිය භාවිතයෙන් මධ්‍යම උපාංගවල නැවත පෙන්වනු ලැබේ.

ස්ථාන දරණ පළමු විනිවිදකය

පළමු විනිවිදක ලේබලය

Nulla vitae elit libero, a pharetra augu mollis interdum.

ස්ථාන දරණ දෙවන ස්ලයිඩය

දෙවන විනිවිදක ලේබලය

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ස්ථාන දරණ තෙවන විනිවිදකය

තුන්වන විනිවිදක ලේබලය

ප්‍රෙසන්ට් කොමෝඩෝ කර්සස් මැග්නා, හෝ ස්ක්ලෙරිස්ක් නිසල් කොන්සෙක්ටූර්.

පළමු විනිවිදක ලේබලය

Nulla vitae elit libero, a pharetra augu mollis interdum.

දෙවන විනිවිදක ලේබලය

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

තුන්වන විනිවිදක ලේබලය

ප්‍රෙසන්ට් කොමෝඩෝ කර්සස් මැග්නා, හෝ ස්ක්ලෙරිස්ක් නිසල් කොන්සෙක්ටූර්.

කලින් ඊළඟඇලවීම

ඔබේ විනිවිදක සජීවීකරණය කිරීමට සහ ඊළඟ විනිවිදකයට මැකී යාමට ඔබේ කැරූසලයට .carousel-fade එක් කරන්න.

කලින් ඊළඟඅභිරුචි පරතරය.කැරූසල්-අයිතමය

ඊළඟ මූලද්‍රව්‍යයට ස්වයංක්‍රීයව ලූප් වීම අතර ප්‍රමාද කාලය වෙනස් කිරීමට .carousel-item වෙත data-interval="" එක් කරන්න.

කලින් ඊළඟගුණාංග හරහා භාවිතය

දත්ත විනිවිදක ගුණාංගය එහි වත්මන් ස්ථානයට සාපේක්ෂව ස්ලයිඩයේ පිහිටීම වෙනස් කරන පෙර හෝ ඊළඟ අගයන් ගනී. නැතහොත් සුචියක් සහිත විනිවිදකයකට යාමට දත්ත-ස්ලයිඩ්-ටු භාවිතා කරන්න, උදාහරණයක් ලෙස 2: දත්ත-ස්ලයිඩ්-ටු="2" , විනිවිදක දර්ශක 0 න් ආරම්භ වේ.

කැරූසල් සජීවිකරණයක් නිර්මාණය කිරීමට data-ride="carousel" ගුණාංගය භාවිතා කරයි. එය JavaScript හරහා පැහැදිලි කැරොසල් ආරම්භ කිරීම සමඟ ඒකාබද්ධ කළ නොහැක.

JavaScript හරහා

කැරොසල් හස්තීයව අමතන්න:

$(".කැරූසල්"). කැරොසල් () පරාමිතීන්

පරාමිතීන් attributes හෝ JavaScript හරහා සම්මත කළ හැක. උපලක්ෂණ භාවිතා කිරීමට, පරාමිතියෙහි නම data- වෙත එක් කරන්න, උදාහරණයක් ලෙස: data-interval="" .

නම වර්ගය පෙරනිමිය විස්තර

පරතරය	අංකය	5000	ස්වයංක්‍රීය විනිවිදක වෙනස්කම් අතර ප්‍රමාද කාලය. අසත්‍ය නම්, කැරොසල් ස්වයංක්‍රීයව ස්ලයිඩ වෙනස් නොකරයි.
යතුරු පුවරුව	බූලියන්	සැබෑ	යතුරුපුවරු සිදුවීම් වලට කැරොසල් ප්‍රතිචාර දක්වයිද?
විරාමයක්	තන්තුව \| බූලියන්	"හවර්"	"හෝවර්" සකසා ඇත්නම්, ස්ලයිඩ වෙනස් කිරීම mouseenter මගින් මන්දගාමී වන අතර, වෙනස් කිරීම mouseleave මගින් ආරම්භ වේ. අසත්‍ය නම්, කැරොසල් මත සැරිසැරීමෙන් ස්ලයිඩ වෙනස් වීම වළක්වන්නේ නැත. ස්පර්ශය මඟින් සක්‍රිය කරන ලද උපාංග: “හෝවර්” - ස්පර්ශයකදී විරාමයක් තබන්න (පරිශීලකයා කැරොසල් සමඟ අන්තර්ක්‍රියා කර අවසන් වූ විට) කාල පරතරයන් දෙකක් සඳහා, පසුව ස්ලයිඩ නැවත වෙනස් කරන්න. මෙම හැසිරීම ඉහත විස්තර කර ඇති මූසික හැසිරීමට අමතරව බව සලකන්න.
පදින්න	රේඛාව	බොරු	පරිශීලකයා විසින් ස්ලයිඩයක පළමු අතින් වෙනස් කිරීමෙන් පසු කැරොසල් ස්ලයිඩ ස්වයංක්‍රීයව වෙනස් කිරීම. කැරොසල් නම්, පූරණය වූ පසු ස්වයංක්‍රීය වෙනස් කිරීම සක්‍රීය වේ.
එතුම	බූලියන්	සැබෑ	කැරොසල් සුමටව හෝ විචක්ෂණ ලෙස වෙනස් විය යුතුද?
ස්පර්ශ කරන්න	බූලියන්	සැබෑ	කැරොසල් ස්පර්ශ උපාංගවල වම්/දකුණු අන්තර්ක්‍රියා සඳහා සහාය විය යුතුය.

ක්රම අසමමුහුර්ත ක්රම සහ සංක්රාන්ති

සියලුම API ක්‍රම අසමමුහුර්ත වන අතර සංක්‍රාන්තියක් අවුලුවයි. සංක්‍රාන්තිය ආරම්භයේදී, නමුත් සංක්‍රාන්තිය අවසන් වීමට පෙර ඒවා හැඳින්වූ ශ්‍රිතයට ඒවා ආපසු ලබා දේ. තවද, සංක්‍රාන්තිය සිදු කරන සංරචකයට ක්‍රම ඇමතුම නොසලකා හරිනු ඇත.

.කැරූසල්(විකල්ප)

නිශ්චිත පරාමිති සමඟ කැරොසල් වස්තුව ආරම්භ කර ස්ලයිඩ වෙනස් කිරීම ආරම්භ කරයි.

$(".කැරූසල්"). කැරොසල් (( පරතරය : 2000 )).කැරූසල්("චක්‍රය")

කැරොසල් ස්ලයිඩ වමේ සිට දකුණට වෙනස් කරයි.

.කැරූසල්("විරාමය")

ස්ලයිඩය වෙනස් වීම නවත්වයි.

.කැරූසල්(අංකය)

ස්ක්‍රෝල්ස් ස්ලයිඩ නිශ්චිත ලක්ෂ්‍යයකට (0-පාදක, පේළිවලට සමාන)

.කැරූසල්("පෙර")

පෙර ස්ලයිඩය වෙත අනුචලනය කරයි. ඉලක්ක මූලද්‍රව්‍යය පෙන්වීමට පෙර (එනම්, slid.bs.carousel සිදුවීම සිදුවීමට පෙර) අගය ශ්‍රිත ඇමතුම වෙත ආපසු ලබා දෙයි.

.කැරූසල්("ඊළඟ")

ඊළඟ ස්ලයිඩය වෙත යන්න. ඉලක්ක මූලද්‍රව්‍යය පෙන්වීමට පෙර (එනම්, slid.bs.carousel සිදුවීම සිදුවීමට පෙර) අගය ශ්‍රිත ඇමතුම වෙත ආපසු ලබා දෙයි.

.කැරූසල්("ඉවත දමන්න")

මූලද්රව්යයේ කැරොසල් විනාශ කරයි.

සිද්ධීන්

Bootstrap හි Carousel හට ක්‍රියාකාරීත්වය යෙදීමට සිදුවීම් 2ක් ඇත. සිදුවීම් දෙකටම පහත අමතර ගුණාංග ඇත:

දිශාව: විනිවිදක චලනය වන දිශාව ("වම" හෝ "දකුණ").
සම්බන්ධිත ඉලක්කය: "අනුචලනය කරන ලද" ස්ලයිඩයේ ස්ථානයට ගමන් කරන DOM මූලද්‍රව්‍යය.
සිට: වත්මන් විනිවිදකයේ දර්ශකය
වෙත: ඊළඟ විනිවිදක දර්ශකය

සියලුම කැරොසල් සිදුවීම් කැරොසල් වෙත කෙලින්ම වෙඩි තබයි (එනම් දී ).

$("#myCarousel"). මත ("slide.bs.carousel" , ශ්‍රිතය () ( // දෙයක් කරන්න... )) සංක්‍රාන්ති කාලසීමාව වෙනස් කිරීම

transition.carousel-අයිතමයේ කාලසීමාව සම්පාදනය කිරීමට පෙර Sass විචල්‍යය $carousel-transition හෝ සාමාන්‍ය CSS (compiled CSS භාවිතා කරන්නේ නම්) වෙනස් කළ හැක. බහු සංක්‍රාන්ති භාවිතා කරන්නේ නම්, පරිවර්තන සංක්‍රාන්තිය පළමුව සඳහන් කර ඇති බවට වග බලා ගන්න (උදාහරණයක් ලෙස: සංක්‍රාන්තිය: පරිවර්තන 2s පහසුව, පාරාන්ධතාවය .5s පහසුව).

රූප මූලද්‍රව්‍ය හෝ පෙළ කැරොසල් විනිවිදක හරහා බයිසිකල් පැදීම සඳහා විනිවිදක සංදර්ශන සංරචකය. Page Visibility API සඳහා සහය දක්වන බ්‍රවුසරවල, වෙබ් පිටු පරිශීලකයාට නොපෙනෙන විට කැරොසල් ස්ලයිඩ මාරු වීම වළක්වයි (උදාහරණයක් ලෙස, බ්‍රවුසරය අක්‍රිය වූ විට, බ්‍රවුසර කවුළුව අවම කෙරේ, ආදිය). කැදලි කැරොසල් සඳහා සහය නොදක්වයි.

උදාහරණයක්

කලින් ඊළඟ

Internet Explorer 9 හි සජීවිකරණ සඳහා සහය නොදක්වයි

Bootstrap සජීවිකරණය සඳහා CSS3 පමණක් භාවිතා කරයි, නමුත් Internet Explorer 9 අවශ්‍ය CSS ගුණාංග සඳහා සහය නොදක්වයි. එබැවින් මෙම බ්‍රව්සරය භාවිතා කරන විට විනිවිදක සංක්‍රාන්ති සජීවීකරණයක් නොමැත. සංක්‍රාන්ති සඳහා jQuery මත පදනම් වූ උදාසීනකරණය ඇතුළත් නොකිරීමට අපි හිතාමතාම තෝරා ගත්තෙමු.

මූලික ක්රියාකාරී මූලද්රව්යය අවශ්ය වේ

.ක්‍රියාකාරී පන්තිය ස්ලයිඩ වලින් එකකට එකතු කළ යුතුය. එසේ නොමැති නම්, කැරොසල් නොපෙනේ.

අතිරේක මාතෘකා

ඕනෑම .carousel-item එකක .carousel-caption මූලද්‍රව්‍ය සමඟින් ඔබේ විනිවිදකවලට මාතෘකා පහසුවෙන් එක් කරන්න. අමතර HTML කේතයක් එහි තබන්න, එය ස්වයංක්‍රීයව පෙළගස්වා හැඩතල ගන්වනු ඇත.

පළමු විනිවිදක ලේබලය

Nulla vitae elit libero, a pharetra augu mollis interdum.

දෙවන විනිවිදක ලේබලය

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

තුන්වන විනිවිදක ලේබලය

ප්‍රෙසන්ට් කොමෝඩෝ කර්සස් මැග්නා, හෝ ස්ක්ලෙරිස්ක් නිසල් කොන්සෙක්ටූර්.

... ප්‍රවේශ වීමේ ප්‍රශ්නයක්

කැරොසල් සංරචකය කිසිසේත් ප්‍රවේශ්‍යතා ප්‍රමිතීන් සපුරාලන්නේ නැත. ඔබට ගැළපුම අවශ්‍ය නම්, කරුණාකර ඔබේ අන්තර්ගතය ඉදිරිපත් කිරීම සඳහා වෙනත් විකල්ප සලකා බලන්න.

බහු කැරොසල් භාවිතා කිරීම

කැරොසල් නිසියාකාරව ක්‍රියා කිරීම සඳහා කැරොසල් පාලනය කිරීම සඳහා පිටත බහාලුම්වල (.කැරූසල් තුළ) හැඳුනුම්පතක් භාවිතා කිරීම අවශ්‍ය වේ. බහු කැරොසල් එකතු කරන විට, හෝ කැරොසල් හැඳුනුම්පත වෙනස් කරන විට, අනුරූප පාලන යාවත්කාලීන කිරීමට වග බලා ගන්න.

මෙම ගුණාංග භාවිතා කිරීම

කැරූසලයේ පිහිටීම පහසුවෙන් පාලනය කිරීමට දත්ත ගුණාංග භාවිතා කිරීම. දත්ත ස්ලයිඩය පෙර හෝ ඊළඟ මගින් ඉල්ලා සිටිය හැක, එමඟින් ස්ලයිඩරයේ පිහිටීම එහි වත්මන් ස්ථානයට සාපේක්ෂව වෙනස් වේ. විකල්පයක් ලෙස, 0 සිට ආරම්භ වන දර්ශක නිර්වචනය කරන ස්ලයිඩයේ පිහිටීම මාරු කරන raw carousel slide data-slide-to="2" වෙත දර්ශකය භාර දීමට data-slide-to භාවිතා කරන්න.

පිටුව පූරණය වන විට ආරම්භ වන සජීවිකරණයක් ලෙස කැරූසලය නම් කිරීමට data-ride="carousel" ගුණාංගය භාවිතා කරයි. එය එකම කැරූසලයේ (අධික ලෙස) පැහැදිලි ජාවාස්ක්‍රිප්ට් ආරම්භ කිරීම සමඟ ඒකාබද්ධව භාවිතා කළ නොහැක.

JavaScript හරහා

කැරූසල් හස්තීයව අමතන්න:

$(".කැරූසල්"). කැරොසල් () විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා පරාමිති සම්මත කළ හැක. දත්ත උපලක්ෂණ සඳහා, පරාමිති නාමය ඇතුලත් කරන්න data- , උදාහරණයක් ලෙස data-interval="" .

.කැරූසල්(විකල්ප) ක්‍රම

වස්තු විකල්ප සමඟ කැරොසල් ආරම්භ කරන අතර අයිතම හරහා පුනරාවර්තනය වීමට පටන් ගනී.

$(".කැරූසල්"). කැරොසල් (( පරතරය : 2000 )).කැරූසල්("චක්‍රය")

වමේ සිට දකුණට කැරොසල් මූලද්‍රව්‍ය හරහා චක්‍රීය කරයි.

.කැරූසල්("විරාමය")

අයිතම හරහා බයිසිකල් පැදීමෙන් කැරොසල් නවත්වයි.

.කැරූසල්(අංකය)

නිශ්චිත රාමුවක් සඳහා කැරොසල් ලූප (0-පාදක, අරාවකට සමාන).