Jquery ახალი სლაიდერი. ადაპტური სლაიდერების დამატება. გასაოცარია jQuery "Skitter" სლაიდშოუ
ერთი საათი უძრავად დგომა და მასთან ერთად პროგრესი. ეს ინტერნეტში გამოჩნდა. თქვენ უკვე შეგიძლიათ ისწავლოთ როგორ შეცვალოთ გარეგანი სახესაიტები და განსაკუთრებით პოპულარულია საპასუხო დიზაინი. cym-თან შეერთებისას ადაპტური სლაიდერები საიტისთვისკიდევ უფრო პოპულარული და აქტუალური გახდა. ბევრი ახალი გამოჩნდა ადაპტური jquery სლაიდერები, გალერეები და კარუსელები.
თუ გსურთ დააინსტალიროთ უნივერსალი სლაიდერიან კიდევ კარუსელითქვენ შეგიძლიათ შეხვიდეთ თქვენს საიტზე გამოყენებით
სლაიდერი საიტისთვის
1. საპასუხო ჰორიზონტალური პოსტების სლაიდერი
ადაპტაციური ჰორიზონტალური კარუსელი დეტალური ინსტრუქციებიდაყენებულის მიხედვით Vikonana-ს აქვს მარტივი სტილი, მაგრამ თქვენ შეგიძლიათ მისი სტილი თქვენთვის.
2. სლაიდერი Glide.js-ზე
ეს სლაიდერი შესაფერისია ნებისმიერი საიტისთვის. Glide.js ღია კოდით განიხილება აქ. სლაიდერის ფერები ადვილად შეიცვლება.
ადაპტირებული სლაიდერები შინაარსის მქონე ვებსაიტისთვის. ამ სლაიდერის მთავარი მახასიათებელია 3D ეფექტის ჩვენება, ასევე სხვადასხვა ანიმაციები გამოჩნდება შემთხვევითი თანმიმდევრობით.
4. სლაიდერი Wikoristanny HTML5 ტილოთი
ძალიან ლამაზი და მიმზიდველი სლაიდერი ინტერაქტიული ნაწილებით. Vikonany დახმარებისთვის HTML5 ტილო,
5. სლაიდერი "სურათის მორფირება"
სლაიდერი მორფის ეფექტით. რომელი სლაიდერი შეეფერება ვებ დეველოპერის ან ვებ სტუდიის პორტფოლიოს, რომელიც პორტფოლიოს ჰგავს?
6. წრის სლაიდერი
სლაიდერი ხედზე ახდენს გამოსახულების გადაბრუნების ეფექტს.
7. სლაიდერი ფონით
ადაპტირებადი სლაიდერი mix and match ფონით.
8. ადაპტური მოდის სლაიდერი
მარტივი, მსუბუქი და ადაპტირებული სლაიდერი საიტისთვის.
9. Slicebox - jQuery 3D გამოსახულების სლაიდერი(განახლებები)
Slicebox-ის განახლებული ვერსია სლაიდერი შესწორებებით და ახალი ფუნქციებით.
JQuery მოდული მოქნილი გამოსახულების ბადის შესაქმნელად, რომელიც საშუალებას გაძლევთ გადააკეთოთ ფოტოები, აირჩიოთ სხვადასხვა ანიმაცია და დრო.
საიტის სლაიდერი ჩემი მეგობარია.
11.Flex სლაიდერი
უნივერსალური, უფასო დანამატი თქვენი ვებსაიტისთვის. ეს მოდული ხელმისაწვდომია მრავალი სლაიდერის და კარუსელის ვარიანტში.
12. ფოტო ჩარჩო
ფოტორამა-ცე უნივერსალური მოდული. ბევრი დახვეწილობაა. ყველაფერი კეთდება სწრაფად და მარტივად, ასევე შეგიძლიათ ნახოთ სლაიდები მთელ ეკრანზე. სლაიდერის კონფიგურაცია შესაძლებელია როგორც ფიქსირებული ზომის ან ადაპტაციური, ესკიზებით ან მის გარეშე, წრიული გადახვევით ან მის გარეშე და მრავალი სხვა. ფოტოებზე დაყრდნობით, შეგიძლიათ შექმნათ რამდენიმე ადაპტური სლაიდერი თქვენი ვებსაიტისთვის.
P.S.რამდენჯერმე დავაყენე სლაიდერი და პატივს ვცემ, რომ ის ერთ-ერთი საუკეთესოა
13. უფასო და ადაპტირებული 3D სლაიდერის გალერეა ესკიზებით.
ექსპერიმენტული გალერეის სლაიდერი 3DPanelLayoutბადით და სასარგებლო ანიმაციური ეფექტებით.
14. CSS3 სლაიდერი
ადაპტური Wiconia სლაიდერი დამატებითი CSS3-ით შეუფერხებლად ჩნდებაშინაარსი და მსუბუქი ანიმაცია.
- ეს სლაიდერი გამოსახულია უაზროდ ვიზუალური ეფექტებიდა ანიმაციები.
17. ელასტიური
ელასტიური სლაიდერი სრული ადაპტირებით და სლაიდების ესკიზებით.
18. ჭრილი
ეს არის სრულ ეკრანზე ადაპტირებული სლაიდერი CSS3 ანიმაციის გამოყენებით. სლაიდერს აქვს ორი ვარიანტი და ანიმაცია არაფრით შემოიფარგლება.
19. ადაპტური ფოტო გალერეა პლუს
ვწუხვარ კატის გარეშე სლაიდერი- შერჩეული სურათების გალერეა.
20. საპასუხო სლაიდერი WordPress-ისთვის
ადაპტირებული და უწყვეტი სლაიდერი WP-სთვის.
21. Parallax Content Slider
სლაიდერი პარალაქსის ეფექტით და კანის ელემენტის კონტროლით დამატებითი CSS3-ის გამოყენებით.
22. სლაიდერი მუსიკის ბმულით
სლაიდერი z Vikoristanny vіdkrytogo გასასვლელი კოდი JPlayer. ეს სლაიდერი გვთავაზობს პრეზენტაციას მუსიკით.
სლაიდერი Tretina ვებსაიტისთვის.
23. სლაიდერი jmpress.js-დან
ადაპტაციური ბაზის სლაიდერი ჩართულია jmpress.js და საშუალებას გაძლევთ შექმნათ 3D ეფექტები სლაიდებისთვის.
24. Fast Hover Slideshow
სლაიდშოუ სლაიდების სწრაფი შერევით. სლაიდები ციმციმებენ კურსორზე გადასვლისას.
აკორდეონის გამოსახულება იყენებს დამატებით CSS3-ს.
ცე საპასუხო გალერეარომელიც ოპტიმიზებულია სენსორული მოწყობილობებისთვის.
29. გამოსახულების მონტაჟი jQuery-ით
ავტომატურად გააფართოვეთ გამოსახულება, რათა მოერგოს ეკრანის სიგანეს. ეს ისეთი საყვარელია, როცა პორტფელის ვებსაიტს უყურებ.
33. ბაგატორის ფოტო.
ეს მდიდარი ბარათი - სურათების გალერეა საშუალებას გაძლევთ აჩვენოთ ტრანსფორმაციების გამოსახულებები. საფუძველი დევს გუგლის რუკა. მარჯვენა მხარეს ნაჩვენებია სურათის მინიატურა, რომელიც შეგიძლიათ იხილოთ სინათლის ველში, როდესაც დააწკაპუნებთ მასზე.
34. სრულეკრანიანი გალერეა ესკიზებით
ადაპტური სლაიდერის გალერეა ესკიზით და სლაიდის აღწერილობით.
საიტის სლაიდერები მუდმივად განახლდება და მათი რიცხვი დღითიდღე იზრდება. თუ გაქვთ თქვენი საყვარელი სლაიდერები, ან შესაძლოა ვერ იპოვეთ რასაც ეძებდით, მაშინ დაწერეთ კომენტარებში და ვეცდები დაგეხმაროთ.
საჭიროა მარტივი სლაიდერი ავტომატური გადახვევით. Დავიწყოთ...
რობოტის სლაიდერის აღწერა
სლაიდები განთავსდება ონლაინ და მეშვეობით ღირებულების საათიგადახვევა.
წითელი ჩარჩო აჩვენებს სლაიდერის ხილულ ნაწილს.
სლაიდერის ბოლოს, თქვენ უნდა დააკოპიროთ პირველი სლაიდი. ეს აუცილებელია მესამე სლაიდიდან პირველზე გადახვევის უზრუნველსაყოფად. ასევე აუცილებელია დასაწყისზე დარჩენილი სლაიდის დამატება, რათა შესაძლებელი იყოს პირველი სლაიდიდან მესამეზე საპირისპირო მიმართულებით გადახვევა. ქვემოთ ნაჩვენებია სლაიდერის რობოტი სწორი ხაზით.
როდესაც სლაიდერი ბოლომდე მიაღწევს, სლაიდერის ზემოდან ასლი განთავსებულია დარჩენილი სლაიდის ადგილზე. შემდეგ ციკლი კვლავ მეორდება. ეს მეთოდი ქმნის დაუფარავი სლაიდერის ილუზიას.
HTML განლაგება
დამწყებთათვის, ძალიან მარტივი სლაიდერი ავტომატური გადახვევით. ამ რობოტს ორი კონტეინერი სჭირდება. პირველი არის სლაიდერის ხილული ფართობის ზომა, მეორე კი საჭიროა ახალ სლაიდერში განთავსებისთვის. სლაიდერის განლაგება ასე გამოიყურება:
სლაიდერის სტილები
.slider-box( სიგანე: 320px; სიმაღლე: 210px; overflow: დამალული;) .slider(პოზიცია: შედარებითი; სიგანე: 10000px; სიმაღლე: 210px;) ;Container.slider-box განსაზღვრავს სლაიდერის ზომებს. ზედმეტი სიძლიერე: დამალული მოიცავს ყველა ელემენტს, რომელიც არ შედის ელემენტის შუა ზონაში.
კონტეინერის.სლაიდერის სიგანე დაყენებულია დიდზე. ეს აუცილებელია ისე, რომ ყველა სლაიდი მოთავსდეს ერთ ხაზზე.
გაასრიალეთ, რათა შეამოწმოთ დახმარება float:left.
ქვემოთ ნაჩვენებია სლაიდერის ბლოკების სქემატური განლაგება.
სკრიპტი
სლაიდების ნაკადი შეიქმნება კონტეინერის მარცხენა ზღვრის შეუფერხებლად შეცვლით.სლაიდერი.
$(function() ( var width= $(".slider-box") .width() ; // სლაიდერის სიგანე.ინტერვალი = 4000; // სლაიდების შეცვლის ინტერვალი.$(".slider img:last") .clone () .prependTo (."slider") ; // დარჩენილი სლაიდის ასლი მოთავსებულია კობზე.$().eq(1).clone().appendTo(".სლაიდერი"); // პირველი სლაიდის ასლი მოთავსებულია იმავე ადგილას. // Container.slider დაჭერილია მარცხნივ ერთი სლაიდის სიგანეზე. setInterval("ანიმაცია()" , ინტერვალი); // animation() ფუნქცია გაშვებულია, ამთავრებს სლაიდის ცვლილებას.)); ფუნქცია ანიმაცია() (var margin = parseInt($(."slider").css("marginLeft")); // ბლოკის უფრო ზუსტი გადაადგილება. width= $(".slider-box") .width() , // სლაიდერის სიგანე. slidersAmount= $(".სლაიდერი") .ბავშვები () .სიგრძე ; // სლაიდების რაოდენობა სლაიდერში. if (ზღვარი!= (- სიგანე* (სლაიდერებირაოდენობა- 1 ) ) // იმის გამო, რომ მიმდინარე სლაიდი არ არის დარჩენილი,(ზღვარი = ზღვარი-სიგანე; // ზღვრის მნიშვნელობა იცვლება სლაიდის სიგანეზე.) სხვა ( // ნაჩვენებია დარჩენილი სლაიდი$(".slider" ) .css ("margin-left" - width) ; // block.slider ბრუნავს cob-ის პოზიციაზე,ზღვარი = - სიგანე * 2; ) $(".სლაიდერი") .animate (( marginLeft: margin) , 1000 ); // ბლოკის სლაიდერი მარცხნივ მოძრაობს 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, გუგლ ქრომი,იე.
8. ახალი, მსუბუქი jQuery სლაიდერი "bxSlider 3.0"
დემო გვერდზე "მაგალითები" განყოფილებაში შეგიძლიათ იპოვოთ ინსტრუქციები ყველაფრისთვის შესაძლო ვარიანტებიამ მოდულის Vikoristan.
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-ის გამოყენებით.
აუცილებელია ღილაკების „წინ“ და „უკან“ დამატება.
ამ მიზნით საჭიროა ადრე დაწერილი კოდის დამატება.
HTML კოდი ახალი სლაიდერისთვის
სლაიდერის მთელი სტრუქტურა უცვლელი დარჩება. მარკირებამდე დაემატება ორი კონტეინერი ღილაკების ფუნქციის შესაცვლელად.
სლაიდერის სტილები
ღილაკები თავის ადგილს იკავებს კონტეინერის აბსოლუტური პოზიციის მიხედვით.
სლაიდერის ყუთი (პოზიცია: ფარდობითი; სიგანე: 320 პიქსელი; სიმაღლე: 210 პიქსელი; გადინება: დამალული;) .სლაიდერი (პოზიცია: ფარდობითი; სიგანე: 10000 პიქსელი; სიმაღლე: 210 პიქსელი;) .წინა , .სლაიდერის ყუთი .შემდეგი (პოზიცია: აბსოლუტური ზევით: 100 პიქსელი; ეკრანი: ბლოკი; სიგანე: 29 პიქსელი; სიმაღლე: 29 პიქსელი; კურსორი: მაჩვენებელი;). ../images/slider_controls.png ) გამეორების გარეშე 0 0 ; ) .slider-box .next(მარჯვნივ: 10px; ფონი: url (../images/slider_controls.png) no-repeat -29px 0 ;)
სკრიპტი
სლაიდერი ავტომატურად გადახვევს. როდესაც ხელებს იბანთ, წადით მარცხენა ხელით, მაგრამ საჭიროების შემთხვევაში, შეგიძლიათ პირდაპირ შეცვალოთ ხელები დამატებითი ცვლილების კურსის გამოყენებით. მნიშვნელობის 1-დან -1-მდე შეცვლისას, სლაიდერი პირდაპირ შეიცვლება.
სლაიდერის სურათები არ იცვლება მანამ, სანამ კურსორი სლაიდერშია. ღირს შიში? Ეს მარტივია. თუ კურსორი მოძრაობს სლაიდერზე, მაშინ ის გამოჩნდება საიტზე. ამ დროისთვის სლაიდების ავტომატურად შეცვლა შეუძლებელია.
$(function () ( var slider = $(".slider") , sliderContent = slider.html () , // სლაიდერის ნაცვლად slideWidth = $(".slider-box") .outerWidth() , // სლაიდერის სიგანე slideCount = $(".slider img") .length, // სლაიდების რაოდენობა prev = $(".slider-box .prev") , // უკან ღილაკი შემდეგი = $(".slider-box .next") , // ღილაკი წინ sliderInterval = 3300, // სლაიდების შეცვლის ინტერვალი animateTime = 1000, // საათი სლაიდების შესაცვლელადკურსი = 1, // პირდაპირ გადაიტანეთ სლაიდერი (1 ან -1)ზღვარი = - slideWidth; // პოჩატკოვას სლაიდშოუ$(".slider img:last") .clone () .prependTo (."slider") ; // დარჩენილი სლაიდის ასლი მოთავსებულია კობზე.$(".slider img") .eq (1) .clone () .appendTo (."slider" ); // პირველი სლაიდის ასლი მოთავსებულია იმავე ადგილას.$(".slider") .css ("margin-left" - slideWidth) ; // Container.slider დაჭერილია მარცხნივ ერთი სლაიდის სიგანეზე.ფუნქცია nextSlide() ( // animation() ფუნქცია გაშვებულია, ამთავრებს სლაიდის ცვლილებას.ინტერვალი = window.setInterval(animate, sliderInterval) ; ) ფუნქცია animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // მოიწონეთ ნაბიჯების სლაიდერი ბოლომდე slider.css (( "marginLeft" :- slideWidth) ); // შემდეგ block.slider ბრუნავს cob პოზიციაზეზღვარი = - slideWidth * 2; ) სხვა შემთხვევაში, თუ (ზღვარი== 0 && კურსი==- 1 ) ( // თუ სლაიდერი არის კობზე და დააჭირეთ ღილაკს "უკან". slider.css (( "marginLeft" :- slideWidth* slideCount) ); // block.slider გადადის ბოლო პოზიციაზე margin=- slideWidth* slideCount+ slideWidth; ) სხვა ( // იმიტომ რომ არ გიფიქრია რამეზე, margin = margin - slideWidth * (კურსი); // ზღვრის მნიშვნელობა დაყენებულია შემდეგი სლაიდის საჩვენებლად) slider.animate(("marginLeft": margin), animateTime); // ბლოკის სლაიდერი მარცხნივ მოძრაობს 1 სლაიდით.) ფუნქცია sliderStop() ( // ფუნქცია, რომელიც აკონტროლებს სლაიდერის მუშაობას window.clearInterval(interval); ) prev.click (ფუნქცია () ( // დაჭერილია უკანა ღილაკი var course2 = კურსი; კურსი = - 1; animate(); // დააჭირეთ animate() ფუნქციასკურსი = კურსი2; )); next.click(function()( // დაჭერილია უკანა ღილაკი if (slider.is (":ანიმაციური" ) ) ( return false ; ) // ანიმაცია არ მუშაობს var course2 = კურსი; // დროის ცვლილება კურსის ღირებულების შესანახადკურსი = 1; // ადგენს სლაიდერის მიმართულებას მარჯვნიდან მარცხნივ animate(); // დააჭირეთ animate() ფუნქციასკურსი = კურსი2; // კურსის ცვლილება პირველად მნიშვნელობას იძენს)); slider.add(next).add(prev).hover(function()( // თუ მაუსის კურსორი მდებარეობს სლაიდერს შორის sliderStop(); // გამოიძახეთ sliderStop() ფუნქცია სლაიდერის რობოტის დასაწყებად), შემდეგი სლაიდი); // როდესაც კურსორი ტოვებს სლაიდერს, ანიმაცია განახლდება. nextSlide() ; // დააჭირეთ ფუნქციას nextSlide() } ) ;ვიიშოვი ასეთი სლაიდერი ღილაკებით "წინ" და "უკან"
დღესდღეობით, სლაიდერი - კარუსელი - არის ფუნქციონირება, რომელიც უბრალოდ აუცილებელია ვებსაიტზე ბიზნესისთვის, ვებსაიტზე პორტფოლიოს ან სხვა რესურსისთვის. სრულეკრანიანი გამოსახულების სლაიდერების გარდა, ჰორიზონტალური სლაიდერები - კარუსელები - კარგად ჯდება ნებისმიერ ვებ დიზაინში.
ზოგჯერ სლაიდერი პასუხისმგებელია საიტის გვერდის მესამედზე. აქ სლაიდერი - კარუსელი ილუსტრირებულია გარდამავალი ეფექტებით და ადაპტური განლაგებით. ელექტრონული კომერციის საიტები იყენებენ სლაიდერს - კარუსელს სხვა პუბლიკაციებში და გვერდებზე დიდი რაოდენობით ფოტოების დემონსტრირებისთვის. სლაიდერის კოდი შეიძლება მორგებული იყოს და შეიცვალოს თქვენი საჭიროების მიხედვით.
JQuery-ის გამოყენებით HTML5-თან და CSS3-თან ერთად, შეგიძლიათ თქვენი გვერდები გამორჩეული გახადოთ, უზრუნველყოთ უნიკალური ეფექტები და მოიპოვოთ ვიზიტორების პატივისცემა საიტის კონკრეტულ ზონაში.
Slick – ყოველდღიური სლაიდერის მოდული – კარუსელები
Slick - jquery, რომელიც ფართოდ არის ხელმისაწვდომი, არის დანამატი, რომლის დეველოპერები ადასტურებენ, რომ მათ გადაწყვიტეს დააკმაყოფილონ ყველა თქვენი ვარიანტი სლაიდერისთვის. ადაპტაციური სლაიდერი - კარუსელი შეიძლება გამოყენებულ იქნას მობილური მოწყობილობებისთვის "ფილა" რეჟიმში, ხოლო დესკტოპის ვერსიისთვის "ჩათრევის" რეჟიმში.
შეამცირეთ „გაცვეთილი“ გადასვლის ეფექტი, „რეჟიმი ცენტრში“ და გამოსახულების ხაზი ავტომატური გადახვევით. ფუნქციის განახლებები მოიცავს სლაიდების და სლაიდების ფილტრების დამატებას. ყველაფერი იმის უზრუნველსაყოფად, რომ სრულყოფილად დააკონფიგურიროთ მოდული თქვენი კმაყოფილებისთვის.
დემო რეჟიმი | მოზიდვა
Owl Carousel 2.0 - jQuery - მოდული სენსორულ მოწყობილობებზე თამაშის შესაძლებლობით
ამ დანამატს აქვს ფუნქციების ფართო სპექტრი, რომლებიც შესაფერისია როგორც დამწყებთათვის, ასევე მოწინავე დეველოპერებისთვის. სლაიდერის ახალი ვერსია არის კარუსელი. ფრონტმენმა იოგომ საკუთარ თავს ასე უწოდა.
სლაიდერს აქვს ჩაშენებული დანამატები მისი ფუნქციონირების გასაუმჯობესებლად. ანიმაცია, ვიდეოს დაკვრა, სლაიდერის ავტომატური დაკვრა, ანიმაციის ხაზი, ავტომატური რეგულირებასიმაღლეები - Owl Carousel 2.0-ის ძირითადი მახასიათებლები.
ჩართულია ხელით ჩართული დანამატისთვის გადათრევისა და ჩამოშვების მხარდაჭერა მობილური მოწყობილობები.
მოდული შესანიშნავია შესანიშნავი სურათების ჩვენებისთვის მობილური მოწყობილობების მცირე ეკრანებზე.
მიმართვა | მოზიდვა
jQuery მოდული Silver Track
დაამატეთ პატარა, მაგრამ ფუნქციონალურად მდიდარი jquery მოდული, რომელიც საშუალებას გაძლევთ განათავსოთ სლაიდერი გვერდზე - კარუსელი, რომელსაც აქვს მცირე ბირთვი და არ უჭერს მხარს საიტზე რესურსების ნაკლებობას. მოდული შეიძლება გამოყენებულ იქნას ვერტიკალური და ჰორიზონტალური სლაიდერების ჩვენებისთვის, ანიმაციით და გალერეიდან სურათების ნაკრების შესაქმნელად.
მიმართვა | მოზიდვა
AnoSlide – ულტრა კომპაქტური პასუხისმგებელი jQuery სლაიდერი
ულტრა კომპაქტური jQuery სლაიდერი – კარუსელი, რომელსაც ბევრად მეტი ფუნქციონირება აქვს ვიდრე სტანდარტული სლაიდერი. ვინ მოიცავს წინ ხედიერთი სურათი, რამდენიმე სურათი ნაჩვენები კარუსელის ხედში და სლაიდერი სათაურების მიხედვით.
მიმართვა | მოზიდვა
Owl Carousel – Jquery slider – კარუსელი
ბუ კარუსელი - სლაიდერი საყრდენით სენსორული ეკრანებიდა გადაათრიეთ და ჩამოაგდეთ ტექნოლოგია, რომლის ჩართვა მარტივია HTML კოდში. მოდული არის ერთ-ერთი უმოკლესი სლაიდერი, რომელიც საშუალებას გაძლევთ შექმნათ ლამაზი კარუსელები სპეციალურად მომზადებული განლაგების გარეშე.
მიმართვა | მოზიდვა
3D გალერეა - კარუსელი
Vikoristova 3D - გადასვლები, ეფუძნება CSS - სტილებს და მცირე Javascript კოდს.
მიმართვა | მოზიდვა
3D კარუსელი Wikoristanny TweenMax.js-ით და jQuery-ით
სასწაული 3D კარუსელი. როგორც ჩანს, ეს ჯერ კიდევ ბეტა ვერსიაა, რადგან მასში უამრავი პრობლემა აღმოვაჩინე ფაქტიურად მაშინვე. თუ დააკლიკეთ ტესტს და შექმნით თქვენს მძლავრ სლაიდერებს, ეს კარუსელი დიდი დახმარება იქნება.
მიმართვა | მოზიდვა
კარუსელი wiki bootstrap-დან
ადაპტური სლაიდერი - კარუსელი ჩატვირთვის ტექნოლოგიის გამოყენებით შესანიშნავია თქვენი ახალი ვებსაიტისთვის.
მიმართვა | მოზიდვა
ფონდები Bootstrap-ზე - სლაიდერის ჩარჩო - კარუსელის მოძრავი ყუთი
ყველაზე დიდი მოთხოვნაა პორტფოლიოებსა და ბიზნეს საიტებზე. ამ ტიპის კარუსელის სლაიდერი ხშირად ჩანს ყველა ტიპის ვებსაიტზე.
მიმართვა | მოზიდვა
პაწაწინა წრიული დამცავი
ეს არის უზარმაზარი ზომის სლაიდერი, რომელიც მზად არის გამოსაყენებლად მოწყობილობებზე ნებისმიერი სახის ცალკე ეკრანით. სლაიდერის გამოყენება შესაძლებელია როგორც წრიულ, ასევე კარუსელის რეჟიმში. პატარა წრის ხედები ამ ტიპის სხვა სლაიდერების ალტერნატივაა. და წახალისება მიეცა ოპერატიული სისტემა IOS და Android.
წრიულ რეჟიმში, სლაიდერს შეუძლია გამოიყურებოდეს სუფთა. საგულდაგულოდ არის დანერგილი გადაადგილების მეთოდის მხარდაჭერა და სლაიდების ავტომატურად გადახვევის სისტემა.
მიმართვა | მოზიდვა
Thumbelina კონტენტის სლაიდერი
მძლავრი, ადაპტირებადი კარუსელის ტიპის სლაიდერი სწრაფად მოხვდება თქვენს ვებსაიტზე. ის სწორად მუშაობს ნებისმიერ მოწყობილობაზე. არსებობს ჰორიზონტალური და ვერტიკალური რეჟიმები. თქვენი ფაილების ზომა მცირდება 1 კბ-მდე. ულტრა კომპაქტური მოდული ასევე იძლევა უწყვეტი გადასვლების საშუალებას.
მიმართვა | მოზიდვა
ვაა - სლაიდერი - კარუსელი
არსებობს 50-ზე მეტი ეფექტი, რომელიც დაგეხმარებათ შექმნათ ორიგინალური სლაიდერი თქვენი საიტისთვის.
მიმართვა | მოზიდვა
ადაპტური jQuery შინაარსის სლაიდერი bxSlider
შეცვალეთ ბრაუზერის ფანჯრის ზომა, რათა სლაიდერი მოერგოს. Bxslider-ს გააჩნია 50-ზე მეტი პერსონალიზაციის ვარიანტი და აჩვენებს თავის ფუნქციებს სხვადასხვა გარდამავალი ეფექტებით.
მიმართვა | მოზიდვა
j კარუსელი
jCarousel არის jQuery დანამატი, რომელიც დაგეხმარებათ თქვენი სურათების ნახვის ორგანიზებაში. თქვენ შეგიძლიათ მარტივად შექმნათ ლამაზი კარუსელები განაცხადის მითითებების საფუძველზე. ადაპტირებადი და ოპტიმიზაციის სლაიდერი რობოტებისთვის მობილურ პლატფორმებზე.
მიმართვა | მოზიდვა
Scrollbox - jQuery მოდული
Scrollbox არის კომპაქტური დანამატი სლაიდერის შესაქმნელად - კარუსელი ან ტექსტური მწკრივი, რომელიც მუშაობს. ძირითადი ფუნქციები მოიცავს ვერტიკალური და ჰორიზონტალური გადახვევის ეფექტს პაუზით, როდესაც კურსორი მაუსზე დევს.
მიმართვა | მოზიდვა
dbpas კარუსელი
მარტივი სლაიდერი - კარუსელი. თუ გჭირდებათ სწრაფი დანამატი, ის 100% შესაფერისი იქნება. ჩვენ გავაშუქებთ სლაიდერის მუშაობისთვის აუცილებელ ძირითად ფუნქციებს.
მიმართვა | მოზიდვა
Flexisel: საპასუხო jQuery სლაიდერის მოდული - კარუსელები
Flexisel-ის შემქმნელებმა შთაგონება მიიღეს ძველი სკოლის jCarousel მოდულიდან, შექმნეს მისი ასლი, რომელიც მიზნად ისახავს სლაიდერის სწორ მუშაობას მობილურ და პლანშეტ მოწყობილობებზე.
Flexisel-ის ადაპტური განლაგება მობილურ მოწყობილობებზე მუშაობისას შეცვლილია განლაგებიდან, რომელიც ორიენტირებულია ბრაუზერის ფანჯრის ზომაზე. Flexisel ადვილად ადაპტირდება როგორც დაბალი, ასევე მაღალი გარჩევადობის ეკრანებზე მუშაობისთვის.
მიმართვა | მოზიდვა
Elastislide – ადაპტაციური სლაიდერი – კარუსელი
Elastislide შეუფერხებლად ეგუება მოწყობილობის ეკრანის ზომას. თქვენ შეგიძლიათ დააყენოთ ცალ-ცალკე ნაჩვენები სურათების მინიმალური მოცულობა. ის კარგად მუშაობს როგორც სლაიდერი - კარუსელი სურათების გალერეებით, ვიკორისტული და ფიქსირებული გამოსახულება ვერტიკალური გადახვევის ეფექტით.
კონდახი | მოზიდვა
FlexSlider 2
შესანიშნავი სლაიდერი Wootemes-ისგან. იგი სამართლიანად ითვლება ერთ-ერთ ყველაზე ლამაზ ადაპტაციურ სლაიდერად. მოდული შეიცავს უამრავ შაბლონს და სასარგებლო იქნება როგორც დამწყებთათვის, ასევე ექსპერტებისთვის.
კონდახი | მოზიდვა
საოცარი კარუსელი
საოცარი კარუსელი – საპასუხო გამოსახულების სლაიდერი jQuery-ის გამოყენებით. მხარს უჭერს მესამე მხარის კონტენტის მართვის სისტემებს, როგორიცაა WordPress, Drupal და Joomla. იგი ასევე მხარს უჭერს ოპერაციული სისტემების Android, IOS და დესკტოპის ვერსიებს უპრობლემოდ. საოცარი კარუსელის შაბლონები საშუალებას გაძლევთ აჩვენოთ სლაიდერი ვერტიკალურ, ჰორიზონტალურ და წრიულ რეჟიმებში.
მიმართვა | მოზიდვა