CSS სლაიდერი ავტომატური რემიქსიდან. ადაპტური სლაიდერი JavaScript-ის გარეშე CSS3-ის გამოყენებით. Keyframes CSS სლაიდერისთვის

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

1. ბაზის განლაგება

2. შეიმუშავეთ სლაიდერი

* ( ზღვარი: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box ;) ტექსტი (ფონ-სურათი: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
ფონის გაფორმებით და მუქი სტილებით ყველაფერი უფრო ნათელი გახდა.

შეფუთვა ( სიმაღლე: 350 პიქსელი; ზღვარი: 100 პიქსელი ავტო 0; პოზიცია: ფარდობითი; სიგანე: 700 პიქს; ) .სლაიდერი (ფონის ფერი: #ddd; სიმაღლე: მემკვიდრეობით; გადადინება: დამალული; პოზიცია: შედარებითი; სიგანე: მემკვიდრეობა; -ვებ ყუთი -ჩრდილი: 0 0 20px rgba(0, 0, 0, .5);-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5); 20px rgba(0, 0, 0, . 5);box-shadow: 0 0 20px rgba(0, 0, 0, .5);
მრიცხველის ბლოკი და სლაიდერი შეიძლება დარეგულირდეს იმავე ზომებზე, რათა იდეალურად გააკონტროლონ სლაიდერის პოზიცია გვერდზე. სანამ სლაიდები დღეს მუშაობდა, სლაიდერი სწრაფად შეიღება ღია ნაცრისფერ ფერში.

Wrapper > შეყვანა (ჩვენება: არცერთი;)
მისასალმებელია რადიო ღილაკები. სუნი მოგვიანებით დაგვჭირდება.

ამჟამინდელი შედეგია:

3. შეიმუშავეთ სლაიდები

სლაიდები ( სიმაღლე: მემკვიდრეობით; პოზიცია: აბსოლუტური; სიგანე: მემკვიდრეობით; ) .slide1 (ფონი-სურათი: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9b) -image:/ur /habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); ) .slide3 ( background-image: url(http://habrastorage.org/files/6 d4f/646936 d4f/64698jpg);).slide4 ( background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab89jpg : url(http: //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf8408b8408c.
ყველა სლაიდისთვის ჩვენ დავაზუსტეთ აბსოლუტური პოზიციონირება ისე, რომ ეფექტები იყოს ნაჩვენები. სლაიდების ზომები აღებულია თავად სლაიდერის ზომიდან, რათა არ იყოს საჭირო ბევრ ადგილას დარეგისტრირება.

4. Robo ნავიგაცია სლაიდებში

Wrapper .controls ( მარცხნივ: 50%; ზღვარი მარცხნივ: -98 px; პოზიცია: აბსოლუტური; ) .wrapper label ( კურსორი: მაჩვენებელი; ეკრანი: inline-block; სიმაღლე: 8px; ზღვარი: 25px 12px 0 16px; სიგანე: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; 2px მყარი #ddd; შინაარსი: " "; ეკრანი: ბლოკი; სიმაღლე: 12px; მარცხნივ: -4px; პოზიცია: აბსოლუტური; ზევით: -4px; -რადიუსი: 50%; -o-საზღვრის-რადიუსი: 50%, საზღვარი-რადიუსი: 50%;
ჩვენი ნავიგაცია ნამდვილად კლასიკურია. კანის ღილაკი არის ზონა, რომელიც ჰგავს ფსონს, რომლის შუაში, როდესაც სლაიდი აქტიურია, ცარიელი ადგილი ხშირად ხდება ქერქი. ჯერჯერობით გვაქვს შემდეგი შედეგი:

5. ღილაკების გარდა

შეფუთვის ლეიბლი (კურსორი: მაჩვენებელი; ეკრანი: inline-block; სიმაღლე: 8px; ზღვარი: 25px 12px 0 16px; პოზიცია: ფარდობითი; სიგანე: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50 %;-o-border-radius: 50%; border-radius: 50%;-webkit-transition: background ease-in-out .5s; გარდამავალი: ფონური ease-in-out .5s; გარდამავალი: ფონური სიმარტივე-შემოსვლა -out .5s; ) .wrapper label:hover, #slide1:checked ~. მონიშნულია ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) , #slide5:checked ~ .controls label:nth-of-type(5) (ფონი: #ddd; )
ნავიგაციის ღილაკების დაპროექტებამდე ვამატებთ გლუვ ნაკადს მათ შუაში. ანალოგიურად, შეგიძლიათ გაიგოთ, რომელი ღილაკია აქტიური, რომელი ღილაკი აქტიური, კურსორი მოთავსებულია მასზე და ის შეუფერხებლად შეარჩევს. ჩვენი მთავარი რადიო ღილაკები მზად არის:

6. ჩვენ მივესალმებით სლაიდერს

სლაიდები ( სიმაღლე: მემკვიდრეობა; გაუმჭვირვალობა: 0; პოზიცია: აბსოლუტური; სიგანე: მემკვიდრეობა; z-ინდექსი: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale (1.5), ტრანსფორმაცია: მასშტაბი(1.5); -in-out .5s; -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s; ) #slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:შემოწმებული ~ .slider > .slide4, #slide .slider > .z-slide 5; ინდექსი: 1; -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);
სლაიდების მოწინავე სტილი მატებს ძალას, რის გამოც სლაიდები უხილავი ხდება და ფონზე ქრებოდა. ჩვენ ასევე დავამატეთ სლაიდების მცირე მატება, სანამ სუნი შეუმჩნეველია, რათა ის გამოჩენილიყო სლაიდერზე.

შედეგი შეგიძლიათ ნახოთ აქ.

1. მშვენიერი jQuery სლაიდშოუ

შესანიშნავი სლაიდშოუ jQuery ტექნოლოგიის გამოყენებით.

2. jQuery მოდული "Scale Carousel"

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

3. jQuery მოდული "slideJS"

სლაიდერის ჩვენება ტექსტის აღწერილობით.

4. მოდული "JSliderNews"

5. CSS3 jQuery სლაიდერი

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

6. ლამაზი jQuery „პრეზენტაციის ციკლის“ სლაიდერი

jQuery სლაიდერი გამოსახულების ხელმისაწვდომობის ინდიკატორით. სლაიდების ავტომატური შეცვლა გადატანილია.

7. jQuery მოდული „Parallax Slider“

სლაიდერი მოცულობითი ეფექტით ფონზე. ამ სლაიდერის ღერო მოთავსებულია ფონზე, რომელიც შედგება რამდენიმე ბურთისგან, რომელთაგან თითოეული ბრუნავს სხვადასხვა სითხის მიხედვით. შედეგი არის მოცულობითი ეფექტის იმიტაცია. ის ძალიან ლამაზად გამოიყურება, თქვენ თვითონ შეგიძლიათ მასში გადახვიდეთ. ეფექტი უფრო შეუფერხებლად არის ნაჩვენები ბრაუზერებში, როგორიცაა Opera, Google Chrome, IE.

8. ახალი, მსუბუქი jQuery სლაიდერი "bxSlider 3.0"

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

9. jQuery გამოსახულების სლაიდერი, მოდული "slideJS"

ელეგანტური jQuery სლაიდერი, რომელსაც ნამდვილად შეუძლია გაანათოს თქვენი პროექტი.

10. jQuery სლაიდშოუს მოდული „Easy Slides“ v1.1

მარტივი jquery მოდული სლაიდების ჩვენების შესაქმნელად.

11. “jQuery Slidy” მოდული

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

12. jQuery CSS გალერეა სლაიდების ავტომატური ცვლილებით

სანამ არ დააჭერთ „წინ“ ან „უკან“ ისრებს, გალერეა ავტომატურად გადახვევს.

13. jQuery სლაიდერი "Nivo Slider"

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

14. jQuery სლაიდერი "MobilySlider"

ახალი სლაიდერი. jQuery სლაიდერი სხვადასხვა ეფექტებით, შეცვალეთ სურათი.

15. jQuery მოდული „Slider²“

მსუბუქი სლაიდერი სლაიდების ავტომატური შეცვლით.

16. ახალი javascript სლაიდერი

ავტომატურად შეცვალეთ სლაიდერი საჩვენებლად.

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

jQuery CSS სლაიდერის სურათი NivoSlider მოდულის გამოყენებით.

19. jQuery სლაიდერი „jShowOff“

დანამატი ერთად როტაციისთვის. ნავიგაციის სამი ვარიანტი: ნავიგაციის გარეშე (სლაიდ შოუს ფორმატის ავტომატური ცვლილებით), ნავიგაცია ღილაკების ხედში, ნავიგაცია გამოსახულების მინიატურების ხედში.

20. მოდული „ჩამკეტის ეფექტის პორტფოლიო“

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

21. მსუბუქი javascript CSS სლაიდერი "TinySlider 2"

გამოსახულების სლაიდერის განხორციელება იყენებს Javascript და CSS.

22. ენის სლაიდერი „Tinycircleslider“

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

23. გამოსახულების სლაიდერი jQuery-ის გამოყენებით

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

24. გალერეა მინიატურებით "Slider Kit"

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

25. jQuery სლაიდერი "Slider Kit"-ის ნაცვლად

ვერტიკალური და ჰორიზონტალური შინაარსის სლაიდერი jQuery-ის გამოყენებით.

26. jQuery სლაიდშოუ "Slider Kit"

სლაიდ შოუ სლაიდების ავტომატური ცვლილებით.

27. მსუბუქი პროფესიონალური javascript CSS3 სლაიდერი

სუფთა სლაიდერი jQuery-სა და CSS3-ზე დაფუძნებული, შექმნილი 2011 წელს.

jQuery სლაიდშოუ ესკიზებით.

29. გაამარტივეთ jQuery სლაიდების ჩვენება

სლაიდშოუ ნავიგაციის ღილაკებით.

30. Neumovirn slideshow jQuery "Skitter"

jQuery მოდული "Skitter" ლამაზი სლაიდშოუს შესაქმნელად. მოდული მხარს უჭერს 22 (!) ტიპის სხვადასხვა ანიმაციურ ეფექტს სურათების შეცვლისას. სლაიდებში ნავიგაციისთვის შეგიძლიათ გამოიყენოთ ორი ვარიანტი: დამატებითი სლაიდების ნომრების გამოყენება და დამატებითი ესკიზების გამოყენება. დემონსტრაციით გაოცება ადვილია, ეს ისეთი ნათელი აღმოჩენაა. გადასახედი ტექნოლოგიები: CSS, HTML, jQuery, PHP.

31. სლაიდშოუ "უხერხული"

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

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

jQuery სლაიდერის ანიმაცია. ფონის სურათები ავტომატურად მასშტაბირდება ბრაუზერის ფანჯრის ზომის შეცვლისას. კანის სურათებისთვის ნაჩვენებია ბლოკი აღწერილობით.

34. "Flux Slider" სლაიდერი jQuery-ისა და CSS3-ის გამოყენებით

ახალი jQuery სლაიდერი. არაერთი მაგარი ანიმაციური ეფექტი სლაიდების შეცვლისას.

35. jQuery მოდული „jSwitch“

ანიმაციური jQuery გალერეა.

უფრო მარტივი სლაიდშოუ jQuery-ზე სლაიდების ავტომატური ცვლილებით.

37. მოდულის ახალი ვერსია "SlideDeck 1.2.2"

პროფესიონალური შინაარსის სლაიდერი. არსებობს სლაიდის ავტომატურად შეცვლის ვარიანტები, ასევე მაუსის ბორბლის გამოყენების ვარიანტი სლაიდებს შორის გადაადგილებისთვის.

38. jQuery სლაიდერი „Sudo Slider“

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

39. jQuery CSS3 სლაიდშოუ

სლაიდ შოუები ესკიზებით მხარს უჭერს სლაიდების შეცვლის ავტომატურ რეჟიმს.

40. jQuery Flux Slider

აჩვენეთ სლაიდერი გამჭვირვალე ეფექტებით.

41. მარტივი jQuery სლაიდერი

ელეგანტური გამოსახულების სლაიდერი jQuery-ის გამოყენებით.

პრაქტიკა წიგნის შესახებ jqueryმე დავასრულე ის ფაქტი, რომ ბევრმა ჩემმა წინასწარ გადამხდელმა მთხოვა მეთქვა, როგორ დავწერო სლაიდერის სკრიპტი jquery-ში. ბოდიში, ძვირფასო მეგობრებო! ჩვენ 21-ე საუკუნეში ვართ და, საბედნიეროდ, გვაქვს წვდომა ყველა CSS3 აქსესუარზე, რომელიც საშუალებას გვაძლევს განვახორციელოთ ასეთი მეტყველება რიგის გარეშე. javascript.

Ნაწილი 1.

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

რა თქმა უნდა, შეიძლება გაინტერესებთ: საიდან მოდის ველოსიპედი, როდესაც სლაიდერები ჯერ კიდევ დანერგილია JavaScript-ში? ჩემი არგუმენტების ღერძი:

1. CSS ეფექტი პრაქტიკული სვიდშე. ეს კარგია მობილურ მოწყობილობებზე.
2. სლაიდერის შესაქმნელად, თქვენ არ გჭირდებათ რაიმე პროგრამირების უნარი.

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

მე ამოვშალე alt ატრიბუტი სივრცის დაზოგვის მიზნით. თქვენ შეგიძლიათ შეავსოთ იგი თქვენი SEO მოთხოვნებისთვის და მომხმარებლების ინფორმირებისთვის, რომლებმაც ჩართოთ სურათების ჩვენება ბრაუზერში. ასევე მინდა გავზარდო თქვენი პატივისცემა მათ მიმართ, ვინც სურათზე უკეთესია ( alladin.jpg) იქნება დაბინდვის ბოლოს, რაც საშუალებას მისცემს ჩვენს სლაიდეს ციკლურად გადახვევის გარეშე.

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

სლაიდერი (სიგანე: 80%; მაქსიმალური სიგანე: 1000 პიქსელი; )

ჩვენს CSS კოდში, ფიგურის სიგანე გამოიხატება სიმაღლიდან div-მდე, რომელშიც ის გაფართოებულია. თუ თქვენ შეგიძლიათ აჩვენოთ ხუთი ფოტო, მაგრამ div არის მარტო, ფიგურის სიგანე იზრდება ხუთჯერ, ასე რომ ის ხდება div კონტეინერის სიგანის 500%.

შრიფტის ზომა: 0 პარამეტრი ყოველთვის ირჩევს ფიგურას, რაც საშუალებას იძლევა მეტი სივრცე იყოს სურათის გარშემო და მათ შორის. პოზიცია: ნათესავი საშუალებას გაძლევთ მარტივად გადაიტანოთ ფიგურა ანიმაციის დროს.

ჩვენ თანაბრად უნდა გავუზიაროთ სურათები სურათის შუაში. ფორმულა ძალიან მარტივია: თუ დასაშვებია, რომ ფიგურის სიგანე იყოს 100%, გამოსახულების კანი უნდა დაიკავოს ჰორიზონტალური სივრცის 1/5:

ეს გამოწვეულია შემდეგი CSS წესების საჭიროებით:

Imagestrip img (სიგანე: 20%; სიმაღლე: ავტომატური; )

ახლა თქვენ შეგიძლიათ შეცვალოთ გადინების ძალა div-სთვის:

სლაიდერი (სიგანე: 80%; მაქსიმალური სიგანე: 1000 პიქსელი; გადინება: დამალული)

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

@keyframes slidy ( 20% ( მარცხნივ: 0%; ) 25% ( მარცხნივ: -100%; ) 45% ( მარცხნივ: -100%; ) 50% ( მარცხნივ: -200%; ) 70% ( მარცხნივ: -200 %;) 75% (მარცხნივ: -300%; ) 95% (მარცხნივ: -300%; ) 100% (მარცხნივ: -400%; ) )

სლაიდერზე გამოსახულების კანი განთავსდება დივში და გადაადგილდება 5%-ით.

სლაიდერის ფიგურა (პოზიცია: ფარდობითი; სიგანე: 500%; ანიმაცია: 30 წმ სლაიდ უსასრულო; შრიფტის ზომა: 0; შიგთავსი: 0; ზღვარი: 0; მარცხნივ: 0; )

Მე -2 ნაწილი.

მი ზრობილი მეგა-მაგარი სლაიდერი Javascript-ის გარეშე. ჯერ დავისვენოთ ჩვენს დაფნაზე, გადავიდეთ შემდეგ ღილაკზე. უფრო სწორედ, ახალი კი არა (ძალიან მეზარება ამის გადალახვა), არამედ ახალი.

ასე რომ, ჩვენი HTML კოდი:

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

/* სლაიდერისთვის ორი სლაიდით */ @keyframes slider__item-autoplay_count_2 ( 0%(გაუმჭვირვალობა:0;) 20%(გაუმჭვირვალობა:1;) 50%(გაუმჭვირვალობა:1;) 70%(გაუმჭვირვალობა:0;) 100% ( გამჭვირვალობა:0;) ) /* სლაიდერისთვის სამი სლაიდით */ @keyframes slider__item-autoplay_count_3 ( 0%(გაუმჭვირვალობა:0;) 10%(გაუმჭვირვალობა:1;) 33% (გაუმჭვირვალობა:1;) 43% ( გაუმჭვირვალობა: 0;) 100%(გაუმჭვირვალობა:0;) ) /* სლაიდერისთვის ოთხი სლაიდით */ @keyframes slider__item-autoplay_count_4 ( 0%(გაუმჭვირვალობა:0;) 8% (გაუმჭვირვალობა:1;) 25% (გაუმჭვირვალობა :1; ) 33% (გაუმჭვირვალობა:0;) 100%(გაუმჭვირვალობა:0;) ) /* სლაიდერისთვის ხუთი სლაიდით */ @keyframes slider__item-autoplay_count_5 ( 0%(გაუმჭვირვალობა:0;) 7% (გაუმჭვირვალობა: 1; ) 20% (გაუმჭვირვალობა:1;) 27% (გაუმჭვირვალობა:0;) 100% (გაუმჭვირვალობა:0;) )

სიგიჟეა, რისი ბრალია? გარდა ამისა, არ დაგავიწყდეთ, რომ Opera, Chrome, IE და Mozli-სთვის თქვენ უნდა დაწეროთ ერთი და იგივე, მაგრამ ერთი და იგივე პრეფიქსით. ახლა მოდით დავწეროთ ჩვენი სლაიდების ანიმაციის კოდი (აქ და ქვემოთ ნაჩვენები იქნება სამი სლაიდის კოდი. შეგიძლიათ იხილოთ მრავალი საიტის კოდი ქვემოთ მოცემულ კოდში):

Slider_count_3 .item ( -moz-ანიმაცია: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-offinitee1) 2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; ) .item:nth-of-type (3) ( -moz-animation -დაყოვნება:10წმ; -ვებკიტი-ანიმაცია-დაყოვნება:10წმ; -ო-ანიმაცია-დაყოვნება:10წმ; ანიმაცია-დაყოვნება:10წ;

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

Slider:hover .item ( -moz-animation-play-state: შეჩერებულია; -webkit-animation-play-state: დაპაუზებულია; -o-animation-play-state: დაპაუზებულია; animation-play-state: შეჩერებულია; )

გამარჯობა, ჩვენ მივედით თქვენთან ჩვენი სლაიდების შერევამდე. როგორც ჩანს, CSS-ის გამოყენებით ელემენტის სიმძლავრის შეცვლის საშუალება არ არსებობს. სამიზნის დასამიზნებლად შეგვიძლია გამოვიყენოთ ფსევდოკლასები :focus, :target ან :checked გვერდის ერთ-ერთ ელემენტში. ფსევდო-კლასი :focus შეიძლება იყოს მხოლოდ ერთ ელემენტში თითო გვერდზე, :target თვალყურს ადევნებს ბრაუზერის ისტორიას და მოითხოვს ტეგს; pseudo-class:checked ამახსოვრებს სტატუსს გვერდიდან გასვლამდე და თითოეული რადიო ღილაკისთვის შეგიძლიათ აირჩიოთ მხოლოდ ერთი ელემენტი ჯგუფში. დააჩქარეთ. ჩასვით ადრე