Owl კარუსელი - jQuery მოდული შეხება მხარდაჭერა, რომელიც საშუალებას გაძლევთ შექმნათ რეაგირება (ადაპტირებული) სლაიდერი (კარუსელი).
ეს არის ძალიან კომფორტული, მარტივი და ადაპტური მოდული, რათა შეიქმნას sliders, carousels და ა.შ.
ამ სტატიაში შევეცდები ახსნას და გაჩვენოთ, თუ როგორ მუშაობს.

ინსტალაცია Owl Carousel მოდული
პირველი, ჩვენ უნდა ჩამოტვირთოთ არქივი ერთად მოდული

ქვემოთ მოყვანილი მაგალითი გამოვაქვეყნდება DataLife ძრავის ნიმუშზე.

მას შემდეგ, რაც ჩვენ გადმოვწერეთ არქივი, გახსენით და ფაილების გავრცელება შემდეგნაირად:
საქაღალდე owl.carousel.css და Owl.transitions.css ადგილი საქაღალდეში სტილი. ასე რომ ან cSS.
საქაღალდე owl.carousel.js. ჩვენ დააყენა JS საქაღალდეში

ახლა ჩვენ გვჭირდება ეს ფაილები ჩვენს თარგში მუშაობისთვის.
გახსენით ფაილი main.tpl Apened სიმებიანი შესვლა შემდეგი რიგები:
საქაღალდე cSS. შეცვალეთ ერთი, რომელშიც თქვენ გაქვთ cSS. სტილის!
შემდეგ ქვედა წინ სიმებიანი შეიყვანეთ ასეთი სიმებიანი:
Ის არის! ჩვენ დასრულდა ინსტალაცია.

ახლა ჩვენ უნდა ჩადეთ და კონფიგურაცია სლაიდერი თავად.
მე გაჩვენებთ მაგალითს topnews.ისინი მე გამოვდივარ პოპულარული სიახლეების მეშვეობით ჩვენი owl კარუსელის მეშვეობით.

დოკუმენტაციის გვერდზე აღწერს ყველა პარამეტრს, დემოებსა და გზებს, რათა გამოიყენოთ ჩვენი owl კარუსელის მოდული.
წავიდეთ ბმულზე და აირჩიეთ ნებისმიერი სლაიდერი მოგწონთ.
ჩვენი topnews. მე აირჩია პირველი მოუწოდა სურათები.JavaScript Tab- ში, ასლი ეს ხაზები:
$ (დოკუმენტი) .მახალი (ფუნქცია () ($ (owl-demo "). Owlcarousel (Autoplay: 3000, ელემენტი: 4, Itemsdesktop:, Itemdesktopsmall :));); და მათ ფაილში ჩასვით main.tpl სიმებიანი წინ

შემდეგ CSS tab ასლი რიგები:
# Owl-demoitem (ზღვარი: 3px;) # owl-demoitem img (ჩვენება: ბლოკი: სიგანე: 100%; სიმაღლე: ავტო;) და მათთან დაკავშირება cSS. ფაილი ან ფაილი main.tpl სიმებიანი წინ მაგრამ სიმებიანი შემდეგ !
ახლა ჩვენ გავაანალიზებთ ჩვენს HTML კოდს და დაკავშირებას topnews.ფაილი main.tpl ჩადეთ tag სწორი ადგილი (Topnews) რაც, თავის მხრივ, აჩვენებს პოპულარული სიახლეების სიას, გარეგნობა რომელიც შეიძლება კონფიგურირებული იყოს ფაილში topenews.tpl,ამის შესახებ მხოლოდ ქვემოთ .
ჩვენი კოდი ტეგით უნდა გამოიყურებოდეს:

კარგად, ახლა ჩვენ დავტოვეთ სიახლეები.
გახსენით ფაილი თ.opnews.tplდა თავიდანვე შეესაბამება:

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

ახალი ამბები გამოჩნდება ამ ფორმით.

ეს მოდული შეიძლება გამოყენებულ იქნას თითქმის ყველგან, ასევე გამოყენებით tag (საბაჟო კატეგორია)
მათ ასევე შეუძლიათ შეცვალონ სტანდარტული Dle Gallery, მე გამოაქვეყნებს ცალკე სტატიას ამის შესახებ. ჯანმრთელობისთვის გამოყენება;)

პატივისცემა admin. ძლეებ ყურადღება: ჩამოტვირთვის ლიმიტი მიღწეულია. მოდის ხვალ \u003d)

1. JQuery "Clickcarousel" კარუსელი

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

1. jQuery კარუსელი, მოდული "Caroufredsel"

ჟანერის სურათების სუფთა კარუსელი.

4. JQuery Plugin: Elastislide კარუსელი

5. Plug "Tinycarousel"

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

მოდული "Slider Kit", მარტივი კარუსელი სხვადასხვა გზები გადახვევა.

7. JavaScript კარუსელი

8. JQuery "Grid ნავიგაციის ეფექტები" მოდული

ორიგინალური ნავიგაცია გამოსახულების გამოსახულებას შორის. სანახავად ეფექტი დემო გვერდზე, დააჭირეთ ღილაკს up და down ღილაკები. ეს jQuery გადაწყვეტა ასევე ითვალისწინებს ეფექტი, როდესაც თქვენ hover კურსორი მინიატურების და სენსორული ერთად მაუსის საჭე.

9. მარტივი კარუსელი

10. კარუსელი "ადვილი პიგატირებული" ბლოკებიდან

jQuery მოდული "Easy Paginate". თითოეული მართკუთხა ბლოკი არის ჩვეულებრივი Li სიის ელემენტი, ერთად სამი, ვიდრე სამი, სანახავად მათ ყველა თქვენ უნდა გამოიყენოთ ნავიგაცია, მსგავსი სლაიდერი (გამოყენებით "წინ" ისრებით, "უკან" და გამოყენებით სანავიგაციო ღილაკები at ქვედა).

11. ვერტიკალური rotator "ვერტიკალური ticker"

ვერტიკალური rotator on jQuery: ავტომატური სენსორული შინაარსის გვერდზე. ნავიგაციის ღილაკები უზრუნველყოფილია, ასევე როტაციის შეჩერების უნარი და ისევ ისევ. როდესაც თქვენ hover მაუსის კურსორი მოძრაობს. HTML დონეზე მარკირების, სენსორული ბლოკები წარმოდგენილია ჩვეულებრივი Li სია ნივთები.

12. JavaScript CSS სენსორული ტერიტორია

javaScript Solution "Tinyscroll", რათა შეიქმნას სენსორული ტერიტორია div კონტეინერში.

13. JQuery "Smooth Div Scroll" მოდული

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

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

15. Rotator Content "Circular Content Carousel"

17. Scroller

ბლოკი scroller გამოჩნდება, როდესაც hovering კურსორი. თქვენ შეგიძლიათ გადახვიდეთ შინაარსი, როგორც გამოყენებით Scroll ბარი და გამოყენებით მაუსის საჭე.

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

19. განსაცვიფრებელი სლაიდერი

სლაიდერი ავტომატურად გენერირდება. მონაცემები საქონლის სახელით, აღწერა, ბმული და გამოსახულების მისამართი გადაიყვანეს slider.db.txt ფაილიდან. მეორადი ტექნოლოგიები: CSS, PHP, JQuery.

20. ბლოკების როტაცია jQuery- ის გამოყენებით

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

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

22. დინამიური ბლოკი "მომხმარებელთა მიმოხილვა"

ბლოკის შინაარსის ავტომატური როტაცია. მეორადი ტექნოლოგიები: PHP, XML, CSS, JQuery.

ეს მოდული ასრულებს სიის ელემენტებს (UL LI) კარუსელის jQuery ელემენტებში.

26. JavaScript კარუსელი "ImageFlow"

სურათები ადვილად გადაახვიეთ მაუსის საჭეზე.

27. სენსორული შინაარსი

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

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

33. Scroll Content, Mootools მოდული "Scrollbar"

სენსორული ხორციელდება როგორც Scroll Bar გამოყენებით და გამოყენებით მაუსის საჭე.

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

ამიტომ, მე გთავაზობთ ჩემს საკუთარ ალტერნატიული ვარიანტი ძალიან მარტივი კარუსელი jQuery.

ის შეიძლება გამოყენებულ იქნას როგორც კარუსელის გამოსახულებები და ახალი ამბების ან სხვა შინაარსის გაზეთი \u003d)

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

IDS: 07.07.2014

ეს ასე გამოიყურება:
დემო ჩამოტვირთვა

სტრუქტურა მიიღებს შემდეგ ფორმას:

ჩვენ აღწერს სტილებს:

კარუსელი (მაქსიმალური სიგანე: 1080px; / * მთლიანი ბლოკის სიგანე * / ზღვარი: 50px ავტო; სიგანე: 100%;) .Carousel-wrapper (ზღვარი: 10px 30px; / * ისრები * / overflow: დამალულია; / * დამალვა შინაარსი, რომელიც მთავარ ფართობს სცილდება * / პოზიციაზე: ნათესავი;) .კარუსელი-ნივთები (სიგანე: 10000px; / * ელემენტების კომპლექტისთვის დიდი სიგანე * / პოზიცია: ნათესავი; / * პოზიცია ძირითადი ფართობი კარუსელის * /) .კარუუსელი-ბლოკი (float: მარცხენა, / * ავაშენოთ ყველა კარუსელის ელემენტები ზედიზედ * / სიგანე: 250px; / * მითითებული სიგანე თითოეული ელემენტის * / padding: 10px 10px 10px 0px; / * გააკეთეთ მონახაზი ისე, რომ ელემენტები არ შერწყმა * /) .კარუსელი-ბლოკი img (ჩვენება: ბლოკი;) / *********** ღილაკები ************* / .Carousel-Button-LEFT A, .Carousel-Button-Right A (სიგანე: 25px; სიმაღლე: 36px; პოზიცია: ნათესავი; ზედა: 80px; კურსორი: ტექსტი-გაფორმება: არცერთი;) .Carousel-Button-Left A (Float: მარცხენა, ფონზე: URL (../ სურათები / კარუსელი მარცხნივ.png);) .Carousel-Button-Right A (Float: უფლება; Background: URL (/ სურათები / კარუსელი- Right.png); ) / *********** shadow *********** / .Shadow (Box-shadow: 0px 0px 10px rgba (0, 0, 0, 0.6);

და ბოლოს, როგორ უნდა მუშაობდეს:

// დამუშავება დააწკაპუნეთ arrow მარჯვენა $ (დოკუმენტი). ("დაწკაპეთ", ".კარუსელი- Button-Right", ფუნქცია () (VAR CARUSEL \u003d $ (ეს) .Parents ("კარუსელი"); right_carusel ( კარუსელი); დაბრუნება ცრუ;)); // დამუშავება დაწკაპეთ მარცხენა arrow $ (დოკუმენტი) .ონი ("დაწკაპუნებით", "კარუსელ-ღილაკი მარცხნივ", ფუნქცია () (Var Carousel \u003d $ (ეს) .Parents ("კარუსელი"); left_carusel ( კარუსელი); დაბრუნების ცრუ;); ფუნქცია LEFT_CARUSEL (CARUSEL) (CARUSEL). FIND ("კარუსელ-ბლოკი"). Outerwidth () $ (CARUSEL). FIND (CAROSEL-ITEMS .CAROUSEL-BLOCK "). EQ (1). ). Prependto ($ (Carusel) .Find (Carousel-Items ")) $ (Carusel-Items"); $ ("კარუსელი-ნივთები"). CSS ("მარცხნივ": "-" + Block_width + "PX "); $ (CARUSEL) .FIND (" კარუსელ-ელემენტი .კარუსელ-ბლოკი "). EQ (-1) .REMOVE () $ (CARUSEL) .FIND (" კარუსელ-ელემენტი ") .ნმატი ( (მარცხნივ: "0px"), 200);) ფუნქცია RIGHT_CARUSEL (CARUSEL) (CARUSEL). FIND (CAROUSEL-BLOCK "). Outerwidth () $ (CARUSEL) .FIND (" .Carousel -Items "). animate ((მარცხნივ:" - "+ block_width +" PX "), 200, ფუნქცია () (CARUSEL). FIND (" კარუსელ-ელემენტი "). EQ (0) .Clone () Appendto ($ (Carusel) .Find ("კარუსელი-ნივთები")); $ ("კარუსელი) .მხოლოდ (" კარუსელ-ელემენტი "). EQ (0) .REMOVE () $ ( CARUSEL). FIND ("კარუსელი-ნივთები"). CSS ("მარცხნივ": "0px"));)) $ (ფუნქცია (// / unset string ქვემოთ, რათა შეიცავდეს ავტომატური Scroll Carousel Auto_right (" . კარუსელი: პირველი ");) // ავტო ფუნქცია auto_right (ფუნქცია (თუ (თუ! $ (Carusel) .IS ("Hover")) right_carusel (carusel); ), 3000)) // კურსორი $ CAROUSEL ("დოკუმენტი) .ონი (" Mouseerer "," .კარუსელი ", ფუნქცია () ($ (ეს) .დამატებითი (" Hover "))) // ამოღებულია Cursor Carousel $ (დოკუმენტი) .ონი ("Mouseleve", ".კარუსელი", ფუნქცია () ($ (ეს) .REMOVECLASS ("Hover")))

შესაბამისად, puck შეიძლება ამოღებულ. და გამოიყენოთ თქვენ მხოლოდ უნდა შეცვალოს ძირითადი ერთეულის ზომა და წყობილი "Cropping" ბლოკები. ეს ასევე ძალიან ადვილია ამ პროცესის შესანახად ავტომატურად (IN ეს საქმე, საკმარისია AUTO_RIGHT ფუნქციის მოწოდება). ანუ, შესაძლებელია ამ მარტივი გალერეისგან ყველაფერი, რაც გჭირდებათ ამოცანების ფარგლებში!

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

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

ზოგჯერ სლაიდერი უნდა დაიკავოს ერთი მესამედი საიტის გვერდზე. აქ სლაიდერი - კარუსელი გამოიყენება გარდამავებისა და ადაპტაციური სქემების ეფექტებით. E-Commerce Sites გამოიყენეთ სლაიდერი - კარუსელი ცალკეული პუბლიკაციების ან გვერდებზე სხვადასხვა ფოტოების დემონსტრირება. სლაიდერის კოდი შეიძლება თავისუფლად იქნას გამოყენებული და შეცვლილია საჭიროებების შესაბამისად.

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

Slick - თანამედროვე სლაიდერის მოდული - კარუსელი

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

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

დემო რეჟიმი | ძლეებ

Owl კარუსელი 2.0 - jQuery - მოდული უნარი გამოიყენოს შეხება მოწყობილობები

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

სლაიდერი აქვს რამდენიმე ჩამონტაჟებული plugins, რათა გაუმჯობესდეს საერთო ფუნქციური. ანიმაცია, ვიდეო დაკვრა, სლაიდერი Autorun, Lazy Loading, ავტომატური კორექტირება Heights არის owl კარუსელის 2.0 ძირითადი მახასიათებლები.

მხარდაჭერილი თვისებები drag და წვეთი შედის უფრო მოსახერხებელი გამოყენების plug-in Მობილური მოწყობილობები.
მოდული შესანიშნავია გამოსახულებისთვის დიდი სურათების ჩვენება, თუნდაც მცირე მობილური მოწყობილობების ეკრანებზე.

მაგალითები | ძლეებ

jQuery მოდული ვერცხლის სიმღერა

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

მაგალითები | ძლეებ

Anoslide - ულტრა კომპაქტური ადაპტაციური jQuery სლაიდერი

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

მაგალითები | ძლეებ

Owl კარუსელი - JQuery Slider - კარუსელი

Owl Carousel - სლაიდერი მხარდაჭერა სენსორული ეკრანები და drag და drop ტექნოლოგია, ადვილად აშენდა HTML კოდი. მოდული არის ერთ ერთი საუკეთესო sliders, რომელიც საშუალებას გაძლევთ შექმნათ ლამაზი კარუსელი გარეშე სპეციალურად მომზადებული მარკირების.

მაგალითები | ძლეებ

3D გალერეა - კარუსელი

იყენებს 3D - Transitions საფუძველზე CSS - Styles და პატარა JavaScript კოდი.

მაგალითები | ძლეებ

3D კარუსელი გამოყენებით tweenmax.js და jQuery

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

მაგალითები | ძლეებ

კარუსელი Bootstrap- ის გამოყენებით

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

მაგალითები | ძლეებ

საფუძველზე Bootstrap - ჩარჩო სლაიდერი - მოძრავი ყუთი კარუსელი

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

მაგალითები | ძლეებ

Tiny Circleslider.

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

წრიული რეჟიმში, სლაიდერი საკმაოდ საინტერესოა. შესანიშნავად ხორციელდება მხარდაჭერა drag და drop მეთოდი და სისტემა ავტომატური სენსორული სლაიდები.

მაგალითები | ძლეებ

შინაარსი Slider Thumbelina.

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

მაგალითები | ძლეებ

Wow - სლაიდერი - კარუსელი

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

მაგალითები | ძლეებ

ადაპტური jQuery Baxlider Content Slider

შეცვალეთ ბრაუზერის ფანჯრის ზომა, თუ როგორ ადაპტირებულია სლაიდერი. BxSlider მოდის 50-ზე მეტი ვარიანტით პარამეტრებისათვის და აჩვენებს თავის ფუნქციებს სხვადასხვა გარდამავალი ეფექტებით.

მაგალითები | ძლეებ

jcarousel

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

მაგალითები | ძლეებ

Scrollbox - jQuery მოდული

Scrollbox კომპაქტური მოდული შექმნა სლაიდერი - კარუსელი ან ტექსტი გაშვებული სიმებიანი. ძირითადი ფუნქციები მოიცავს გავლენას ვერტიკალური და ჰორიზონტალური სენსორული პაუზის როდესაც თქვენ hover მაუსის კურსორი.

მაგალითები | ძლეებ

dbpascarousel

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

მაგალითები | ძლეებ

Flexisel: ადაპტური jQuery მოდული სლაიდერი - კარუსელი

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

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

მაგალითები | ძლეებ

Elastislide - ადაპტური სლაიდერი - კარუსელი

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

მაგალითი | ძლეებ

FlexSlider 2.

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

მაგალითი | ძლეებ

საოცარი კარუსელი

საოცარი კარუსელი - ადაპტური სლაიდერი სურათები jQuery. მხარს უჭერს ბევრ საიტს მართვის სისტემებს, როგორიცაა WordPress, Drupal და Joomla. ასევე მხარს უჭერს Android და iOS და Desktop პარამეტრები ოპერაციული სისტემების გარეშე თავსებადობის საკითხები. ჩამონტაჟებული საოცარი კარუსელის თარგები საშუალებას გაძლევთ გამოიყენოთ სლაიდერი ვერტიკალური, ჰორიზონტალური და წრიული რეჟიმებით.

მაგალითები | ძლეებ

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

1. Bootstrap Ambilight Slider

Bootstrap Ambilight Slider. - მოდული შექმნა sliders / carousels ერთად ეფექტი მიმდებარე glow და bootstrap ფუნქციონირება.

2. JQuery TouchSwipe კარუსელი

jQuery.-პლაგინი TouchSwipe კარუსელი საშუალებას გაძლევთ განსაზღვროთ სენსორული ეკრანი და მაუსის ღილაკზე დაჭერით.

3. ელემენტი.

Itemslide.js. წარმოადგენს jQuery.-პლოგინის შექმნა კარუსელის შექმნა, რომელიც იმუშავებს როგორც Desktop PC- ებს და მობილურ სენსორულ მოწყობილობებზე.

4.

– jQuery.-პლაგინი, რათა შეიქმნას ადაპტური კარუსები / სლაიდერები.

5.

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

6. Silvertrack

Silvertring – jQuery.- პლანგინი გაფართოების შესაძლებლობით. შედგება პატარა ბირთვიდან, რომელიც შეიძლება დაკავშირებული იყოს მოსახერხებელი დანამატების არჩევანს.

7. owl კარუსელი 2

Owl კარუსელი 2. - სრულად ადაპტური კარუსელი jQuery / zepto. სენსორული ეკრანების მხარდაჭერით.

8. Utilcarousel

Utilcarousel - Ჩართვა შეერთება. jQuery.-Crules ს გლუვი გადასვლებიგანახორციელეს აპარატურის აჩქარება. ის სრულად ადაპტირებულია. მოდული მხარს უჭერს სენსორული ეკრანებს, და ის იყენებს სამგანზომილებას CSS3.- აპარატურის აჩქარების ანიმაცია. მადლობა ამ, მოდული გამოიყურება კარგი როგორც desktop კომპიუტერები და მობილური მოწყობილობები. Მართო Utilcarousel თქვენ შეგიძლიათ დახმარებით გრძნობები, ნავიგაცია ან მაუსის საჭე.

9. Slick.

Გლუვი. ეს ადაპტირებულია jQuery.Schever, რომელშიც არსებობს ყველაფერი, რაც შეიძლება საჭირო.

10. Codingjack 3D კარუსელი

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

11. JQuery სლაიდშოუ.

jQuery სლაიდშოუ. ეს არის კარუსელი და სლაიდერი, რომელიც ხელს უწყობს ჟესტების კონტროლის მხარდაჭერას. მოდულის არქივი მხოლოდ 2 კილომეტრს იწონის.

12. Flimroll.

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

13. Tikslus

Tikslus. წარმოადგენს მთლიანად ადაპტური კარუსელი ზე jQuery. ბევრი ფუნქციები და თვისებები. და მაღალი ადაპტირება მოდული საშუალებას გაძლევთ არ დააკონკრეტა ზომა გამოსახულებები. გარდა ამისა, აღსანიშნავია თვითნებური ანიმაციის მხარდაჭერა CSS3.- კლასები. Tikslus. შეიძლება გამოყენებულ იქნას მოდული JQuery mobile..

14. Scrollbox

Scrollbox. - მარტივი, მინიატურა jQuery.- პლაგინი, რომელიც ჩამოდის სიებს კარუსელში ან გაშვებული სიმებიანი.

15. Sky Touch Carousel

Sky Touch Carousel - Ჩართვა შეერთება. jQuery.ფუნქციებით მდიდარი კომპლექტით. ადაპტური მოდული, მხარს უჭერს Touch Screens, და ამავე დროს მუშაობს სწრაფად და შეუფერხებლად. პარამეტრები საშუალებას გაძლევთ შეცვალოთ კარუსელის გამოჩენა CSS..

16.

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