ფონის სლაიდერი. Html - ფონური გამოსახულების სლაიდერი დახმარებისთვის გლუვი სლაიდერი - Stack Overflow რუსული ენა. jQuery Parallax Slider Plugin

ერთი საათი არ უნდა დადგეს მისიაზე და მასთან ერთად პროგრესი. ცე თორქნულოს ექსპანსიები ინტერნეტში. უკვე გახსოვთ, როგორ იცვლება საიტების ძველი იერსახე, განსაკუთრებით ადაპტური დიზაინი პოპულარობას იძენს. І zv'yazku z tsim z'ჰქონდა რამდენიმე ახალი ადაპტაციური jquery სლაიდერები , გალერეები, კარუსელები ან მსგავსი დანამატები.
1. საპასუხო ჰორიზონტალური პოსტების სლაიდერი

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

2. სლაიდერი Glide.js-ზე

ეს სლაიდერი შესაფერისია ნებისმიერი საიტისთვის. Glide.js მონიშნულია აქ კოდით. სლაიდერის ფერები ადვილად შეიცვლება.

3. დახრილი შინაარსის სლაიდშოუ

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

4. HTML5 ტილოს ვიკი სლაიდერი

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

5. გამოსახულების მორფირების სლაიდერი

სლაიდერი მორფინგის ეფექტით (გლუვი ტრანსფორმაცია ერთი ობიექტიდან მეორეზე). AT ეს კონდახი dobre pidide სლაიდერი ვებ საცალო ვაჭრობის ან ვებ სტუდიის პორტფოლიოსთვის პორტფელის სანახავად.

6. წრის სლაიდერი

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

7. სლაიდერი ფონის შესაცვლელად

საპასუხო სლაიდერი ფონის დადუმებით.

8. საპასუხო მოდის სლაიდერი

მარტივი, მსუბუქი და ადაპტირებული სლაიდერი საიტისთვის.

9. Slicebox - jQuery 3D გამოსახულების სლაიდერი(განახლება)

Slicebox სლაიდერის განახლებული ვერსია შესწორებებით და ახალი ფუნქციებით.

10. უფასო ანიმაციური საპასუხო გამოსახულების ბადე

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

11.Flex სლაიდერი

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

12. ფოტო ჩარჩო

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

P.S.ერთხელ რომ დავაყენე კილკას სლაიდერი, პატივს ვცემ, რომ ღვინო ერთ-ერთი საუკეთესოა

13. ბეზკოშტოვნა და ადაპტური 3D სლაიდერის გალერეა ესკიზებით.

ექსპერიმენტული სლაიდერების გალერეა 3DPpanelLayoutბადეთა და ანიმაციური ეფექტებით.

14. CSS3 სლაიდერი

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

15. WOW სლაიდერი

WOW სლაიდერი- იგივე გამოსახულების სლაიდერი დახვეწილი ვიზუალური ეფექტებით.

17.ელასტიური

ელასტიური სლაიდერი ახალი ადაპტირებით და სლაიდების ესკიზებით.

18. ჭრილი

ყველაზე მაღალი დონის ადაპტური სლაიდერი სხვადასხვა css3 ანიმაციიდან. Vikonano სლაიდერი ორ ვერსიაში. ანიმაცია იშლება, რათა ის მდუმარე და ლამაზი გახდეს.

19. საპასუხო ფოტო გალერეა პლუს

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

20. საპასუხო სლაიდერი WordPress-ისთვის

არ ბრწყინავს სლაიდერი ადაპტერი WP-სთვის.

21. Parallax Content Slider

სლაიდერი პარალაქსის ეფექტით და კანის ელემენტების კონტროლით CSS3 დახმარებით.

22. სლაიდერი ნარკოტიკული მუსიკიდან

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

23. სლაიდერი jmpress.js-დან

საპასუხო სლაიდერი დაფუძნებულია jmpress.js-ზე და საშუალებას გაძლევთ დაამატოთ რამდენიმე 3D ეფექტი სლაიდებზე.

24. Fast Hover Slideshow

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

25. გამოსახულების აკორდეონი CSS3-ით

აკორდეონის სურათი CSS3 დახმარებისთვის.

26. შეხებით ოპტიმიზებული გალერეის დანამატი

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

27. 3D გალერეა

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

28. პაგინაციის სლაიდერი

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

29.Image Montage jQuery-ით

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

30. 3D გალერეა

მარტივი 3D წრიული სლაიდერი css3 და jQuery-ში.

31. ეკრანის რეჟიმი 3D ეფექტით css3-ზე და jQuery-ზე

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

Temdo Slider არის ჭკვიანი და ადვილად სამართავი ინსტრუმენტი თქვენი საიტისთვის წინა სლაიდერების შესაქმნელად. სლაიდერის ძირითადი მახასიათებლები:

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

თუ თქვენ გჭირდებათ მთლიანი „კლასიკური“ სლაიდერის შექმნა (ფონი, არაუმეტეს ორი დამატებითი გრაფიკული ბურთი, სათაური, ქვესათაური, ტექსტი და არაუმეტეს ორი ღილაკი კანის სლაიდზე), რეკომენდირებულია გამოიყენოთ Temdo Slider, განსაკუთრებით თუ თქვენ საჭიროა ორმაგი ეკრანის სლაიდერი და ფონური ვიდეო.

სლაიდერის დასაკეცი

ახალი სლაიდერის შესაქმნელად, WordPress Console-ის მარცხენა მენიუში აირჩიეთ ელემენტი სლაიდერი > დაამატეთ ახალი სლაიდი:

სლაიდის ტიპი

სლაიდის ძირითადი პარამეტრი არის ფონის ტიპი (სურათი ან ვიდეო). ამ პარამეტრის არჩევიდან გამომდინარე, ინტერფეისი იცვლება სლაიდის რეგულირებისთვის: ვიდეოს არჩევისას შეცვალეთ ჯგუფი რეგულირებისთვის. სტატიკური ფონი z' არის ჯგუფი ანიმაციური ფონი.

სლაიდის ფონი

აირჩიეთ ფონის სურათი სლაიდებისთვის. გთხოვთ გაითვალისწინოთ, რომ ფონის სურათი გადაჭიმული იქნება ეკრანის მთელ სიგანეზე (პროპორციების მიხედვით). ამიტომ რეკომენდირებულია საცხოვრებელი კორპუსის Full HD გამოსახულების გამოყენება (1920 x 1080 პიქსელი). თუ გსურთ, რომ სლაიდერმა არ დაიკავოს მთელი ეკრანი სიმაღლეში, თქვენ უნდა დააყენოთ სიმაღლე სლაიდერის პარამეტრებში.

გამოსახულების გადაფარვა

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

ანიმაციური ფონი

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

• ცენტრის გაუმჯობესება (ჩაკეტვისთვის)
• ზედა მარცხენა კუტის გაუმჯობესება
• ზედა მარჯვენა კუტის შოდოს გაუმჯობესება
• ქვედა მარცხენა კუტის გაუმჯობესება
• ქვედა მარჯვენა კუტის შოდოს გაუმჯობესება

ფონური ვიდეო

Temdo სლაიდერი მხარს უჭერს webm, mp4 და ogg ვიდეო ფორმატებს.

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

სლაიდის დომინირება

ამ განყოფილებისთვის დაყენებულია სლაიდის ძირითადი პარამეტრები:

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

სლაიდის შინაარსის სტილი

სლაიდის ტექსტის შინაარსის სტილის რეგულირება (სათაური, ქვესათაური და ტექსტი) დაყენებულია პარამეტრების სხვადასხვა ჯგუფებისთვის:

• სლაიდის სათაური
• სლაიდის სუბტიტრები
• სლაიდის ტექსტი

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

გრაფიკა და SVG გრაფიკა

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

ღილაკები სლაიდზე

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

• ტექსტი ღილაკებზე
• პოზილანნია
• ანიმაცია ჰოვერზე
• Ხატი

სლაიდის ანიმაცია გადახვევისას

ამ განყოფილებაში შეგიძლიათ დაამატოთ და აჩვენოთ ანიმაცია სლაიდის მთლიან შინაარსზე ან სლაიდის დანარჩენ ელემენტებზე გადახვევისას. როდესაც ჩართულია (i vminnі), შეგიძლიათ დააზუსტოთ ანიმაცია დამატებითი CSS სტილისთვის.

სლაიდის შენახვა

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

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

HTML მარკირება

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

სიას სამი სტრიქონი აქვს ლი, შემდეგ სადაზღვევო სლაიდერი 3 სურათისთვის, თუ მეტია საჭირო, მაშინ პირველი ნაბიჯი იქნება მწკრივების საჭირო რაოდენობის დამატება. გაიქეცი.

CSS სტილები

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

Body_slides(list-style:none; margin:0; padding:0; z-index:-2; background:#000;) .body_slides, .body_slides:after(პოზიცია: ფიქსირებული; სიგანე:100%; სიმაღლე:100% ; top:0px; მარცხენა:0px;) .body_slides:after ( შინაარსი: ""; ფონი: გამჭვირვალე url(images/pattern.png) გაიმეორეთ ზედა მარცხენა;) .body_slides li( სიგანე:100%; სიმაღლე:100%; პოზიცია:აბსოლუტური;ზემო:0;მარცხნივ:0;ფონის-ზომა:საფარი;ფონი-გამეორება:არცერთი;გაუმჭვირვალობა:0;-ვებკიტი-ანიმაცია: anim_slides 18s წრფივი უსასრულო 0s;-o-ანიმაცია: anim_slides 18s წრფივი უსასრულო 0s; -ms-ანიმაცია: anim_slides 18s linear infinite 0s; animation: anim_slides 18s linear infinite 0s; ). 1.jpg) ) .body_slides li:nth-child(2)( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2.jpg) ) . body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url (images/3.jpg) ) @-webkit-keyframes anim_slides ( 0% (გაუმჭვირვალობა:0;) 6% (გაუმჭვირვალობა:1;) 24% (გაუმჭვირვალობა:1;) 30% (გაუმჭვირვალობა:0;) 100% (გაუმჭვირვალობა:0;) ) @-moz-keyframes anim_slides ( 0% (გაუმჭვირვალობა:0;) 6% (გაუმჭვირვალობა:1;) 24% (გაუმჭვირვალობა:1;) 30% (გაუმჭვირვალობა:0;) 100% (გაუმჭვირვალობა: 0;) )

თუ გესმით CSS, მაშინ თქვენთვის არ აქვს მნიშვნელობა იმის გაგება, თუ რას გულისხმობთ. მოდით დავშალოთ ის მინიმუმამდე, CSS-ის სწავლას აზრი არ აქვს.

ჩვენი კლასის სლაიდების სია სხეულის_სლაიდები. Yomu ნაკრების სტილები, საღი გარეგნობარომ ზაგალნიხ ნალაშტუვანი.

მოგვეცით ფსევდოელემენტი : შემდეგ, რაც ნიშნავს დამატებით ბურთს და თვალსაჩინო წერტილებზე ვიზორის გადაფარვის ფონზე. გამოსახულების დასახმარებლად ბრძოლა, სანამ გზა არის მითითებული images/pattern.png. თუ სხვა გზა გაქვთ, მაშინ სწორად თქვით იოგა.

.body_slides li:nth-child(1)- პირველი სლაიდი, რათა და თქვენ ამოცანები ფონზე ჩვილი. Dalі ide nth-ბავშვი (2), თქვენ krіm მცირე ამოცანები კიდევ ერთი საათი და მეტი 6 წამი. ვინ გამოჩნდება პირველი სლაიდიდან 6 წამის შემდეგ. Dalі nth-child(3), vіn z'ჩნდება ექვს წამში, რომ ახალ საათზე 12 წმ. თუ თქვენ გჭირდებათ სლაიდის 4 დამატება, შეგიძლიათ დაამატოთ nth-child(4) და შესაძლოა საათი და 18 წამი. მგონი აქ აზრი ჰქონდა.

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

keyframes anim_slides- ამ სლაიდის სახელის გამოჩენა. დაბრუნდი კობის სლაიდის პროზორიზე და მოგეცა გონება - გამჭვირვალობა:0;. თუ ეშმაკი მოვა, იქნება ეს zі slideіv, vіn spochatka zavlyaєєєєє და poіmіnіє თავიდან დავინახავთ და უფრო მეტს ვნახავთ іnіstіu, ან yogo mіstsі z'yavlyaєє ახლებს. თუ გსურთ შეცვალოთ გარეგნობის სიჩქარე ან სახელი, შეცვალეთ საათების რაოდენობა - პირველი საათის ფასი.

Inshi nalashtuvannya უკვე bazhannyam-ის საჭიროებისთვის - აალებული ფერფლი, ამავდროულად შავი, სურათებისკენ მიმავალი გზა, პოზიციონირება, ბურთთან მიბმული არის თხელი. ამ სლაიდერის უპირატესობა ის არის, რომ ის მარტივია და არ არღვევს სკრიპტებს და ბევრ ბიბლიოთეკას, ეს ჰგავს დახმარების მოწოდებას. jQuery. დარწმუნებული ვარ, რომ თქვენ თვითონ გინდოდათ ფონის სურათების შეცვლა css სლაიდერი, მე დაგეხმარები.

On tsimu ყველა, dyakuyu პატივისცემისთვის. 🙂

იყავით კეთილი, მითხარით, როგორ შეგიძლიათ დაამატოთ ფონის გამოსახულების სლაიდერი დახმარების სლაიდერის უკან?
Google არ ეხმარება (დოკუმენტაცია ამბობს, რომ სურათები უნდა განთავსდეს div ბლოკში. ფონის სურათები?

@charset utf-8; html, body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,ბლოკციტატა,pre,a,abbr,აკრონიმი,მისამართი,დიდი,ციტირება,კოდი,del,dfn, em,შრიფტი,img,ins,kbd,q,s,samp,პატარა, strike, ძლიერი,sub,sup,tt,var,b,u,i,ცენტრი,dl,dt,dd,ol,ul,li, ველების ნაკრები, ფორმა, იარლიყი, ლეგენდა, ცხრილი, წარწერა, tbody,tfoot,thead,tr,th,td(ფონი: არცერთი არ იმეორებს გადახვევას 0 0 გამჭვირვალე; საზღვარი: 0 არცერთი; შრიფტის ზომა: 100%; მონახაზი: 0 არცერთი; ვერტიკალური გასწორება: საბაზისო; ზღვარი: 0; შიგთავსი: 0;) ცხრილი (საზღვრის ჩაკეცვა: კოლაფსი; საზღვრების დაშორება: 0;) მისამართი, სტატია, განზე, ტილო, დეტალები, ფიგურის წარწერა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, nav, სექცია, შეჯამება (ჩვენება: ბლოკი;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: სასაზღვრო ყუთი; ) a, a:hover, ღილაკი, ღილაკი:hover, .anime ( -moz-transition:all 200ms linear; transition:all 200ms linear; transition:all 200ms წრფივი; კურსორი: მაჩვენებელი; ) .F_COL_C-START_I -CENTER (ჩვენება: flex; flex-flo w: სვეტის ახლავე შეფუთვა; დასაბუთება-შიგთავსი: flex-start; გასწორება-პუნქტები: ცენტრში;). F_ROW_C-START_I-CENTER ( ჩვენება: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: ცენტრი; ): row nowrap; დასაბუთება-შინაარსი: სივრცე-შუა; align-items: flex-start; ) .F_ROW_C-START_I-STRETCH ( ეკრანი: flex; flex-flow: row nowrap; : stretch; 58.75vw; ზღვარი: 0 ავტომატური; პოზიცია: შედარებითი; ) header ( სიგანე: 100%; სიმაღლე: 100vh; 49, 29, 94, .85)), url(../img/bg_header.jpg), ფონზე-გამეორება: არ განმეორდეს; ფონის ზომა: საფარი; ფონი-პოზიცია: ცენტრი; ( ჩვენება: flex; flex-flow: row nowrap; დასაბუთება-შიგთავსი: სივრცე-შუა; ერთეულების გასწორება: ცენტრში; margin-top: 3.2vh; ) #logo svg( სიმაღლე: 3vw; ) #top_header nav ul (ჩვენება: flex; flex-flow: row nowrap; ) nav li (list-style: none; text-transform: uppercase; ფერი: #fff; font-family: "Roboto Black", sans-serif; margin-left: 1.25vw; ) ; შრიფტის წონა: თამამი; ფერი: #fff; : #fff; შრიფტის ზომა: 2vw; ტექსტის გასწორება: ცენტრში; ) სთ ( საზღვარი: არცერთი; სიგანე: 3.12vw; სიმაღლე: 1px; ფონის ფერი: #00e0d0; ფერი: #00e0d0; ზღვარი ზედა: 3.8vh; ) #header_content p ( სიგანე: 48.6vw; ფერი: #fff ; ხაზის სიმაღლე: 3.5vh; ტექსტის გასწორება: ცენტრში; margin-top: 4.17vh; ) "Hammersmith One", sans-serif; შრიფტის ზომა: 1vw; ფერი: #00e0d0; ტექსტი-ტრანსფორმაცია: დიდი; საზღვარი: 1px მყარი #00e0d0; vh;) .btn:hover ( ფერი: #fff; კონტური: 1px მყარი #fff; ) #dot_nav( სიგანე: 3.43vw; ჩვენება: flex; ელემენტი: flex-start; margin-top: 18.9vh; ) .circle_nav ( სიგანე: 0.62vw; სიმაღლე: 0.62vw; კონტური: 2px მყარი # background9color; :hover (საზღვარი: 2px მყარი #00e0d0; ფონის ფერი: #00e0d0; )

CSS3-ისა და jQuery-ის გამოყენებით, არსებობს შესაძლებლობების ფართო სპექტრი. Ale, yakscho vikoristovuvati ერთდროულად... მაშინაც კი, stench შეიძლება ძარცვა ეფექტი უფლება მტრული. ზოგჯერ ამ პრობლემას ადანაშაულებენ, რადგან უფრო ადვილი და კრეატიულია სურათის ან ფოტოების გაფართოება ცხელი თემიდან ერთ სივრცეში. როგორც ვარიანტი, შეგიძლიათ შექმნათ სლაიდერი (ისინი უფრო მეტია სახის გარეშე). მაგრამ ამ გაკვეთილზე ჩვენ შევქმნით ინტერაქტიულ 3D გალერეას CSS3 და jQuery-ის დახმარებით. თქვენს საიტზე სლაიდერის შემუშავებისა და დაყენების გასაადვილებლად - გირჩევთ მიიღოთ დემო ვერსია (ის ასევე ხელმისაწვდომია უახლესი ამბებით) და უბრალოდ გამოიყენოთ ანალოგი აპლიკაციისთვის.

რეალური მაგალითი შეგიძლიათ ჩამოტვირთოთ აქ:

ისარგებლეთ

HTML ნაწილი - Cicavi სლაიდერი jQuery-ზე

კონტეინერი კლასიდან მთავარი bude vykoristovuvatisya, shchob vіdobraziti zadnіy ფონზე. და ბლოკის შუაში იდენტიფიკატორით immersive_slider, შეგიძლიათ დაამატოთ სლაიდების ზოლები, თუ გჭირდებათ. სლაიდების გადაადგილების ღილაკები შეიძლება მოიხსნას, ასე რომ არ დაგჭირდებათ სუნი:

jQuery ნაწილი

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

• ანიმაცია- მნიშვნელობა, როგორ მოვაწეროთ ხელი, როგორ იცვლება სლაიდები. იღებს მნიშვნელობებს "fade", "slide" ან "bounce". და იმისათვის, რომ სლაიდები ვერტიკალურად შეიცვალოს, თქვენ უნდა დაწეროთ "slideUp" ან "bounceUp".
• slideSelector- სელექტორი, რომელიც ირჩევს ბლოკებს სლაიდებით.
• კონტეინერი- უფლებამოსილება განსაზღვრავს ძირითად კონტეინერს, რომლის ფონი იცვლება.
• cssblur- ეს საცდელი ფუნქციაა. თუ არ გინდა იკითხო ვარდი, მაშინ არ დადო შენი ძალა.
• პაგინაცია- გაააქტიურეთ ნავიგაცია.
• ავტომატური დაწყება- სლაიდშოუს ავტომატური დაწყება.