Js სურათები sliders. მაგალითები უფასო jQuery sliders for images

ის ადაპტური შეხება სლაიდერი დაწერილი jQuery. ამ მოდულის ძრმში, CSS3 ანიმაცია გამოიყენება, მაგრამ ამავე დროს, ფოლბლები მოცემულია ბრაუზერების ძველი ვერსიებისთვის. Glide.js არის მარტივი და მარტივი.

გამოყენება

1. დაკავშირება jQuery

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

2. დაკავშირება glide.js.

3. დამატება HTML

დაკავშირება ძირითადი სტილის.

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

4. ინიციალიზაცია

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

... ან სრულყოფილი იგი თავს

შეხვედრა

ხელმისაწვდომი პარამეტრების ჩამონათვალი:

Პარამეტრი	ნაგულისხმევი მნიშვნელობა	Ტიპი	აღწერილობა
ავტომატური ჩართვა	4000	int / bool	ავტომატური კონტრაქტი (ყალბი გამორთვა)
hoverpause.	მართალია.	ბული	შეაჩერე ავტომატური კონტრაქტი, როდესაც თაგვის სლაიდზე
ანიმაცია.	500	int.	! ეს ვარიანტი მუშაობს, თუ ბრაუზერი არ უჭერს CSS3. თუ CSS3 მხარს უჭერს ბრაუზერს, მაშინ ეს პარამეტრი უნდა შეიცვალოს V.CSS ფაილი !!!
ისრებით.	მართალია.	bool / string.	აჩვენე / დამალვა / მიამაგრეთ ისრები. სიმართლე აჩვენებს ისრის სლაიდერულ კონტეინერში. ყალბი დამალვა. თქვენ ასევე შეგიძლიათ მიუთითოთ კლასი კლასი (მაგალითად: ".Class-სახელი") სპეციალური HTML კოდი
arrowswrapperclass	სლაიდერი-ისრები.	სიმი	კლასი, რომელიც კონტეინერს მიანიჭებს ისრებით
arrowmainclass.	სლაიდერი-ისარი	სიმი	მთავარი კლასი ყველა ისრისთვის
arrowrightclass	slider-Arrow - უფლება	სიმი	კლასი მარჯვნივ arrow
arrowleftclass	slider-Arrow - მარცხენა	სიმი	მარცხენა arrow კლასი
arrowrighttext	შემდეგ	სიმი	ტექსტი მარჯვენა ისარი
arrowleftext	წინა	სიმი	მარცხენა arrow ტექსტი
ნავი.	მართალია.	bool / string.	აჩვენეთ / დამალვა / ნავიგაციის ნავიგაცია. მართალია ჩვენება. ყალბი დამალვა
navencer.	მართალია.	ბული	ნავიგაცია ცენტრებით
navclass.	სლაიდერ-ნავი.	სიმი	კლასი ნავიგაციის კონტეინერისთვის
navitemclass	სლაიდერი- nav__Item.	სიმი	ნავიგაციის ელემენტის კლასი
navcurrentitemclass	slider-Nav__Item - მიმდინარე	სიმი	კლასი მიმდინარე სანავიგაციო ელემენტს
კლავიატურა.	მართალია.	ბული	გადახვევა მეშვეობით slide როდესაც თქვენ დააჭირეთ მარცხენა / მარჯვენა ღილაკები
touchdistance.	60	int / bool	შეხება (შეხება) მხარდაჭერა. ცრუ გამორთვა ეს ფუნქცია.
წინასწარმეტყველება.	ფუნქცია ()	ფუნქცია.	Sollars, რომელიც დაიწყება ადრე საწყისი მოდული
afterinit.	ფუნქცია ()	ფუნქცია.	სოლარი, რომელიც დაიწყება მოდულის ინიციალიზაციის შემდეგ
beforetransition	ფუნქცია ()	ფუნქცია.	Skolkk, რომელიც დაიწყება ადრე სენსორული სლაიდერი
შემდგომში.	ფუნქცია ()	ფუნქცია.	Squake, რომელიც დაიწყება შემდეგ სენსორული სლაიდერი

Api.

გამოიყენოს API, დაწერეთ ცვლადი.

Var Glide \u003d $ ("Slider"). Glide (). მონაცემები ("API_GLIDE");

ახლა API მეთოდები ხელმისაწვდომია თქვენთვის.

Glide.jump (3, console.log ("Wooo!"));

.კურარი () - ბრუნდება ამჟამინდელი მხარის რაოდენობას
.თამაში () - დაწყება ავტომატური კონტრაქტი
() - შეაჩერე ავტომატური კონტრაქტი
Next (Callback) - თევზი სლაიდერი წინ
.ფასი (Callback) - სლაიდერი უკან
.Jump (მანძილი, ზარი) - გადავიდეთ კონკრეტულ სლაიდზე
.NAV (სამიზნე) - მიამაგრეთ ნავიგაცია კონკრეტულ პუნქტზე (მაგალითად: "სხეული", ".კლასი", "#id")
.როგორც (სამიზნე) - მიუთითეთ ისრები კონკრეტული ელემენტისთვის (მაგალითად: "სხეული", ".კლასი", "#id")

მარტივი, მსუბუქი (21KB შეკუმშული ფორმით) Slider დაწერილი Pure JavaScript არ აქვს რაიმე დამოკიდებულება, ანუ. მუშაობს jQuery გარეშე.

ტესტირება შემდეგ ბრაუზერებში:

Chrome 26.0.
Firefox 20.0.
Safari 5.1.7
ანუ 10.
ოპერის 16.0.

IE8 / 9 (არანაირი ეფექტი) არასრული მხარდაჭერაა.

მახასიათებლები

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

კავშირი

დახურვის ტეგიამდე თქვენ უნდა დააკავშიროთ slidr.js. ან slidr.min.js. ფაილი.

HTML მარკირება

slidr.js. მას შეუძლია მუშაობა ნებისმიერ inline, inline-block, ბლოკი ელემენტი, რომ აქვს id ატრიბუტი. მას უფლება აქვს გამოიყენოს ნებისმიერი ქალიშვილის ელემენტები მონაცემთა Slidr ატრიბუტით, მაგალითად:

ვაშლი.
ბანანი.
ქოქოსის.

ვაშლი.

ბანანი.

ქოქოსის.

JavaScript.

კავშირის შემდეგ slidr.js. გლობალური Slidr ობიექტი ხელმისაწვდომი იქნება. მარტივი გზა შექმნა Slidr:

Slidr.create ("Slidr-ID"). დაწყება ();

დარეკეთ ყველა პარამეტრის ამოცანას:

Slidr.Create ("Slidr-ID" (შემდეგ: ფუნქცია (e) (Console.Log (":" + E.in.slidr);), ადრე: ფუნქცია (E) (Console.log ("Out:" + Emout.slidr);), breadcrumbs: TRUE, Controls: "Corner", მიმართულება: "ვერტიკალური", Fade: FALSE, კლავიატურა: TRUE, Overflow: True, თემა: "# 222", დრო: (Cube ":" 0.5s Ease-in "), Touch: True, გარდამავალი:" Cube ")). დაწყება ();

შეხვედრა

ყველა არსებული პარამეტრების Slidr.js ნაჩვენებია ცხრილში ქვემოთ.

Პარამეტრი	Ტიპი	მდუმარე.	აღწერა.
შემდეგ	ფუნქცია.		callback ფუნქცია შეცვლის შემდეგ slide
ადრე.	ფუნქცია.		callback ფუნქცია შეცვლის slide
Breadcrumbs.	ბული	ცრუ	სლაიდების კონტროლის პურის ნამსხვრევების ჩვენება. ჭეშმარიტი ან ცრუ.
კონტროლი.	სიმი	სასაზღვრო.	ისრის ადგილმდებარეობა სლაიდების კონტროლი. საზღვარი, კუთხე ან არცერთი.
მიმართულება.	სიმი	ჰორიზონტალური	ნაგულისხმევი მიმართულება ახალი სლაიდებისთვის. ჰორიზონტალური ან H, ვერტიკალური ან v.
ჭკნობა	ბული	მართალია.	გააქტიურეთ სლაიდების ცვლილების შემცირება (Fade-in / out). ჭეშმარიტი ან ცრუ.
კლავიატურა.	ბული	ცრუ	ჩართეთ ტკბილეულის ცვლა კლავიატურაზე. ჭეშმარიტი ან ცრუ.
Overflow.	ბული	ცრუ	საშუალებას აძლევს ზედმეტი ბლოკს სლაიდერით. ჭეშმარიტი ან ცრუ.
შესვენება	ბული	ცრუ	არ შეცვალოთ სლაიდები ავტომატურად, როდესაც თქვენ hover მაუსი (თქვენ უნდა დაიწყოს ავტო ()). ჭეშმარიტი ან ცრუ.
თემა.	სიმი	#FFF.	კონტროლის ელემენტების ფერი სლაიდერი (პურის ნამსხვრევები და ისრები). #Hexcode ან RGBA (ღირებულება).
Დროის განაწილება	ობიექტი.	{}	საბაჟო ანიმაციური დროების გამოყენება. ("გარდამავალი": "დრო").
შეხება	ბული	ცრუ	Touch Touch Management მობილური მოწყობილობებზე. ჭეშმარიტი ან ცრუ.
Გარდამავალი.	სიმი	წრფივი	შეცვლის სლაიდების ეფექტი. კუბი, წრფივი, ქრებოდა ან არცერთი.

საპირისპირო ზარის ფუნქციები შემდეგ და შემდეგ მიიღებთ შემდეგ მონაცემებს:

(ID: "Slidr-ID", In: (el: # , Slidr: "მონაცემთა Slidr-in", ტრანს: "გარდამავალი- in", რეჟისორი: "მიმართულება- in"), out: (el: # , Slidr: "მონაცემთა Slidr-Out", ტრანს: "გარდამავალი- out", რეჟისორი: "მიმართულება- out"))

Slider.js გლობალური API.

გლობალური Slidr Namespace უზრუნველყოფს შემდეგ ფუნქციებს:

/ ** * მიმდინარე ვერსია * @Return (სიმებიანი) major.minor.patch. * / ფუნქციის ვერსია (); / ** * ხელმისაწვდომი გარდამავალი ეფექტები. * ტრანზიტების @ Return (მასივი). * / ფუნქციის გადასვლები (); / ** * ქმნის და დააბრუნებს სლაიდერს. * ამ ფუნქციის დარეკვა ორჯერ იმავე ელემენტზე დაბრუნდება უკვე შექმნილი Slidr ობიექტი. * @ PARAM (სიმებიანი) ელემენტის ID ამისთვის Slidr. * @ PARAM (Object \u003d) Opt_Settings პარამეტრები სლაიდერი. * / ფუნქცია შექმნა (ID, Opt_Settings) ();

სლაიდერი API

// Slidr ინიციალიზაცია მისი var s \u003d slidr.create პარამეტრები ("Slidr-API-Demo", (Breadcrumbs: True, Overflow: True); // დამატება ჰორიზონტალური სლაიდები სტანდარტული გარდამავალი ეფექტით. // "ერთი" მასივის დუბლირების ელემენტი ბოლოს ლიფტების Slidr // Slide სლაიდები უსასრულოდ S.Add ("H", ["ერთი", "ორი", "სამი", "სამი", "ერთი"]); / / დაამატეთ ვერტიკალური სლაიდი "კუბურ" გარდამავალ ეფექტს. S.Add ("V", ["ხუთი", "ოთხი", "სამი", "ხუთი"], "კუბი"); // აწარმოებს სლაიდერს. S.Start ();

მოკლე პოსტი

Var s \u003d slidr.create ("Slidr-API-Demo", (Breadcrumbs: True, Overflow: True)). დამატება ("H", ["ერთი", "ორი", "სამი", "ერთი"]) .დამატებითი ("V", ["ხუთი", "ოთხი", "სამი", "ხუთი"], "კუბი") .start ();

ქვემოთ მოყვანილია Slidr.js API ფუნქციის სრული სია.

/ ** * Slidr- ის დაწყება! * ავტომატურად აღმოაჩენს სლაიდების შესაქმნელად, თუ არაფერი დაემატა დაწყებამდე (). * @ PARAM (სიმებიანი) Opt_start `მონაცემების Slidr` id დაიწყება. * @Return (ეს) * / ფუნქცია დაწყება (opt_start) (); / ** * შეამოწმეთ თუ არა ჩვენ slide. * @ PARAM (სიმებიანი) შემდეგი მიმართულებით ("up", "ქვემოთ", "მარცხნივ", "უფლება") ან `მონაცემების Slidr` ID. * @ Return (ლოგიკური) * / ფუნქცია გაუქმება (შემდეგი) (); / ** * slide! * @ PARAM (სიმებიანი) შემდეგი მიმართულებით ("up", "ქვემოთ", "მარცხნივ", "უფლება") ან `მონაცემების Slidr` ID. * @ return (ეს) * / ფუნქცია slide (შემდეგი) (); / ** * დასძენს კომპლექტი სლაიდები. * @ PARAM (სიმებიანი) მიმართულება `ჰორიზონტალური || H` ან `ვერტიკალური || `. * @ Param (array) ids `data-slidr` id 's Slidr- ის დამატება. სლაიდები უნდა იყოს Slidr- ის პირდაპირი შვილები. * @ Param (string \u003d) Opt_Transition- ს გადასვლა, რომელიც გამოიყენება სლაიდების ან გამოყენებისას Default. * @ Param (boolean \u003d) opt_overwrite თუ არა არსებული სლაიდების მოპოვების / გადასვლები, თუ კონფლიქტები მოხდება. * @Return (ეს) * / ფუნქცია დამატება (მიმართულებით, პირადობის მოწმობა, opt_transition, opt_overwrite); / ** * ავტომატურად წინასწარ მომდევნო სლაიდზე გარკვეული დროის შემდეგ. ზარები დაწყების () თუ არ არის უკვე მოუწოდა. * @ PARAM (INT \u003d) OPT_MSEC- ს თითოეული სლაიდის გარდამავალ ნაწილს შორის. 5000 (5 წამში). * @ Param (string \u003d ) Opt_Direction "Up", "Down", "მარცხნივ", ან "მარჯვენა". "უფლება". * @ Param (string \u003d) opt_start `` მონაცემების Slidr` id დაიწყება (მხოლოდ მუშაობს, თუ ავტომატური მოუწოდა Startr). * @Return (ეს) * / ფუნქცია ავტო (opt_msec, opt_direction, opt_start); / ** * შეაჩერე ავტო გარდამავალი, თუ ის "ჩართულია. * @Return (ეს) * / ფუნქციის გაჩერება (); / ** * დააყენეთ საბაჟო ანიმაციური დრო. * @ Param (string | ობიექტი) გარდამავალი ან გარდამავალი სახელი (მაგ. "კუბი"), ან ("გარდამავალი": "დრო") ობიექტი. * @ Param (string \u003d) Opt_timing ახალი ანიმაციური დრო (i.e "0.5s ease-in"). არ არის საჭირო, თუ გარდამავალი ობიექტია. * @Return (ეს) * / ფუნქციის დრო (გარდამავალი, opt_timing) (); / ** * toggle breadcrumbs. * @ return (ეს) * / ფუნქცია breadcrumbs (); / ** * გადართვა კონტროლი. * @ param (string \u003d) opt_scheme toggle opt_scheme toggle on / off თუ არ არის, სხვა შეცვლის განლაგება. "საზღვარი", `კუთხე` ან` არც`. * @Return (ეს) * / ფუნქციის კონტროლი (opt_scheme) ();

Scroll გვერდი სლაიდების დროს

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

სხეული (overflow: დამალული;)

დინამიური ზომა ცვლილება

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

ავტომატური ზომა ცვლილება

კარგი.

gorgeous.

დაუჯერებელი

სტატიკური ზომები

კარგი.

gorgeous.

დაუჯერებელი

კონტროლის ელემენტები Slidr.

კონტროლის მარკირება შემდეგი:

თქვენ შეგიძლიათ CSS- ის სელექტორების გამოყენებით სლაიდერის კონტროლის ნებისმიერი ელემენტის მორგება:

განზე .Slidr-Control.Right (სიგანე: 50px! მნიშვნელოვანია, სიმაღლე: 50px! მნიშვნელოვანია: 50%! მნიშვნელოვანია; მარჟის ზედა: -25px! მნიშვნელოვანია: -25px! მნიშვნელოვანია, სასაზღვრო რადიუსი: 25px; : URL ("/ სტატიკური / სურათები / arrow_right.png") 14px 13px არ განმეორებითი შავი; opacity: 0.4;) განზე .Slidr-Control.Right: Hover (Opacity: 1;)

"Arrow" კონტროლი ხორციელდება ფსევდო სელექტორის გამოყენებით: შემდეგ, ასე რომ დამალვა, გამოიყენეთ შემდეგი კოდი:

/ / დამალვა ერთი arrow ფარგლებში ერთი კონტროლერი. გარდა .slidr-control.right: შემდეგ (სასაზღვრო ფერი: გამჭვირვალე! მნიშვნელოვანია;) // დამალვა ყველა ისრის ფარგლებში ერთი კონტროლერი. განზე .Slidr-Control: შემდეგ (სასაზღვრო ფერი: გამჭვირვალე! მნიშვნელოვანია) // დამალვა ყველა Slidr ისრებით. განზე .Slidr-Control: შემდეგ (სასაზღვრო ფერი: გამჭვირვალე! მნიშვნელოვანია;)

პურის crumbs slidr.

პურის crumbs აქვს მარტივი HTML მარკირება. თითოეული ul ul აღნიშნავს მთელი სიმებიანი, და თითოეული li ცალკე პური crumb:

პურის ნამსხვრევების სტილიზაცია CSS- ით:

// Customize პოზიცია, ზომა, სასაზღვრო ფერი და ფონის ფერი. გარდა (მარჯვნივ: 50%! მნიშვნელოვანია, ზღვარი მარჯვნივ: -41px! მნიშვნელოვანია;) განზე.) განზე. Li.Normal (სასაზღვრო ფერი: თეთრი! მნიშვნელოვანია;) განზე .Slidr-Breadcrumbs Li.Activeve (ფონის ფერი: შავი!

ნებართვა

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

საჭიროა მარტივი სლაიდერი ავტომატური სენსორებით. მოიყვანეთ ...

სლაიდერის მუშაობის აღწერა.

სლაიდები აშენდება ხაზში, და გარკვეული დროის შემდეგ იქნება scrolled.

წითელი ჩარჩო გვიჩვენებს სლაიდერის ხილულ ნაწილს.

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

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

HTML მარკირება

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

> >

სტილის სლაიდერი

.slider-box (სიგანე: 320px; სიმაღლე: 210px; overflow;) .Slider (პოზიცია: ნათესავი სიგანე: 10000px; სიმაღლე: 210px;) .Slider img (float: მარცხენა, z-index

Container.Slider-Box ადგენს სლაიდერის ზომებს. გამოყენება overflow: დამალული ქონება, ყველა ელემენტები დამალულია, რომელიც არ შედის ტერიტორიაზე შიგნით ელემენტს.

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

სლაიდები შეესაბამება float: მარცხენა ქონება.

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

ხელწერა

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

$ (ფუნქცია () (var width \u003d $ ("Slider-Box") .ვიდი (); // სიგანე სლაიდერი. ინტერვალი \u003d 4000; / / სლაიდების ცვლილების ინტერვალი. $ ("Slider IMG: ბოლო") .Clone () .პრაციონალური (".slider"); / / ბოლო სლაიდის ასლი თავდაპირველად განთავსდება. $ () .eq (1) .Clone () .Appendto (".slider"); / / პირველი სლაიდის ასლი დასასრულს მოთავსებულია. // კონტეინერი. სლაიდერი ცვლაში დარჩა სიგანე ერთი სლაიდი. Setinterval ("ანიმაცია ()", ინტერვალი); / / ანიმაცია () ფუნქცია დაიწყო slide shift. )); ფუნქცია ანიმაცია () (var margin \u003d parseint ($ ("Slider") .css ("Marginleft")); // მიმდინარე ბლოკი offset.slider სიგანე \u003d $ ("Slider-Box") .width () // სიგანე სლაიდერი. Slidersamount \u003d $ ("Slider") .ბავშვები (). / / სლაიდების რიცხვი სლაიდერში. თუ (ზღვარი! \u003d (- სიგანე * (slidersamount-1))) / / თუ მიმდინარე slide არ არის ბოლო, (ზღვარი \u003d ზღვარი; / / ზღვრის ღირებულება მცირდება სლაიდების სიგანეზე. ) სხვაგან ( / / თუ უკანასკნელი სლაიდი ნაჩვენებია, $ ("Slider") .css ("ზღვარი მარცხნივ", - სიგანე); / / შემდეგ Block.Slider დაბრუნდება თავდაპირველი პოზიცია, ზღვარი \u003d - სიგანე * 2; ) $ ("სლაიდერი") .მუხალი (მარგინალური: ზღვარი), 1000); // block.slider ცვლაში დარჩა 1 slide. } ;

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

დრო არ დგას მასთან და პროგრესთან. ეს დაზარალდა ინტერნეტის ხარჯებს. უკვე ხედავთ, როგორ იცვლება საიტების გამოჩენა, ადაპტური დიზაინი განსაკუთრებით პოპულარულია. და ამასთან დაკავშირებით არ იყო პატარა ახალი ადაპტური jquery sliders, გალერეები, კარუსელები ან მსგავსი დანამატები.
1. საპასუხო ჰორიზონტალური პოსტები სლაიდერი

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

2. სლაიდერი glide.js

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

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

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

4. Slider გამოყენებით HTML5 ტილო

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

5. Slider "Morphing images"

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

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

სლაიდერი სახით წრეში გამოსახულების გადატრიალების ეფექტით.

7. სლაიდერი ბუნდოვანი ფონით

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

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

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

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

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

10.Free ანიმაციური საპასუხო გამოსახულების ქსივი

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

11. FlexSlider.

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

12. Photorama

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

P.S.განათავსეთ სლაიდერი რამდენჯერმე და მჯერა, რომ ის არის ერთ-ერთი საუკეთესო

13. უფასო და ადაპტური 3D გალერეა-სლაიდერი მინიატურებით.

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

14. სლაიდერი CSS3- ზე

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

15. Wow Slider.

Wow slider.- ეს არის სურათების სლაიდები განსაცვიფრებელი ვიზუალური ეფექტებით.

17. ელასტიური

ელასტიური სლაიდერი სრული ადაპტაციისა და მინიატურების სლაიდებით.

18. slit.

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

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

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

20. ადაპტური სლაიდერი WordPress

ადაპტური უფასო სლაიდერი WP.

21. პარალექსის შინაარსი სლაიდერი

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

22. სლაიდერი მუსიკის სავალდებულოა

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

23. სლაიდერი ერთად jmpress.js

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

24. სწრაფი Hover სლაიდშოუ

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

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

Accordion სურათები CSS3.

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

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

27. 3D გალერეა

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

28. სლაიდერი ერთად pagination

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

29. Montage ერთად jQuery

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

30. 3D გალერეა.

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

31. სრული ეკრანის რეჟიმი 3D ეფექტი CSS3 და JQuery

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

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

შეხედეთ 20 jquery sliders საწყისი Envato Market ნახვა, და თქვენ გესმით, რომ არსებობს sliders, რომლებიც უფრო მეტი ვიდრე მხოლოდ ბლოკი ერთად შეუფერხებლად შეცვლის გამოსახულებები.

1. Royalslider - სენსორული გამოსახულება გალერეა jQuery

ახლა ადაპტური სლაიდერი ასევე არის მეგობრული ეკრანებზე, ეს იმას ნიშნავს, ვიდრე ადრე. Royalslider აერთიანებს ორივე ფუნქციებს: ადაპტირება და მუშაობა Touch Screens. კარგი არჩევანი, როგორც გალერეა დაწერილია HTML5 და CSS3- ზე.

რამდენიმე საინტერესო თვისება:

JavaScript. სწრაფი დაწყება

SEO ოპტიმიზაცია

მაღალი Customizability

მეტი 10 საწყისი შაბლონები

არსებობს FOLBACK FOR CSS3 TRANSIONS

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

2. სლაიდერი რევოლუციის ადაპტური jQuery მოდული

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

სლაიდერის თვისებების ჩამონათვალი იმდენად დიდია, ამიტომ ჩამოვლენ მხოლოდ მოსტს:

Pararallax ეფექტი და საბაჟო ანიმაცია

შეუზღუდავი რაოდენობის ფენები და სლაიდები მითითებით

მზად არის გამოიყენოთ, ღრმა საბაჟო სტილის

და უფრო მეტი

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

3. Layerslider ადაპტური jQuery მოდული სლაიდერი

სახელით "Layerslider Adaptive JQuery Plugin Slider" არ შეუძლია ამ სლაიდერის შეფასება.
200+ 2D და 3D Transitions შორის სლაიდები გემების ვინმეს შორის.

რამდენიმე შესანიშნავი ფუნქცია:

13 ტყავი და 3 მენიუს ტიპები

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

და jquery fallbek

Და უფრო მეტი

როგორც წინა სლაიდერით, თქვენ შეგიძლიათ დაამატოთ თითქმის ნებისმიერი შინაარსი, თუნდაც HTML5 მულტიმედიური შინაარსი. Layerslider აღორძინების sliders, გარდა ამისა, ეს ძალიან ლამაზია.

4. JQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow არის საკმაოდ მარტივი სლაიდერი, რომელიც არ შესწირავს ძირითად ფუნქციებს.

შესაძლებლობები:

Tultty, ტექსტი ჩანართები და ა.შ.

Previews და სხვადასხვა პარამეტრები ნახვის კომპონენტები

ტაიმერი ერთი სლაიდერის დაგვიანებით ან ყველა

ყველა სლაიდების მრავალრიცხოვანი გადასვლები თითოეული ცალკე ცალკე

jQuery Banner Rotator / Slideshow შედარებით სხვა jquery sliders აქვს მხოლოდ ძირითადი შესაძლებლობები, მაგრამ არ დაივიწყოს ამის შესახებ.

5. ყველა ერთ სლაიდერში - ადაპტური jQuery სლაიდერი მოდული

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

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

Rotator ბანერები

ბანერი გადახედვისას

ბანერი კრებული

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

კარუსელი

ყველა ტიპის sliders მხარს უჭერს უმრავლესობას ფუნქციონირება, თუ არა ყველა რომ საჭიროა jQuery sliders. იქნება ყველა სლაიდერი გახდება თქვენი "ყველა ჩათვლით"?

6. Unoslider - ადაპტური სენსორული ეკრანი სლაიდერი

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

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

მხარდაჭერა თემა

12 მზა თემატიკა

40 გადასვლები

IE6 + მხარდაჭერის მხარდაჭერა

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

7. სამაგისტრო სლაიდერი - JQuery TouchScreen Slider

ვეძებთ "ერთი jQuery სლაიდერი ყველასთვის"? სცადეთ სამაგისტრო სლაიდერი - jquery touchscreen სლაიდერი სხვადასხვა ეკრანზე ზომის ...

როდესაც საქმე კარგ დიზაინს ეხება, ეს ინსტანცია ერთ-ერთი საუკეთესოა:

25-ზე მეტი თარგები

აპარატურა აჩქარების გადასვლები

მხარდაჭერა შეხება და svaypov

Და უფრო მეტი

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

8. Touchcarousel - JQuery Content Scroller და Slider

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

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

SEO ოპტიმიზაცია

Smart avto თამაში

CSS3 აპარატურის აჩქარების გადასვლები

დააკონფიგურიროთ UI და 4 ტყავი Photoshop- ისთვის

TouchCarousel გამო მისი უნიკალური ფიზიკური გადახვევა სლაიდები ეს არის სრულიად ახალი დონის შეგრძნებები მობილური მოწყობილობები.

9. Advanced Slider - JQuery XML სლაიდერი

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

HTML ან XML- ის მარკირებით, ეს მოწინავე სლაიდერი აქვს indelible შთაბეჭდილება:

ანიმაციური ფენები და ჭკვიანი ვიდეო

100+ გადასვლები და 150+ საბაჟო თვისებები

15 სკინები სლაიდერისთვის, 7 სკინით Scrollbar და ჩაშენებული მხარდაჭერის მსუბუქი

ნავიგაცია კლავიატურაზე, მხარდაჭერით გრძნობების და სრული Customizability

Და უფრო მეტი

თუმცა, საუკეთესო ფუნქცია არის მოწინავე სლაიდერი - jQuery XML სლაიდერი API, რაც თქვენი ვებ აპლიკაციის სლაიდერის სრულ ვარიანტებს ქმნის.

10. JQuery Slider Zoom in / out ეფექტი სრულად რეაგირება

ერთი იმ jquery sliders, რომ თქვენ ხედავთ დემო სანამ დაიწყება კითხულობს მისი შესაძლებლობები. თქვენ უბრალოდ გვინდა, გავიგოთ, რა "zoom in / out ეფექტი" ნიშნავს.

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

CSS3 Transitions შორის Layers

ანიმაციური დასასრული პარამეტრი ფენებისათვის

ფიქსირებული სიგანე პარამეტრები, სრული ეკრანი და ყველა სიგანე

ანიმაციური ტექსტი HTML და CSS ფორმატში

ყველაზე sliders ცდილობენ წარმოიდგინოთ იმდენი ეფექტი, რაც შეიძლება მეტი ეფექტი, და jQuery სლაიდერი zoom in / out ეფექტი სრულად რეაგირება არსებობს მხოლოდ ეფექტი კენ დამწვრობის, მაგრამ კარგად ხორციელდება.

11. jQuery კარუსელის ევოლუცია

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

JavaScript. სწრაფი დაწყება

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

სურათებით, HTML Markup, YouTube და Vimeo ვიდეო ასევე მიიღებთ:

SEO ოპტიმიზაცია

კარუსელის 9 სტილი

ჩრდილებისა და ასახვის შედეგები

გამოსახულების ზომა კონფიგურირებული იქნება, როგორც წინა და უკანა

jQuery Carousel Evolution არის მარტივი კარუსელი ბევრი გამოყენების ვარიანტი.

12. Sexy Slider.

Sexy Slider არ არის ასე sexy როგორც ადრე. თუმცა, მისი ასაკის გამო, ეს სლაიდერი იმსახურებს ნდობას.

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

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

ხელმოწერები სურათებისათვის

უწყვეტი სათამაშო სლაიდები

6 გარდამავალი ეფექტი

Sexy Slider გელოდებათ გახსნას ყველა მისი ძალა და გამოავლინოს პოტენციალი.

13. JQuery Image & Content Scroll W / Lightbox

ყველა ამ დიზაინით მობილური მოწყობილობებისთვის და სენსორული ეკრანების მხარდასაჭერად, სასიამოვნოა, რომ ნახოთ jQuery სლაიდერი, რომელმაც არ დაივიწყოს კომპიუტერის კომპიუტერები.

jQuery Image & Content Scroll W / Lightbox მხარს უჭერს შეყვანის კლავიატურის და თაგვის წამყვანი, ისევე როგორც სხვა მახასიათებლები:

ჰორიზონტალური და ვერტიკალური ორიენტაცია

ტექსტური ხელმოწერები შიგნით ან გარეთ სლაიდერი

უნარი შექმნას გარკვეული რაოდენობის შესაბამისი სლაიდები

ჩამონტაჟებული სურათები, Flash, iFrame, Ajax და Inline Content

ასევე სლაიდერში არის ჩაშენებული მსუბუქი. სურვილისამებრ, თქვენ არ შეგიძლიათ აწარმოოთ სლაიდერი თავად jQuery image & content scroller w / lightbox, მაგრამ ცალკე აწარმოებს Lightbox.

14. translucent - ადაპტური rotator ბანერები / სლაიდერი

ყველაზე jQuery sliders აქვს საკუთარი დიზაინი. თქვენ შეგიძლიათ დააკონფიგურიროთ იგი თქვენთვის, მაგრამ ზოგჯერ მხოლოდ სლაიდერის შიგნით. გამჭვირვალე წარმოდგენილია თქვენს ყურადღებას.

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

6 სხვადასხვა სტილის

4 გარდამავალი ეფექტი

2 Swatch Transitions

დააკონფიგურიროთ ღილაკები და ხელმოწერები

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

15. FSS - სრული ეკრანის მოცურების ნახვა მოდული

გნებავთ სრულ ეკრანზე, რომელიც შედგება სლაიდებისგან? მაშინ გჭირდებათ FSS.

სინამდვილეში, ამ jQuery სლაიდერის გამოყენებით ძალიან მარტივია ეკრანის სლაიდერის შექმნა. შესაძლებლობები:

AJAX მხარდაჭერა

Scrollbar

ღრმა დამაკავშირებელი ტექნოლოგიების მხარდაჭერა

2 სხვადასხვა გარდამავალი ეფექტი

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

16. Zozo Accordion - ადაპტური სენსორული სლაიდერი

კიდევ ერთი მაგალითია jQuery Slider ფოკუსირებული სტილის, და ვინ ასრულებს კარგად მათი მუშაობა. Zozo Accordion არის საჭირო მათ მიერ, ვინც ეძებს კარგი სლაიდერი- accorder უნარი შეცვალოს სტილის.

ეს სილამაზე CSS3 ანიმაციით ასევე აქვს ფუნქციების საკმაოდ ფართო სპექტრი:

ჰორიზონტალური და ვერტიკალური აკორდეონი

სემანტიკური HTML5 და SEO ოპტიმიზაცია

მხარდაჭერა Touch, კლავიატურა და Wai-Aria

მეტი 10 ტყავი და 6 ფორმატისთვის

Და უფრო მეტი

Zozo Accordion აქვს უფასო მხარდაჭერა და მუდმივი განახლებები, ისევე როგორც ყველა ფუნქცია გსურთ იხილოთ jQuery აკორდეონი.

17. JQuery Responsive Onebyone Slider მოდული

jQuery Responsive Onebyone Slider მოდული გამოიყურება უფრო მარტივი ანიმაცია, არ სლაიდერი. იმის ნაცვლად, რომ ერთი სლაიდის ჩვენება, ეს მაგალითი ეტაპობრივად შეავსებს ეკრანს სლაიდებით, ხოლო ადგილი არ არის ადგილი და მხოლოდ შემდეგ მიდის მომდევნო სლაიდთან.

CSS3 ანიმაცია მუშაობს animate.css, ეს არის მსუბუქი, შედგება რამდენიმე ფენა და მეგობრული მობილური მოწყობილობებით. რამდენიმე ფუნქცია:

ასევე არსებობს ნავიგაციის ვარიანტი გამოყენებით drag და drop. JQuery Responsive Onebyone Slider მოდული მუშაობს Twitter Bootstrap კარუსელის საფუძველზე.

18. Accordionza - JQuery Plugin

არ არის jQuery სლაიდერი უფრო ადვილია. მუშაობა, თქვენ უნდა ჩამოტვირთოთ სულ 3KB სლაიდერი, რაც Accordionza ყველაზე მსუბუქი Accorder ტიპის სლაიდერი.

თუ არ მოგწონთ სამი სტილის, შეგიძლიათ გამოსწორდეს HTML და CSS თავს. შესაძლებლობები:

ნავიგაცია კლავიატურაზე

მარტივი ეფექტები და ღილაკები

პროგრესული გაუმჯობესების ტექნიკა - მუშაობს JavaScript- ის გარეშე

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

19. Mighyslider - ადაპტური მრავალმხრივი სლაიდერი

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

ქვეშ hood თქვენ ნახავთ ბევრ ვარიანტს:

კლავიატურა, მაუსი და შეხება მხარდაჭერა

CSS3 აპარატურის აჩქარების გადასვლები

Pure Valid Markup და SEO ოპტიმიზაცია

შეუზღუდავი სლაიდების ნომერი, ხელმოწერების და შედეგების ფენები

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

20. Parallax Slider - ადაპტური jQuery მოდული

Parallax Slider მუშაობს jQuery Responsive Onebyone Slider მოდული და გაძლევთ საშუალებას animate თითოეული ფენის ცალკე შიგნით ერთი slide. თქვენ შეგიძლიათ animate ყველა სლაიდები ან თუნდაც მხოლოდ ერთი დასძინა pararallax ანიმაცია.

ნაკრები მოიცავს სხვადასხვა ტიპის 4 სლაიდერს, ყველა პარალექსით. სხვა jQuery sliders, მას აქვს:

სრული Customizability

შეხება მხარდაჭერა

სრულად adapiten, შეუზღუდავი რაოდენობის ფენები

ავტომატური თამაში, looping, სიმაღლის და სიგანე, ისევე როგორც ტაიმერი

ანიმაციური ფენები არ არის მხოლოდ ტექსტი ან გამოსახულება. თქვენ ასევე შეგიძლიათ დაამატოთ YouTube, Vimeo და HTML5 ვიდეო. Parallax Slider კიდევ ერთი კარგი მაგალითია, თუ როგორ შეგიძლიათ იმიტაცია ფლეშ ეფექტებიც კი უკეთესია, ვიდრე Flash, რომელიც ასევე მხარს უჭერს ყველა მოწყობილობას.

დასკვნა

ეს არის საინტერესო, რომ დაიცვას, თუ როგორ jQuery sliders გაიზარდა რაღაც, რაც უბრალოდ შეცვლის ერთი იმიჯი სხვები უზარმაზარი კომპლექტი შემოქმედებითი ინსტრუმენტები. ახლა არის 3D, Pararallax Sliders, sliders მთელი გვერდი, ადაპტირებული და ის, რომ შეიძლება ჩაითვალოს როგორც Desktop კომპიუტერები და სმარტფონებისათვის.

თუ არ მოგწონთ ამ სიიდან ნებისმიერი სლაიდერი, თქვენ ყოველთვის შეგიძლიათ გაიაროს jQuery Code Tutorial გაკვეთილი Envato ნახვა და განვითარება რაღაც სრულიად ახალი და უნიკალური.

კარგად, ან სხვა sliders on Envato ბაზარზე - არსებობს რა უნდა აირჩიოს. და რა არის თქვენი საყვარელი jQuery სლაიდერი, და რატომ?