დეზინსექცია
სლაიდერის შექმნა Bootstrap-ის გამოყენებით. როგორ შევქმნათ საკუთარი ჩატვირთვის სლაიდერი რამდენიმე მარტივ ნაბიჯში საპასუხო კარუსელი bootstrap 3-ისთვის

სლაიდერის შექმნა Bootstrap-ის გამოყენებით. როგორ შევქმნათ საკუთარი ჩატვირთვის სლაიდერი რამდენიმე მარტივ ნაბიჯში საპასუხო კარუსელი bootstrap 3-ისთვის

Twitter Bootstrap 3 არის ერთ-ერთი საუკეთესო CSS ჩარჩო კონტენტის მართვის სისტემების შემუშავებისა და შესანარჩუნებლად. Bootstrap-ით თქვენ შეგიძლიათ მარტივად შექმნათ ბლოგები ან პორტფოლიო Twitter Bootstrap ქსელის სისტემის გამოყენებით (ბადის განლაგება). მრავალი CMS სისტემის გულში, ჩვენ ჩვეულებრივ გვაქვს ძირითადი კომპონენტი სახელწოდებით "Slider" (კარუსელი), ძირითადად ეს არის სურათების ავტომატური თანმიმდევრული ჩვენება, მაგრამ მას ასევე შეუძლია აჩვენოს უახლესი დასრულებული პროექტები, თქვენი მომხმარებლების ჩვენებები, სპეციალური აღწერილობები. შეთავაზებები, სიახლეების ბმულები ან ბოლო სტატიები ბლოგიდან. ამ სტატიაში ჩვენ განვიხილავთ, თუ როგორ შევქმნათ სლაიდერი კარუსელის კომპონენტის გამოყენებით Twitter Bootstrap 3-ში.

Bootstrap 3 Carousel Twitter კომპონენტის შესავალი

კარუსელის კომპონენტის მარკირება ასე გამოიყურება:

>
>

...
>
>
...
>

>
>

>
>
>

ზემოთ მოყვანილი კოდიდან ვხედავთ, რომ Bootstrap 3 სლაიდერი დაყოფილია რამდენიმე ნაწილად:

პოინტერები
სლაიდერის შინაარსი
კონტროლი

ელემენტის გარდაქმნა დივსლაიდერში ვამატებთ კლასის სახელებს: კარუსელიდა სლაიდი. Კლასი კარუსელიქმნის "კარუსელის" ეფექტს, ანუ ცვლის სლაიდებს წრეში. Კლასი სლაიდიამატებს მოცურების ანიმაციას მარჯვენა ან მარცხენა მხრიდან. მაჩვენებლები არის პატარა წრეები სლაიდერის ბოლოში, ისინი მიუთითებენ სლაიდის ამჟამინდელ პოზიციას და სლაიდების რაოდენობას. პოინტერები იქმნება შეკვეთილი სიის გამოყენებით.

>
>

შეკვეთილ სიას აქვს კლასი კარუსელის ინდიკატორები, რომელიც გარდაქმნის ბავშვის ელემენტებს პატარა წრეებად. თითოეული ელემენტი ლიუნდა ჰქონდეს ატრიბუტი მონაცემთა სამიზნემშობელი კონტეინერის ID-ით. მას ასევე უნდა ჰქონდეს ატრიბუტი მონაცემთა სლაიდიუნიკალური რიცხვითი მნიშვნელობით, კონკრეტულ სლაიდზე მითითებისთვის, მნიშვნელობები უნდა იწყებოდეს "0"-ით.

...
>
>
...
>

თითოეული ელემენტი კლასით ნივთიაქვს ორი ქვეგანყოფილება: გამოსახულებადა კარუსელი-წარწერა. სურათი გამოიყენება როგორც სლაიდის ფონი. ელემენტი კლასით კარუსელი-წარწერაგანლაგებულია სურათის ზემოთ და გამოიყენება სლაიდის სათაურად. შიგნით კარუსელი-წარწერა, შეგვიძლია დავამატოთ

ან ტეგები, ან თუნდაც ორივე.

კონტროლი ხორციელდება მარცხენა და მარჯვენა ისრებით, ისინი გამოიყენება სლაიდების ხელით შესაცვლელად.

"glyphicon glyphicon-chevron-left"> >
>

"glyphicon glyphicon-chevron-right"> >
>
>

უნდა იყოს ორი ელემენტი: ერთი თითოეული მიმართულებით. პირველ ელემენტს ექნება სპანიელემენტი კლასებით glyphicon glyphicon-შევრონი-მარცხნივ, რომელიც არის მარცხენა ისრის ხატულა და მეორე ელემენტს ექნება კლასები გლიფიკონი გლიფიკონ-შევრონი-მარჯვნივ, ეს არის მარჯვენა ისარი. Bootstrap-ში ჩვენ შეგვიძლია გამოვიყენოთ შრიფტები სურათების ნაცვლად ხატების საჩვენებლად.

Სულ ეს არის! თქვენ წარმატებით შექმენით სლაიდერი თქვენი ვებსაიტისთვის. ასევე, თქვენ არ დაგიწერიათ JavaScript კოდის ერთი ხაზი, მაგრამ bootstrap.js-მა ყველაფერი გააკეთა თქვენთვის.

კარუსელის პარამეტრები

სლაიდერის შემდგომი მორგებისთვის, შეგიძლიათ დაამატოთ რამდენიმე ატრიბუტი მონაცემები-*კარუსელის მშობელი კონტეინერისთვის.

"მონაცემთა ინტერვალი" გამოიყენება სლაიდების გადართვას შორის დროის ინტერვალის დასადგენად. მას სჭირდება რიცხვითი მნიშვნელობა და რიცხვი უნდა იყოს მილიწამებში.
"მონაცემთა პაუზა"გამოიყენება იმის დასადგენად, თუ როდის ჩაირთვება პაუზის ღონისძიება. მაგალითად, როდის უდრის " ჰოვერი", სლაიდის გადართვა ჩერდება, როდესაც მაუსი სლაიდერზეა.
"მონაცემთა შეფუთვა" არის ლოგიკური ატრიბუტი და გაძლევთ საშუალებას დააყენოთ განაახლოთ თუ არა სლაიდების გადართვა, თუ სლაიდების სიის ბოლოს მიიღწევა.

პერსონალიზაცია jQuery-ით

თუ გსურთ გამოიყენოთ jQuery და data-* ატრიბუტები, Bootstrap იძლევა JavaScript-ით ინიციალიზაციას. ამისათვის შეგიძლიათ დაწეროთ შემდეგი კოდი:

$(".კარუსელი" ) .კარუსელი() ;

კარუსელის პარამეტრების დაყენება შესაძლებელია ოფციების გამოყენებით. Მაგალითად:

$("კარუსელი")
ინტერვალი: 2000
პაუზა: "ჰოვერ" ,
შეფუთვა: მართალია
} ) ;

თქვენ ასევე შეგიძლიათ ხელით ჩართოთ სლაიდერის მოვლენები შემდეგი კოდის გამოყენებით:

.კარუსელი ("პაუზა") // პაუზა
.კარუსელი("ციკლი") // სლაიდების ჩართვა
.კარუსელი(3) // მეოთხე სლაიდის ჩვენება
.carousel("prev") // წინა სლაიდის ჩვენება
.კარუსელი("შემდეგი") // შემდეგი სლაიდის ჩვენება

ზემოაღნიშნული მეთოდების გამოძახება შესაძლებელია JavaScript-ის ნებისმიერი კოდიდან სლაიდერის ნორმალური მუშაობის გასაკონტროლებლად. წინა და შემდეგი მეთოდები ძალიან სასარგებლოა, თუ მსურს სტანდარტული ისრების ნაცვლად საკუთარი ღილაკების ჩვენება. განსაკუთრებით მაშინ, როდესაც ისინი კარუსელის განლაგების გარეთ არიან.

დასკვნა

ეს სტატია გამოსადეგი უნდა იყოს მათთვის, ვისაც სურს ისწავლოს როგორ შექმნას სლაიდერი JavaScript კოდის ათასობით ხაზის დაწერის გარეშე. ეჭვგარეშეა, ეს გაზრდის განვითარების სიჩქარეს. რაც მთავარია, ეს გამოსავალი არის ჯვარედინი ბრაუზერი, ასე რომ თქვენ არ გჭირდებათ თმის შეჭრა, რათა ის იმუშაოს ძველ ბრაუზერებში.

თუ თქვენ გაქვთ რაიმე შეკითხვები, გთხოვთ, გამოიყენოთ ჩვენი

სლაიდ შოუს კომპონენტი ველოსიპედის ელემენტებისთვის - გამოსახულების კარუსელი ან ტექსტური სლაიდები.

Როგორ მუშაობს

კარუსელი არის სლაიდშოუ შინაარსის სერიის ჩვენებისთვის, რომელიც დაფუძნებულია CSS 3D ტრანსფორმაციაზე და ზოგიერთ JS-ზე. ის მუშაობს ტექსტით, სურათებით ან რეგულარული მარკირებით. მას ასევე აქვს შემდეგი/წინა ღილაკების მხარდაჭერა.

მაგალითი

კარუსელი ავტომატურად არ ახდენს სლაიდის შინაარსის ზომის ნორმალიზებას. ამიტომ, შეიძლება დაგჭირდეთ დამატებითი კომუნალური პროგრამები, რათა მათი შინაარსი სწორი ზომის იყოს. სანამ კარუსელები მხარს უჭერენ წინა/შემდეგი ღილაკებს, მათ არ სჭირდებათ ცალსახად დამატება. დაამატეთ და შეცვალეთ ისინი თავად.

მიეცით უნიკალური ID .კარუსელის კლასს მოქნილობისთვის, განსაკუთრებით თუ იყენებთ ბევრ კარუსელს გვერდზე.

მხოლოდ სლაიდები

აქ არის კარუსელის მაგალითი მხოლოდ სლაიდებით. ყურადღება მიაქციეთ .d-block და .img-fluid კლასების არსებობას კარუსელის სურათებში - მათი მიზანია ბრაუზერის მიერ გამოსახულების გასწორების ნაგულისხმევი აცილება.

კონტროლით

ამატებს წინა/შემდეგი ღილაკებს:

ინდიკატორებით

თქვენ ასევე შეგიძლიათ დაამატოთ ინდიკატორები კარუსელში სამართავთან ერთად.

მოითხოვს თავდაპირველ აქტიურ ელემენტს

.active კლასი უნდა დაემატოს ერთ-ერთ სლაიდს, წინააღმდეგ შემთხვევაში კარუსელი არ გამოჩნდება.

წარწერებით

დაამატეთ სუბტიტრები თქვენს სლაიდებს .carousel-caption კლასის ელემენტის დამატებით .carousel-item კლასის ნებისმიერ კარუსელის ელემენტს. ეტიკეტების დამალვა მარტივია პატარა მოწყობილობებზე ეკრანის უტილიტების გამოყენებით. ისინი თავდაპირველად დამალულია .d-none კლასში და კვლავ აჩვენებს მათ საშუალო მოწყობილობებზე .d-md-block კლასით.

პირველი სლაიდის ეტიკეტი

Nulla vitae elit libero, pharetra augue mollis interdum.

მეორე სლაიდის ეტიკეტი

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

მესამე სლაიდის ეტიკეტი

ეს არის commodo cursus magna, vel scelerisque nisl consectetur.

"კარუსელი-წარწერა d-none d-md-block">

...

გამოყენება

ატრიბუტების მეშვეობით

მონაცემთა სლაიდის ატრიბუტი იღებს წინა ან მომდევნო მნიშვნელობებს, რომლებიც ცვლის სლაიდის პოზიციას მის ამჟამინდელ პოზიციასთან შედარებით. ან გამოიყენეთ data-slide-to ინდექსში სლაიდზე გადასასვლელად, როგორიცაა 2: data-slide-to="2", სლაიდების ინდექსები იწყება 0-დან.

კარუსელის ანიმაციის შესაქმნელად გამოიყენება data-ride="carousel" ატრიბუტი. ის არ შეიძლება გაერთიანდეს აშკარა კარუსელის ინიციალიზაციასთან JavaScript-ით.

JavaScript-ის საშუალებით

ხელით დაურეკეთ კარუსელს:

$ ("კარუსელი"). კარუსელი ()

Პარამეტრები

პარამეტრების გადაცემა შესაძლებელია ატრიბუტების ან JavaScript-ის საშუალებით. ატრიბუტების გამოსაყენებლად, დაამატეთ პარამეტრის სახელი data--ს, მაგალითად: data-interval="" .

სახელი	ტიპი	ნაგულისხმევად	აღწერა
ინტერვალი	ნომერი	5000	დროის დაყოვნება სლაიდების ავტომატურ ცვლილებებს შორის. თუ false, კარუსელი ავტომატურად არ შეცვლის სლაიდებს.
კლავიატურა	ლოგიკური	მართალია	რეაგირებს თუ არა კარუსელი კლავიატურის მოვლენებზე.
პაუზა	სიმებიანი \| ლოგიკური	ჰოვერი	თუ დაყენებულია "ჰოვერი", სლაიდის ცვლილება შენელდება მაუსის ღილაკით, ხოლო ცვლილება იწყება მაუსის აკრეფით. თუ არასწორია, კარუსელზე გადახვევა ხელს არ შეუშლის სლაიდების შეცვლას. შეხებით გააქტიურებული მოწყობილობები: "ჰოვერ" - შეჩერება შეხებაზე (როდესაც მომხმარებელი დაასრულებს კარუსელთან ურთიერთობას) ორი ინტერვალით, შემდეგ ისევ შეცვალეთ სლაიდები. გაითვალისწინეთ, რომ ეს ქცევა ემატება ზემოთ აღწერილი მაუსის ქცევას.
გასეირნება	ხაზი	ყალბი	კარუსელის სლაიდების ავტომატური შეცვლა მომხმარებლის მიერ პირველი ხელით სლაიდის შეცვლის შემდეგ. თუ კარუსელი - ჩართულია ავტომატური შეცვლა ჩატვირთვის შემდეგ.
შეფუთვა	ლოგიკური	მართალია	უნდა შეიცვალოს თუ არა კარუსელი შეუფერხებლად თუ დისკრეტულად.

მეთოდები

ასინქრონული მეთოდები და გადასვლები

ყველა API მეთოდი ასინქრონულიდა გაშვება გარდამავალი. ისინი უბრუნდებიან ფუნქციას, რომელიც გამოიძახა მათ გადასვლის დაწყებისას, მაგრამ დასასრულში. გარდა ამისა, მეთოდის გამოძახება კომპონენტზე, გადასვლის შესრულება იგნორირებული იქნება.

.კარუსელი(ოფციები)

ახდენს კარუსელის ობიექტის ინიცირებას მითითებული ოფციებით და იწყებს სლაიდზე გადასვლას.

$ ("კარუსელი"). კარუსელი (( ინტერვალი : 2000 ))

.კარუსელი ("ციკლი")

ცვლის კარუსელის სლაიდებს მარცხნიდან მარჯვნივ.

.კარუსელი ("პაუზა")

აჩერებს სლაიდზე გადასვლას.

.კარუსელი(ნომერი)

Scrolls სრიალებს გარკვეულ წერტილამდე (0-ზე დაფუძნებული, რიგების მსგავსი).

.კარუსელი ("წინ")

გადადის წინა სლაიდზე. აბრუნებს ფუნქციის გამოძახების მნიშვნელობას „სამიზნე“ ელემენტის ჩვენებამდე(ანუ სრიალის.ბს.კარუსელის მოვლენის გათიშვამდე).

.კარუსელი ("შემდეგი")

შემდეგ სლაიდამდე. აბრუნებს ფუნქციის გამოძახების მნიშვნელობას „სამიზნე“ ელემენტის ჩვენებამდე(ანუ სრიალის.ბს.კარუსელის მოვლენის გათიშვამდე).

.კარუსელი ("განკარგე")

ანადგურებს ნივთის კარუსელს.

განვითარებული მოვლენები

კარუსელს Bootstrap-ში აქვს 2 მოვლენა ფუნქციონირების გამოსაყენებლად. ორივე მოვლენას აქვს შემდეგი დამატებითი თვისებები:

მიმართულება: მიმართულება, რომლითაც მოძრაობენ სლაიდები ("მარცხნივ" ან "მარჯვნივ").
relatedTarget: DOM ელემენტი, რომელიც გადადის "გაბრტყელებული" სლაიდის პოზიციაზე.
from: მიმდინარე სლაიდის ინდექსი
to: შემდეგი სლაიდის ინდექსი

კარუსელის ყველა ღონისძიება ისროლება პირდაპირ კარუსელზე (ე.ი

$("#ჩემი კარუსელი"). on ("slide.bs.carousel" , ფუნქცია () ( // რაღაცის გაკეთება... ))

კარგი დღე ყველას, ვისაც სურს ისწავლოს რაიმე ახალი Bootstrap ჩარჩოს ელემენტებიდან. დღევანდელი თემაა Bootstrap Carousel სლაიდერი. ეს არის პოპულარული ელემენტი, რომელიც წარმოდგენილია თითქმის ყველა ვებსაიტზე.

ამიტომ, მე გეტყვით, თუ როგორ უნდა შექმნათ კარუსელის სლაიდერი, რა ჩაშენებული ინსტრუმენტებია საჭირო ამისათვის, როგორ შეგიძლიათ პარამეტრების კონფიგურაცია და სტატიის ბოლოს გაჩვენებთ კონკრეტული მაგალითის განხორციელებას. ახლა კი საქმეს შეუდექით!

ყველაფერი Bootstrap Carousel Plugin Tools-ის შესახებ

კარუსელის ფოტო გალერეა გამოიყენება ახალი შეთავაზებების, პროდუქტების, მიმდინარე აქციების სიის, მოსახერხებელი პორტფელის სანახავად და ა.შ. ამიტომ, დღეს მნიშვნელოვანია, რომ შეძლოთ ამ დანამატთან მუშაობა ოფიციალური სახელი Bootstrap Carousel Plugin.

დაუყოვნებლივ უნდა აღინიშნოს, რომ აღწერილი ელემენტი არ არის სათანადოდ მხარდაჭერილი Internet Explorer 9-ში და უფრო ადრეულ ვერსიებში. თუმცა, ის მშვენივრად მუშაობს ( WordPress, Joomla! და სხვა ძრავებისთვის, ჩარჩოს დაკავშირება საკმაოდ მარტივია).

იმისათვის, რომ მარტივად იმუშაოთ ყველა პარამეტრთან და სწრაფად მოარგოთ სლაიდერი, თქვენ უნდა ისწავლოთ Bootstrap 3-ის ძირითადი ჩაშენებული კლასები.

Კლასი	დანიშნულება
კარუსელი	თავად ქმნის კარუსელის სლაიდერს.
სლაიდი	ამატებს css-ით ანიმაციისა და გადასვლების ეფექტს სლაიდებს შორის გადართვისას. გაკვეთილი არჩევითია.
კარუსელის ინდიკატორები	ამატებს, ასე ვთქვათ, პანელს პატარა წერტილების სახით თითოეული სურათის ბოლოში, რომლითაც შეგიძლიათ სწრაფად გადახვიდეთ ნებისმიერ სურათზე. გაკვეთილი არჩევითია.
კარუსელი-შიდა	თავად ამატებს სლაიდებს გალერეაში.
კარუსელი-წარწერა	პასუხისმგებელია გრაფიკული ფაილების ხელმოწერაზე. სურვილისამებრ შეიძლება ჩაერთოს.
ნივთი	განსაზღვრავს შინაარსის კომპლექტს თითოეული სლაიდისთვის.
მარჯვენა/მარცხნივ კარუსელის კონტროლი	ამატებს მარჯვენა და მარცხენა ღილაკებს სახელის მიხედვით ჩარჩოებს შორის გადასართავად.

გარდა ამისა, ღირს იცოდეთ ასეთი გალერეების განლაგების სხვა მახასიათებლები.

დამწყებთათვის, თავად კარუსელის ბლოკის შექმნა მოითხოვს დეკლარაციას id = "ჩემი კარუსელი"ამ უკანასკნელის სწორი ფუნქციონირებისთვის.

იმავე დივში, თქვენ უნდა დაარეგისტრიროთ ატრიბუტი data-ride = "კარუსელი", რომელიც განსაზღვრავს, რომ ანიმაცია უნდა ჩაიტვირთოს გვერდის ჩატვირთვისთანავე.

ახლა მოდით გადავიდეთ ინდიკატორებზე. თითოეულ li ტეგს უნდა ჰქონდეს რამდენიმე ატრიბუტი: მონაცემთა სამიზნე, რომელიც მიუთითებს კონკრეტული კარუსელის ID-ზე და მონაცემთა სლაიდი, რომელიც განსაზღვრავს ჩარჩოს რომელ ნომერზე უნდა გადახვიდეთ.

რაც შეეხება ღილაკებს, რომლებიც ცვლიან სურათებს წინ ან უკან, მათი განსახორციელებლად, ღირს ატრიბუტის რეგისტრაცია მონაცემთა სლაიდისაკვანძო სიტყვით ან "წინ" ან "შემდეგი".

ახლა თქვენ იცით ჩარჩოს ძირითადი ელემენტების შესახებ, რომელთა წყალობით შეგიძლიათ სლაიდერის ჩვენება გარკვეული გზით შეცვალოთ. ბუნებრივია, შეგიძლიათ გამორთოთ ჩარჩოს ავტომატური გადახვევა, სურათის წარწერები ან გვერდითი ღილაკები.

კონტროლის ალტერნატიული მექანიზმები

Bootstrap-ის ჩაშენებული კლასების გამოყენების გარდა, თქვენ ასევე შეგიძლიათ იხილოთ . ასე რომ, JS-ში ბევრი მეთოდი და ვარიანტია, რომლებიც ახორციელებენ ყველა ერთსა და იმავე მოქმედებას, მხოლოდ $.carousel () ინსტრუმენტის მეშვეობით. მათ შორის შეიძლება ჩამოვთვალოთ, როგორიცაა:

ცოდნის ტესტი

ჰოდა, ახლა დროა შეამოწმოთ როგორ ისწავლეთ მასალა და მიღებული ცოდნის კონსოლიდაცია. ამისათვის მე აღვწერ თითოეულ მოქმედებას, რომელიც მოგიწევთ „კარუსელის“ შექმნის გზაზე.

პირველ რიგში, თქვენ უნდა შეიტანოთ საჭირო სკრიპტები და სტილები. მე მირჩევნია, მაგრამ თქვენ შეგიძლიათ ჩამოტვირთოთ ფრეიმიკა ოფიციალური საიტიდან ( http://getbootstrap.com/) და განათავსეთ გადმოწერილი ფაილები პროექტის დირექტორიაში.

თუ მეთანხმებით, მაშინ დოკუმენტის სათაურში ვწერთ:

1 2 3

თუ თქვენ ხართ მეორე მეთოდის მხარდამჭერი, მაშინ ბმულის პირველი ნაწილის ნაცვლად, თქვენ უნდა ჩასვათ ფაილის გზა.

ახლა რჩება სლაიდერში განხორციელება. ამისათვის გამოიყენეთ მიღებული ცოდნა და დაწერეთ კოდის საჭირო ნაწილები თანმიმდევრობით:

აღწერილ ინსტრუმენტზე პასუხისმგებელი საერთო ბლოკის გახსნა;
ბლოკი საკონტროლო ინდიკატორების დასაზუსტებლად;
ბლოკი თავად სლაიდებისთვის;
გვერდითი ღილაკების განხორციელება.

ამ სიიდან შეიძლება გამოირიცხოს მხოლოდ მეორე და ბოლო divs.

ახლა თქვენ ნამდვილად მზად ხართ კოდის დასაწერად.

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

კარუსელის გალერეის მაგალითი

/*შექმენით მთავარი ბლოკი*/

/*სლაიდების შევსება*/

კარუსელის გალერეის მაგალითი

/*შექმენით მთავარი ბლოკი*/

/*სურათების რაოდენობის მიხედვით მიუთითეთ 4 ინდიკატორი*/ /*სლაიდების შევსება*/ /*გვერდითი მართვის ღილაკების შექმნა*/

სლაიდშოუს კომპონენტი გამოსახულების ელემენტების ან კარუსელის ტექსტის სლაიდების გამეორებისთვის. ბრაუზერებში, რომლებიც მხარს უჭერენ Page Visibility API-ს, კარუსელი თავიდან აიცილებს სლაიდების გადართვას, როდესაც ვებგვერდები მომხმარებლისთვის არ ჩანს (მაგალითად, როდესაც ბრაუზერი არააქტიურია, ბრაუზერის ფანჯარა მინიმუმამდეა დაყვანილი და ა.შ.). ჩადგმული კარუსელები მხარდაჭერილი არ არის.

მაგალითი

ანიმაციები არ არის მხარდაჭერილი Internet Explorer 9-ში

Bootstrap ექსკლუზიურად იყენებს CSS3 ანიმაციისთვის, მაგრამ Internet Explorer 9 მხარს არ უჭერს საჭირო CSS თვისებებს. ამიტომ, ამ ბრაუზერის გამოყენებისას არ არსებობს სლაიდების გადასვლის ანიმაცია. ჩვენ განზრახ ავირჩიეთ არ შეგვეტანა jQuery-ზე დაფუძნებული ჩანაცვლებები გადასვლებისთვის.

საჭიროა საწყისი აქტიური ელემენტი

.active კლასი უნდა დაემატოს ერთ-ერთ სლაიდს. წინააღმდეგ შემთხვევაში, კარუსელები არ გამოჩნდება.

დამატებითი სათაურები

მარტივად დაამატეთ სუბტიტრები თქვენს სლაიდებს .carousel-caption ელემენტით ნებისმიერ .carousel-item-ში. მოათავსეთ იქ თითქმის დამატებითი HTML და ის ავტომატურად გასწორდება და დაფორმატდება.