ცალკე გამოყენებისას, CSS3 და jQuery იძლევა შესაძლებლობების ფართო სპექტრს. მაგრამ თუ ერთად გამოიყენებენ... მაშინ მათ შეუძლიათ ეფექტები მართლაც შთამბეჭდავი გახადონ. ზოგჯერ ჩნდება პრობლემა, თუ როგორ უკეთ და კრეატიულად მოაწყოთ საერთო თემის რამდენიმე სურათი ან ფოტო ერთ ადგილას. როგორც ვარიანტი, შეგიძლიათ შექმნათ სლაიდერი (განსაკუთრებით იმის გამო, რომ მათი დიდი რაოდენობაა). მაგრამ ამ სახელმძღვანელოში ჩვენ შევქმნით ინტერაქტიულ 3D გალერეას CSS3 და jQuery-ის გამოყენებით. ამის სწრაფად გასარკვევად და თქვენს ვებსაიტზე სლაიდერის გამოსაყენებლად, გირჩევთ ჩამოტვირთოთ დემო ვერსია (ის ასევე ხელმისაწვდომია სრულ სიახლეებში) და უბრალოდ ამის გაკეთება მაგალითში ანალოგიით.
რეალური მაგალითი შეგიძლიათ ნახოთ აქ:
ჩამოტვირთვა
HTML ნაწილი - საინტერესო jQuery სლაიდერი
კონტეინერი კლასით მთავარიგამოყენებული იქნება ფონის საჩვენებლად. და შემდეგ ბლოკის შიგნით იდენტიფიკატორით immersive_slider შეგიძლიათ დაამატოთ იმდენი სლაიდი, რამდენიც გჭირდებათ. სლაიდებში გადაადგილების ღილაკები შეიძლება ამოღებულ იქნას, თუ ისინი არ გჭირდებათ:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class = "მთავარი" >
...
<div id = "immersive_slider" >
<< |
jQuery ნაწილი
| 1 2 3 4 5 6 7 8 | $("#immersive_slider") .immersive_slider (( ანიმაცია: "fade" , slideSelector: ".slide" , კონტეინერი: ".main" , cssBlur: false , pagination: true , autoStart: 5000 ) ); |
როგორც თქვენ შენიშნეთ სლაიდერის მაგალითის ნახვისას, არსებობს სხვადასხვა . ამ გადასვლების ყველა პარამეტრი არის ზემოთ მოცემულ ფუნქციაში. მოდით შევხედოთ ამ პარამეტრებს:
- ანიმაცია— მნიშვნელობა, რომელიც განსაზღვრავს, თუ როგორ შეიცვლება სლაიდები. იღებს მნიშვნელობებს "fade", "slide" ან "bounce". და სლაიდების ვერტიკალური ცვლილების შესასრულებლად, თქვენ უნდა შეიყვანოთ "slideUp" ან "bounceUp".
- slideSelector— სელექტორი სლაიდებით ბლოკების ასარჩევად.
- კონტეინერი— ეს თვისება განსაზღვრავს მთავარ კონტეინერს, რომლის ფონი შეიცვლება.
- cssBlurეს არის საცდელი ფუნქცია. თუ არ გსურთ ბუნდოვანის დაყენება, მაშინ არ დააყენოთ ეს თვისება.
- პაგინაცია— ააქტიურებს ნავიგაციას.
- ავტომატური დაწყება- სლაიდ შოუს ავტომატური დაწყება.
ეს სლაიდერი მარტივი ინსტალაციაა და თუ გაერკვევით, შეგიძლიათ მარტივად დააკონფიგურიროთ და მიაღწიოთ სასურველ შედეგს. ამ სლაიდერის მუშაობისთვის საჭიროა მხოლოდ რამდენიმე ელემენტი, რომლებსაც ახლა განვიხილავთ თანმიმდევრობით.
HTML მარკირება
აქ ყველაფერი ძალიან მარტივია, თქვენ უბრალოდ უნდა დაამატოთ UL სია თავიდანვე, ტეგის შემდეგ სხეული.
სიაში მხოლოდ სამი ხაზია ლი, ანუ სლაიდერი გათვლილია 3 სურათზე, თუ მეტი გჭირდებათ, მაშინ პირველი ნაბიჯი არის საჭირო რაოდენობის ხაზების დამატება. მოდით გადავიდეთ.
CSS სტილები
ეს, ალბათ, სამუშაოს ყველაზე მნიშვნელოვანი ნაწილია, რადგან ჩვენი სლაიდერი როგორ იმუშავებს, დამოკიდებულია CSS-ზე. გახსენით თქვენი საიტის სტილის ფაილი და დაამატეთ მას შემდეგი კოდი.
Body_slides(list-style:none; margin:0; padding:0; z-index:-2; background:#000;) .body_slides, .body_slides:after(პოზიცია: ფიქსირებული; სიგანე:100%; სიმაღლე:100% ზევით:0px;) .body_slides:after (შინაარსი: ""; ფონი: გამჭვირვალე url(images/pattern.png) გამეორება ზევით მარცხნივ;).body_slides li( width:100%; სიმაღლე:100%; პოზიცია: აბსოლუტური: 0-ის გამეორება: 18 სლაიდები ხაზოვანი 0s; ხაზოვანი უსასრულო 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-ის სწავლებას.
ჩვენს სიას სლაიდებით აქვს კლასი სხეულის_სლაიდები. მას მოცემულია სტილები გარეგნობისა და ზოგადი პარამეტრებისთვის.
შემდეგ გვაქვს ფსევდო ელემენტი - : შემდეგ, რომელიც განსაზღვრავს დამატებით ფენას და ნახატს წერტილების სახით ზედ ადევს ფონის თავზე. ეს კეთდება გამოსახულების გამოყენებით, რომლისკენაც გზა მითითებულია images/pattern.png. თუ თქვენ გაქვთ სხვა გზა, გთხოვთ მიუთითოთ ის სწორად.
.body_slides li:nth-child(1)- ეს არის რიგით პირველი სლაიდი და აქვს ფონის სურათი. შემდეგ მოდის nth-child(2), გარდა სურათისა, მას ეძლევა სხვა დრო და უდრის 6 წამს. ანუ გამოჩნდება პირველი სლაიდიდან 6 წამის შემდეგ. შემდეგი არის nth-child(3), ის გამოჩნდება კიდევ ექვს წამში, ასე რომ მას აქვს დრო 12 წამი. თუ მე-4 სლაიდის დამატება გჭირდებათ, დაამატეთ nth-child(4) და მას უკვე უნდა ჰქონდეს დრო 18 წამი. ვფიქრობ, ეს გასაგებია.
შემდეგ თქვენ უნდა მიუთითოთ ანიმაციის სრული დრო, ის ახლა დაყენებულია სხეულის_სლაიდებიდა უდრის 18 წამს. თუ დაამატებთ 4 სლაიდს, უდრის 24-ს და ასე შემდეგ. თუ მათემატიკაში კარგად ხარ, უნდა გაუძლო, მთავარია შეცდომები არ დაუშვა, რადგან სლაიდერი საერთოდ არ იმუშავებს. თუ სასურველია, შეგიძლიათ დააჩქაროთ ან შეანელოთ სასურველი დროის დაყენებით.
keyframes anim_slides- ეს არის სლაიდის გამოჩენა და გაქრობა. თავდაპირველად, სლაიდი გამჭვირვალეა და მას ეძლევა პირობა - გამჭვირვალობა:0;. როცა რომელიმე სლაიდის ჯერია, ის ჯერ ჩნდება, შემდეგ ისევ იწყებს გამჭვირვალობას და მთლიანად ქრება და მის ადგილას ახალი ჩნდება. თუ გსურთ შეცვალოთ გარეგნობის ან გაქრობის სიჩქარე, შეცვალეთ პროცენტი - ეს არის მთლიანი დროის პროცენტი.
დანარჩენი პარამეტრები არის სურვილისა და საჭიროების მიხედვით - ზოგადი ფონი, ახლა შავი, გზა სურათებისკენ, პოზიციონირება, ფენის დონე და ა.შ. ამ სლაიდერის უპირატესობა ის არის, რომ ის მარტივია და არ იყენებს სკრიპტებს და მთელ ბიბლიოთეკებს, თუ იგი დამზადებულია - jQuery. დიდი იმედი მაქვს, რომ თუ გინდოდათ თქვენი ფონის სურათების შეცვლა, მაშინ ეს CSS სლაიდერი დაგეხმარებათ.
სულ ესაა, მადლობა ყურადღებისთვის. 🙂
დრო არ დგას და მასთან ერთად პროგრესიც. ამან ასევე იმოქმედა ინტერნეტზე. თქვენ უკვე ხედავთ, თუ როგორ იცვლება ვებსაიტების გარეგნობა ადაპტური დიზაინით. და ამ მხრივ საკმაოდ ბევრი ახალი გამოჩნდა ადაპტური jquery სლაიდერები, გალერეები, კარუსელები ან მსგავსი დანამატები.
1. საპასუხო ჰორიზონტალური პოსტების სლაიდერი
ადაპტური ჰორიზონტალური კარუსელი დეტალური ინსტალაციის ინსტრუქციებით. იგი დამზადებულია უბრალო სტილში, მაგრამ თქვენ შეგიძლიათ დააგემოვნოთ იგი.
2. სლაიდერი Glide.js-ზე
ეს სლაიდერი შესაფერისია ნებისმიერი ვებსაიტისთვის. ის იყენებს ღია წყაროს Glide.js. სლაიდერის ფერები ადვილად შეიცვლება.
3. დახრილი შინაარსის სლაიდშოუ
საპასუხო შინაარსის სლაიდერი. ამ სლაიდერის მთავარი წერტილი არის სურათების 3D ეფექტი, ასევე შემთხვევითი გარეგნობის სხვადასხვა ანიმაცია.
4. სლაიდერი HTML5 ტილოს გამოყენებით
ძალიან ლამაზი და შთამბეჭდავი სლაიდერი ინტერაქტიული ნაწილაკებით. იგი გაკეთდა HTML5 ტილოს გამოყენებით,
5. გამოსახულების მორფინგის სლაიდერი
სლაიდერი მორფინგის ეფექტით (გლუვი ტრანსფორმაცია ერთი ობიექტიდან მეორეზე). ამ მაგალითში, სლაიდერი კარგად შეეფერება ვებ დეველოპერის ან ვებ სტუდიის პორტფოლიოს პორტფელის სახით.
6. წრიული სლაიდერი
სლაიდერი წრის სახით გამოსახულების გადაბრუნების ეფექტით.
7. სლაიდერი ბუნდოვანი ფონით
ადაპტაციური სლაიდერი გადართვით და ფონის დაბინდვით.
8. საპასუხო მოდის სლაიდერი
მარტივი, მსუბუქი და საპასუხო ვებსაიტის სლაიდერი.
9. Slicebox - jQuery 3D გამოსახულების სლაიდერი(განახლებულია)
Slicebox სლაიდერის განახლებული ვერსია შესწორებებით და ახალი ფუნქციებით.
10. უფასო ანიმაციური საპასუხო გამოსახულების ბადე
JQuery დანამატი მოქნილი გამოსახულების ბადის შესაქმნელად, რომელიც ცვლის კადრებს სხვადასხვა ანიმაციისა და დროის გამოყენებით. ეს შეიძლება კარგად გამოიყურებოდეს, როგორც ფონი ან დეკორატიული ელემენტი ვებსაიტზე, რადგან ჩვენ შეგვიძლია შერჩევით გამოვაჩინოთ ახალი სურათები და მათი გადასვლები. მოდული გამოდის რამდენიმე ვერსიით.
11.Flex სლაიდერი
უნივერსალური უფასო მოდული თქვენი ვებსაიტისთვის. ეს მოდული მოდის რამდენიმე სლაიდერის და კარუსელის ვარიანტში.
12. ფოტო ჩარჩო
ფოტორამაარის უნივერსალური დანამატი. მას აქვს მრავალი პარამეტრი, ყველაფერი მუშაობს სწრაფად და მარტივად და შეგიძლიათ ნახოთ სლაიდები სრულ ეკრანზე. სლაიდერის გამოყენება შესაძლებელია როგორც ფიქსირებული ზომით, ასევე ადაპტირებადი, ესკიზებით ან მის გარეშე, წრიული გადახვევით ან მის გარეშე და მრავალი სხვა.
P.S.სლაიდერი რამდენჯერმე დავაყენე და ვფიქრობ, რომ ერთ-ერთი საუკეთესოა
13. უფასო და ადაპტირებული 3D სლაიდერის გალერეა ესკიზებით.
ექსპერიმენტული გალერეის სლაიდერი 3DPpanelLayoutბადით და საინტერესო ანიმაციური ეფექტებით.
14. სლაიდერი css3-ზე
ადაპტური სლაიდერი დამზადებულია css3-ის გამოყენებით, შინაარსის გლუვი გარეგნობით და მსუბუქი ანიმაციით.
15. WOW სლაიდერი
WOW სლაიდერიარის გამოსახულების სლაიდერი საოცარი ვიზუალური ეფექტებით.
17. ელასტიური
ელასტიური სლაიდერი სრული რეაგირებით და სლაიდების ესკიზებით.
18. ჭრილი
ეს არის სრულ ეკრანზე საპასუხო სლაიდერი css3 ანიმაციის გამოყენებით. სლაიდერი დამზადებულია ორ ვერსიით. ანიმაცია შესრულებულია საკმაოდ უჩვეულოდ და ლამაზად.
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. გამოსახულების მონტაჟი jQuery-ით
სურათების ავტომატურად დალაგება ეკრანის სიგანის მიხედვით. ძალიან სასარგებლო რამ პორტფელის ვებსაიტის შემუშავებისას.
30. 3D გალერეა
მარტივი 3D წრიული სლაიდერი css3 და jQuery გამოყენებით.
31. სრული ეკრანის რეჟიმი 3D ეფექტით css3 და jQuery-ის გამოყენებით
სლაიდერი სრულეკრანიანი სურათების ნახვის უნარით ლამაზი გადასვლით.
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. Shutter Effect Portfolio მოდული
ახალი jQuery მოდული ფოტოგრაფის პორტფოლიოს შესაქმნელად. გალერეას აქვს სურათების შეცვლის საინტერესო ეფექტი. ფოტოები ერთმანეთს მიჰყვება ლინზების ჩამკეტის მუშაობის მსგავსი ეფექტით.
21. მსუბუქი javascript CSS სლაიდერი „TinySlider 2“
გამოსახულების სლაიდერის დანერგვა Javascript-ისა და CSS-ის გამოყენებით.
22. გასაოცარი სლაიდერი "Tinycircleslider"
ელეგანტური მრგვალი სლაიდერი. სურათებს შორის გადასვლა ხორციელდება სლაიდერის წითელ წრის სახით წრეწირის გარშემო გადათრევით. ის მშვენივრად მოერგება თქვენს ვებსაიტს, თუ თქვენს დიზაინში იყენებთ მრგვალ ელემენტებს.
23. გამოსახულების სლაიდერი jQuery-ით
მსუბუქი სლაიდერი "სლაიდერის ნაკრები". სლაიდერი ხელმისაწვდომია სხვადასხვა დიზაინში: ვერტიკალური და ჰორიზონტალური. ასევე განხორციელებულია ნავიგაციის სხვადასხვა სახეობა სურათებს შორის: ღილაკების „წინ“ და „უკან“ გამოყენებით, მაუსის ბორბლის გამოყენებით, სლაიდზე მაუსის დაწკაპუნებით.
24. გალერეა მინიატურებით "Slider Kit"
გალერეა "სლაიდერის ნაკრები". ესკიზების გადახვევა ხორციელდება როგორც ვერტიკალურად, ასევე ჰორიზონტალურად. სურათებს შორის გადასვლა ხორციელდება: მაუსის ბორბლის, მაუსის დაწკაპუნებით ან კურსორის გადატანა მინიატურაზე.
25. jQuery შინაარსის სლაიდერი „Slider Kit“
ვერტიკალური და ჰორიზონტალური შინაარსის სლაიდერი jQuery-ის გამოყენებით.
26. jQuery სლაიდშოუ “Slider Kit”
სლაიდშოუ სლაიდების ავტომატური ცვლილებით.
27. მსუბუქი პროფესიონალური javascript CSS3 სლაიდერი
სუფთა jQuery და CSS3 სლაიდერი შექმნილი 2011 წელს.
jQuery სლაიდშოუ ესკიზებით.
29. მარტივი jQuery სლაიდშოუ
სლაიდშოუ ნავიგაციის ღილაკებით.
30. გასაოცარია 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-ის გამოყენებით.
Temdo Slider არის ძლიერი და ადვილად გამოსაყენებელი ინსტრუმენტი თქვენი ვებსაიტისთვის ლამაზი სლაიდერების შესაქმნელად. სლაიდერის ძირითადი მახასიათებლები:
- თქვენ შეგიძლიათ აირჩიოთ ნებისმიერი სურათი ან ვიდეო, როგორც ფონი თითოეული სლაიდისთვის.
- დამატებითი გადაფარვის სურათი
- გადახვევის ანიმაცია
- ანიმაცია სლაიდების შეცვლისას
თუ თქვენ გჭირდებათ ლამაზი "კლასიკური" სლაიდერის შექმნა (ფონი, არაუმეტეს ორი დამატებითი გრაფიკული ფენისა, სათაური, ქვესათაური, ტექსტი და არაუმეტეს ორი ღილაკი თითოეულ სლაიდზე), რეკომენდებულია Temdo Slider-ის გამოყენება, განსაკუთრებით თუ გჭირდებათ სრული ეკრანის სლაიდერები და ფონური ვიდეოები.
სლაიდერის შექმნა
ახალი სლაიდერის შესაქმნელად, WordPress Dashboard-ის მარცხენა მენიუში აირჩიეთ სლაიდერი > დაამატეთ ახალი სლაიდი:
სლაიდის ტიპი
სლაიდის ძირითადი პარამეტრი არის ფონის ტიპი (სურათი ან ვიდეო). ამ პარამეტრის არჩევიდან გამომდინარე, იცვლება სლაიდის პარამეტრების ინტერფეისი: პარამეტრების ჯგუფის ნაცვლად ვიდეოს არჩევისას სტატიკური ფონიჩნდება ჯგუფი ანიმაციური ფონი.
სლაიდის ფონი
აირჩიეთ ფონის სურათი თქვენი სლაიდისთვის. გაითვალისწინეთ, რომ ფონის სურათი დაიჭიმება ეკრანის სრული სიგანის შესავსებად (ასპექტის თანაფარდობის შენარჩუნებისას). ამიტომ რეკომენდებულია Full HD (1920 x 1080 პიქსელი) სურათების გამოყენება. თუ გსურთ, რომ სლაიდერმა არ დაიკავოს მთელი ეკრანი სიმაღლეში, თქვენ უნდა დააყენოთ სიმაღლე სლაიდერის პარამეტრებში.
გადაფარვის სურათი
გამოიყენეთ ეს პარამეტრი დამატებითი სურათის გადასაფარებლად გამჭვირვალე ან ნახევრად გამჭვირვალე ფონით ძირითადი ფონის სურათის თავზე. გადაფარული გამოსახულება განმეორდება სლაიდის მთელ ზედაპირზე, როგორც ტექსტურა.
ფონის ანიმაცია
ჩართეთ ეს პარამეტრი, თუ გსურთ ფონის სურათის ანიმაცია. ჩართვის შემდეგ, ანიმაციის შემდეგი ტიპები ხელმისაწვდომი გახდება:
- გადიდება ცენტრთან შედარებით (ნაგულისხმევი)
- გადიდება ზედა მარცხენა კუთხესთან შედარებით
- გადიდება ზედა მარჯვენა კუთხესთან შედარებით
- გადიდება ქვედა მარცხენა კუთხესთან შედარებით
- გადიდება ქვედა მარჯვენა კუთხესთან შედარებით
ფონური ვიდეო
Temdo სლაიდერი მხარს უჭერს webm, mp4 და ogg ვიდეო ფორმატებს.
ვიდეოს ფონად გამოსაყენებლად, ჯერ უნდა ატვირთოთ ის თქვენი საიტის მედია ბიბლიოთეკაში. ამისათვის WordPress კონსოლის მარცხენა პანელში აირჩიეთ ელემენტი მედია ფაილები > დაამატეთ ახალი. ვიდეოს ჩამოტვირთვის დასრულების შემდეგ დააკოპირეთ მისი URL ბუფერში და დაუბრუნდით სლაიდის რედაქტირებას. ჩასვით ვიდეო ფაილის გზა გაცვლის ბუფერიდან სლაიდის პარამეტრების შესაბამის განყოფილებაში. რეკომენდირებულია გამოიყენოთ ვიდეო სამივე ფორმატში, როდესაც ეს შესაძლებელია, რაც შეიძლება მეტი თანამედროვე ბრაუზერის მხარდასაჭერად.
სლაიდების თვისებები
ეს განყოფილება ადგენს სლაიდის ძირითად პარამეტრებს:
- სათაურის დიზაინი: თქვენ შეგიძლიათ აირჩიოთ მსუბუქი დიზაინი მუქი ფონზე გამოსაყენებლად, ან მუქი დიზაინი, რომ კონტრასტული იყოს სათაური ღია ფონთან.
- ნავიგაციის ფერი: აირჩიეთ ფერი მარცხნივ-მარჯვნივ ისრებისთვის და ნავიგაციის წერტილებისთვის სლაიდერის ბოლოში
- სექციაზე გადახვევა: აჩვენეთ ისარი, რომელზეც დაწკაპუნებით გადაადგილდება გვერდი მითითებულ ადგილას. შეიყვანეთ წამყვანის სახელი, მაგალითად '#contact'
- სათაურის არ ჩვენება: ჩართეთ ეს პარამეტრი, თუ არ გსურთ, რომ სათაური გამოჩნდეს ამ სლაიდზე.
- არ აჩვენო სათაურის ჩრდილი: გამორთეთ სათაურის ჩრდილი ამ სლაიდისთვის.
- გრაფიკული ანიმაცია: აირჩიეთ ორი ანიმაციური ეფექტი თქვენი სლაიდ გრაფიკისთვის
- შინაარსის ანიმაცია: აირჩიეთ სათაურის, სუბტიტრების, ტექსტის და ღილაკების ანიმაციის ორი გზა
სლაიდის შინაარსის სტილის დაყენება
სლაიდის ტექსტის შინაარსის სტილის პარამეტრები (სათაური, სუბტიტრები და ტექსტი) დაყენებულია პარამეტრების შესაბამის ჯგუფებში:
- სლაიდის სათაური
- სლაიდის სუბტიტრები
- სლაიდის ტექსტი
თითოეულ ამ ჯგუფში შეგიძლიათ დააყენოთ შრიფტი, ფერი, ზომა და სტილის სხვა პარამეტრები თითოეული ელემენტისთვის.
გრაფიკა და SVG გრაფიკა
აქ შეგიძლიათ ჩამოტვირთოთ დამატებითი გრაფიკული ელემენტი (), ასევე ვექტორული გრაფიკა SVG ფორმატში. თითოეული ამ ელემენტისთვის შეგიძლიათ დააყენოთ ბმული, რომელიც გაიხსნება ელემენტზე დაწკაპუნებისას.
ღილაკები სლაიდზე
ამ განყოფილებაში შეგიძლიათ დააყენოთ პარამეტრები ერთი ან ორი ღილაკისთვის:
- ღილაკის ტექსტი
- ბმული
- Hover ანიმაცია
- ხატულა
სლაიდის ანიმაცია გადახვევისას
ამ განყოფილებაში შეგიძლიათ ჩართოთ და გამორთოთ ანიმაცია მთელი სლაიდის შინაარსის ან ცალკეული სლაიდის ელემენტების გადახვევისას. თუ სასურველია (და ოსტატურად), შეგიძლიათ დაარეგულიროთ ანიმაცია CSS სტილის გამოყენებით.
სლაიდის შენახვა
სლაიდის შენახვამდე დაამატეთ იგი ერთ ან მეტ სლაიდერში სლაიდების განყოფილებაში შესაბამისი ველების მონიშვნით. თუ ჯერ არ გაქვთ სლაიდერები, დააწკაპუნეთ ბმულზე + დაამატეთ ახალი სლაიდერი:
