ლამაზი შინაარსის სლაიდერის შექმნა. პერსონალური სურათის სლაიდერი jQuery-ის გამოყენებით

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

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

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

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


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


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

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

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

• 
• 
• 
• 

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

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

სხეული ( ზღვარი: 0; padding: 0; ) #block-for-slider ( სიგანე: 800px; ზღვარი: 0 ავტომატური; margin-top: 100px; ) #viewport ( სიგანე: 100%; ჩვენება: მაგიდა; პოზიცია: შედარებითი; overflow: -webkit-user-select: none -user-select: none: 100%; : 1s -transition-time-function: ease-in-out -o-transition-timing-function: ease-in-out-function: ease-in-out ) #slidewrapper ul, #slidewrapper li; ( ზღვარი: 0; padding: 0; ) #slidewrapper li ( სიგანე: calc(100%/4); სიის სტილი: არცერთი; ჩვენება: inline; float: მარცხენა; ) .slide-img ( სიგანე: 100%; )

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

Viewport ელემენტი, როგორც უკვე აღვნიშნეთ, იკავებს ჩვენი block-for-slider-ის მთელ სიგანეს, მას აქვს overflow:hidden თვისება, ეს საშუალებას მოგვცემს დავმალოთ ჩვენი სურათის არხი, რომელიც სცილდება ხედვის პორტს.


შემდეგი CSS თვისებაა user-select:none, რომელიც საშუალებას გაძლევთ თავიდან აიცილოთ ცალკეული სლაიდერის ელემენტების ლურჯი ხაზგასმა, როდესაც ღილაკებს რამდენჯერმე დააწკაპუნებთ.

გადავიდეთ slidewrapper-ზე, რატომ პოზიცია: შედარებითი და არა აბსოლუტური? ყველაფერი ძალიან მარტივია, რადგან... თუ ავირჩევთ მეორე ვარიანტს, მაშინ viewport overflow:hidden თვისებით, აბსოლუტურად არაფერი გვეჩვენება, რადგან თავად ხედის პორტი არ მოერგება სლაიდების გადახვევის სიმაღლეს, რის გამოც მას ექნება სიმაღლე:0. რატომ აქვს სიგანეს მნიშვნელობა და რატომ ვაყენებთ მას საერთოდ? საქმე იმაშია, რომ ჩვენს სლაიდებს ექნებათ ხედის 100%-ის ტოლი სიგანე, და იმისათვის, რომ ისინი განლაგდეს, გვჭირდება ადგილი, სადაც ისინი დადგებიან, ასე რომ, სლაიდების სახვევის სიგანე უნდა იყოს ხედის სიგანის 100%-ის ტოლი. გამრავლებული სლაიდების რაოდენობაზე (ჩემს შემთხვევაში 4). რაც შეეხება გადასვლას და გადასვლის-დროის ფუნქციას, აქ 1s ნიშნავს, რომ სლაიდების პოზიციის ცვლილება მოხდება 1 წამში და ჩვენ მას დავაკვირდებით, და ease-in-out არის ანიმაციის ტიპი, რომელშიც ის ჯერ ნელა მიდის და აჩქარებს შუამდე და შემდეგ ისევ ანელებს, აქ შეგიძლიათ დააყენოთ მნიშვნელობები თქვენი შეხედულებისამებრ.

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

შემდეგი, ჩვენ სლაიდებს ვაწყობთ, მათი სიგანე უნდა იყოს ხედის სიგანის ტოლი, მაგრამ რადგან... ისინი იმყოფებიან სლაიდების გადასახვევში, რომლის სიგანე უდრის ხედის სიგანეს, გამრავლებული სლაიდების რაოდენობაზე, შემდეგ კვლავ რომ მივიღოთ ხედის სიგანე, ჩვენ უნდა გავყოთ სლაიდების გადახვევის სიგანის 100% სლაიდების რაოდენობაზე (ჩემს შემთხვევაში ისევ, 4-ით). შემდეგ ჩვენ მათ ვაქციოთ inline ელემენტებად display:inline გამოყენებით და დავაყენოთ float მარცხნივ float:left თვისების დამატებით. List-style-ის შესახებ:არცერთი შემიძლია ვთქვა, რომ ვიყენებ ნაგულისხმევი მარკერის ამოსაღებად li-დან, უმეტეს შემთხვევაში ეს ერთგვარი სტანდარტია.

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

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

მოდით გავხსნათ ჩვენი js ფაილი, რომელიც შეიცავს სლაიდერის კოდს, არ დაგავიწყდეთ jQuery-ის დაკავშირება, რადგან ჩვენ დავწერთ ამ ჩარჩოს გამოყენებით. სხვათა შორის, ამ სტატიის წერის დროს მე ვიყენებ jQuery ვერსიას 3.1.0. თავად სკრიპტის ფაილი უნდა იყოს ჩართული სხეულის ტეგის ბოლოს, რადგან ჩვენ ვიმუშავებთ DOM ელემენტებთან, რომლებიც ჯერ უნდა იყოს ინიციალიზებული.

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

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

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

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

ფუნქცია nextSlide() ()

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

ფუნქცია nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ($("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else (translateWidth = -$("#viewport").width() * (slideNow) $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)", "-webkit-); transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)", )); slideNow++; ) )

პირველ რიგში, ჩვენ ვამოწმებთ, ვართ თუ არა ამჟამად ჩვენი არხის ბოლო სლაიდზე? ამისათვის ჩვენ ვიღებთ ყველა ჩვენი სლაიდების რაოდენობას $("#slidewrapper").children().length-ის გამოყენებით და ვამოწმებთ მას ჩვენი სლაიდის ნომრით, თუ ისინი ტოლია, მაშინ ეს ნიშნავს, რომ ჩვენ უნდა დავიწყოთ ჩვენება. არხი ისევ, 1 სლაიდიდან, რაც ნიშნავს, რომ ჩვენ ვცვლით slidewrapper-ის CSS ტრანსფორმაციის თვისებას translate(0, 0), რითაც გადავიტანთ მას თავდაპირველ პოზიციაზე ისე, რომ პირველი სლაიდი იყოს ჩვენს ხედვის ველში, ასევე არ დაგვავიწყდეს. შესახებ –webkit და –ms ადექვატური ჯვარედინი ბრაუზერის ჩვენებისთვის (იხ. css თვისებების მითითება). ამის შემდეგ არ დაგავიწყდეთ განაახლოთ slideNow ცვლადის მნიშვნელობა და უთხრათ, რომ სლაიდი ნომერი 1 ჩანს: slideNow = 1;

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

თუ პირველი პირობა არ დაკმაყოფილებულია, მაშინ ეს ნიშნავს, რომ ჩვენ ამჟამად არც ბოლო სლაიდზე ვართ და არც რაიმე არარსებულზე, რაც ნიშნავს, რომ უნდა გადავიდეთ შემდეგზე, ამას გავაკეთებთ სლაიდების მარცხნივ გადაადგილებით. ხედვის სიგანის ტოლი მნიშვნელობით, ცვლა კვლავ მოხდება ნაცნობი translate თვისების მეშვეობით, რომლის მნიშვნელობა იქნება "translate(" + translateWidth + "px, 0)" , სადაც translateWidth არის მანძილი, რომლითაც ჩვენი slidewrapper არის გადატანილი. სხვათა შორის, მოდით გამოვაცხადოთ ეს ცვლადი ჩვენი კოდის დასაწყისში:

var translateWidth = 0;

შემდეგ სლაიდზე გადასვლის შემდეგ, მოდით ვუთხრათ ჩვენს slideNow-ს, რომ ვხედავთ შემდეგ სლაიდს: slideNow++;

ამ ეტაპზე, ზოგიერთ მკითხველს შეიძლება გაინტერესებდეს: რატომ არ შევცვალეთ $("#viewport").width() ისეთი ცვლადით, როგორიცაა slideWidth, რომ ყოველთვის ხელთ გვქონდეს ჩვენი სლაიდის სიგანე? პასუხი ძალიან მარტივია, თუ ჩვენი საიტი ადაპტურია, მაშინ, შესაბამისად, სლაიდერისთვის გამოყოფილი ბლოკიც ადაპტირებულია, ამის საფუძველზე შეგვიძლია გავიგოთ, რომ ფანჯრის სიგანის ზომის შეცვლისას გვერდის გადატვირთვის გარეშე (მაგალითად, ტელეფონის ჩართვა მისი მხარე), შეიცვლება ხედის პორტის სიგანე და, შესაბამისად, შეიცვლება ერთი სლაიდის სიგანე. ამ შემთხვევაში, ჩვენი სლაიდების შეფუთვა გადაინაცვლებს იმ სიგანის მნიშვნელობაზე, რომელიც თავდაპირველად იყო, რაც იმას ნიშნავს, რომ სურათები გამოჩნდება ნაწილებად ან საერთოდ არ იქნება ნაჩვენები ხედვის პორტში. ჩვენს ფუნქციაში slideWidth-ის ნაცვლად $("#viewport").width() ჩაწერით, ჩვენ ვაიძულებთ მას გამოთვალოს ხედის სიგანე ყოველ ჯერზე სლაიდების გადართვაზე, რითაც დავრწმუნდებით, რომ როდესაც ეკრანის სიგანე მკვეთრად შეიცვლება, ის გადავა ჩვენ გვჭირდება სლაიდი.

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

var slideInterval = 2000;

დრო js-ში მითითებულია მილიწამებში.

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

$(დოკუმენტი).ready(function () ( setInterval(nextSlide, slideInterval); ));

აქ ყველაფერი უფრო მარტივი არ შეიძლება იყოს $(document).ready(function () ()) კონსტრუქციის საშუალებით, ჩვენ ვამბობთ, რომ შემდეგი მოქმედებები უნდა შესრულდეს დოკუმენტის სრულად ჩატვირთვის შემდეგ. შემდეგი, ჩვენ უბრალოდ მოვუწოდებთ nextSlide ფუნქციას slideInterval-ის ტოლი ინტერვალით ჩაშენებული setInterval ფუნქციის გამოყენებით.

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


ამასობაში, მოდით გადავიდეთ, დავუმატოთ ჩვენს სლაიდერს ფუნქცია, როგორიცაა კურსორის გადაადგილებისას გადახვევის შეჩერება ამისთვის, ჩვენ უნდა ჩავწეროთ შემდეგი რამ კოდის მთავარ ბლოკში ($(document).ready(. ფუნქცია () ()) სტრუქტურა:

$("#viewport").hover(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

ამ კოდის ანალიზის დასაწყებად, ჩვენ უნდა ვიცოდეთ რა არის switchInterval. პირველ რიგში, ეს არის ცვლადი, რომელიც ინახავს პერიოდულ გამოძახებას nextSlide ფუნქციაზე, მარტივად რომ ვთქვათ, გვაქვს კოდის ეს ხაზი: setInterval(nextSlide, slideInterval); , გადაიქცა შემდეგში: switchInterval = setInterval(nextSlide, slideInterval); . ამ მანიპულაციების შემდეგ, კოდის ჩვენმა მთავარმა ბლოკმა მიიღო შემდეგი ფორმა:

$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport"). hover(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval);

აქ ვიყენებ hover event-ს, რაც ნიშნავს „ჰოვერზე“, ეს მოვლენა საშუალებას მაძლევს თვალყური ადევნო იმ მომენტს, როცა კურსორს ავატარებ ობიექტზე, ამ შემთხვევაში ხედვის პორტზე.

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

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

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

პირველ რიგში, მოდი აღვნიშნოთ ისინი:

• 
• 
• 
• 

თავდაპირველად, ეს მარკირება შეიძლება გაუგებარი იყოს, მაშინვე ვიტყვი, რომ ეს ორი ღილაკი ერთ div-ში მოვათავსე კლასის prev-next-btns მხოლოდ თქვენი მოხერხებულობისთვის, თქვენ არ გჭირდებათ ამის გაკეთება, შედეგი არ იქნება. შეცვალეთ, ახლა ჩვენ მათ სტილებს დავამატებთ და ყველაფერი კარგად იქნება, გასაგებია:

#prev-btn, #next-btn (პოზიცია: აბსოლუტური; სიგანე: 50px; სიმაღლე: 50px; ფონის ფერი: #fff; საზღვრის-რადიუსი: 50%; ზედა: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover (კურსორი: მაჩვენებელი; ) #prev-btn (მარცხნივ: 20px; ) #next-btn (მარჯვნივ: 20px; )

პირველ რიგში, ჩვენ განვათავსებთ ჩვენს ღილაკებს პოზიციის გამოყენებით: აბსოლუტური, რითაც თავისუფლად ვაკონტროლებთ მათ პოზიციას ჩვენს ხედვის შიგნით, შემდეგ ჩვენ დავაზუსტებთ ამ ღილაკების ზომებს და გამოვიყენებთ საზღვრის რადიუსს კუთხეების დასამრგვალებლად ისე, რომ ეს ღილაკები გადაიქცეს წრეებად. მათი ფერი იქნება თეთრი, ანუ #fff, და მათი გადაადგილება ხედის ზედა კიდიდან ტოლი იქნება ამ ხედის სიმაღლის ნახევარის გამოკლებული ღილაკის ნახევარი (ჩემს შემთხვევაში 25 პიქსელი), ასე რომ, ჩვენ შეგვიძლია განათავსეთ ისინი ვერტიკალურად ცენტრში. შემდეგ, ჩვენ დავაკონკრეტებთ, რომ როდესაც მათ ზემოდან გავაჩერებთ, ჩვენი კურსორი შეიცვლება მაჩვენებელზე, და ბოლოს ჩვენ ცალკე ვეუბნებით ჩვენს ღილაკებს, რომ ისინი უნდა იყვნენ 20 პიქსელის დაშორებით მათი კიდეებისგან, რათა ჩვენ დავინახოთ ისინი ჩვენთვის შესაფერისად. .

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

სტილის შემდეგ, ჩვენი სლაიდერი ასე უნდა გამოიყურებოდეს:


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

ფუნქცია prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", ) slideNow = slideCount ) else (translateWidth = -$ ("#viewport"). ( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideNow--; ))

მას ეწოდება prevSlide და გამოიძახება მხოლოდ prev-btn-ზე დაწკაპუნებით. ჯერ ვამოწმებთ პირველ სლაიდზე ვართ თუ არა, აქვე ვამოწმებთ, გავიდა თუ არა ჩვენი slideNow ჩვენი სლაიდების რეალური დიაპაზონი და, თუ რომელიმე პირობა შეესაბამება სიმართლეს, გადავალთ ბოლო სლაიდზე, გადავიტანთ slidewrapper-ს. იმ ღირებულებამდე, რომელიც ჩვენ გვჭირდება. ამ მნიშვნელობას გამოვთვლით ფორმულის გამოყენებით: (ერთი სლაიდის სიგანე) * (სლაიდების რაოდენობა - 1), ამ ყველაფერს ვიღებთ მინუს ნიშნით, რადგან გადავიტანთ მარცხნივ, გამოდის, რომ ხედვის პორტი ახლა გვაჩვენებს ბოლო სლაიდს. ამ ბლოკის ბოლოს, ჩვენ ასევე უნდა ვუთხრათ slideNow ცვლადს, რომ ბოლო სლაიდი ახლა ჩვენს ხედშია.

თუ ჩვენ არ ვართ პირველ სლაიდზე, მაშინ უნდა გადავიდეთ 1-ით უკან, ამისთვის კვლავ ვცვლით slidewrapper-ის ტრანსფორმაციის თვისებას. ფორმულა არის: (ერთი სლაიდის სიგანე) * (მიმდინარე სლაიდის რაოდენობა – 2), ისევ ამ ყველაფერს მინუს ნიშნით ვიღებთ. მაგრამ რატომ -2 და არა -1, გვჭირდება მხოლოდ 1 სლაიდით უკან გადატანა? ფაქტია, რომ თუ ჩვენ ვიმყოფებით, ვთქვათ, მე-2 სლაიდზე, მაშინ ჩვენი slidewrapper-ის ტრანსფორმაციის:translate(x,0) თვისება x ცვლადი უკვე უდრის ერთი სლაიდის სიგანეს, თუ ვუთხარით, რომ გვჭირდება. რომ გამოვაკლოთ 1 მიმდინარე სლაიდის რიცხვს, შემდეგ ისევ მივიღებთ ერთს, რომლითაც სლაიდების გადახვევა უკვე გადატანილია, ამიტომ დაგვჭირდება იგივე ხედის სიგანეების გადატანა 0-ით, რაც ნიშნავს slideNow - 2-ს.

ახლა ჩვენ უბრალოდ უნდა დავამატოთ ეს ხაზები კოდის მთავარ ბლოკში:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

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

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

• 
• 
• 
• 

როგორც ხედავთ, ხედის პორტის შიგნით გამოჩნდა ჩასმული სია, მოდით მივცეთ მას იდენტიფიკატორი nav-btns, შიგნით არის ჩვენი ნავიგაციის ღილაკები, ჩვენ მათ მივანიჭებთ კლასს slide-nav-btn, თუმცა, შეგვიძლია დავასრულოთ მარკირება, მოდით გადავიდეთ სტილებზე:

#nav-btns (პოზიცია: აბსოლუტური; სიგანე: 100%; ქვედა: 20 პიქსელი; padding: 0; ზღვარი: 0; ტექსტის გასწორება: ცენტრში; ) .slide-nav-btn (პოზიცია: შედარებითი; ჩვენება: inline-block; list-style: სიგანე: 20px: #fff: .slide-nav-btn;

nav-btns ბლოკს, რომელშიც ჩვენი ღილაკებია განთავსებული, ვაძლევთ თვისებას:აბსოლუტური ისე, რომ მან არ გაიჭიმოს ხედის პორტი სიმაღლეში, რადგან slidewrapper-ს აქვს position:relative თვისება, ჩვენ ვაყენებთ სიგანეს 100%-ზე, რათა ღილაკები ჰორიზონტალურად განვათავსოთ ხედვის პორტთან, ტექსტის გასწორება: ცენტრის გამოყენებით, შემდეგ ქვედა საკუთრების გამოყენებით ვაცნობებთ ჩვენს ბლოკს, რომ ის უნდა იყოს მანძილზე. 20 პიქსელი ქვედა კიდიდან.

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

ახლა მოდით გადავიდეთ jQuery ნაწილზე:
პირველ რიგში, მოდით გამოვაცხადოთ ცვლადი navBtnId, რომელიც შეინახავს ღილაკის ინდექსს, რომელსაც ჩვენ დავაწკაპუნეთ:

var navBtnId = 0;
$. width() * (navBtnId $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth); + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", ));

აქ, როდესაც ვაწკაპუნებთ ჩვენს slide-nav-btn-ზე, ვიძახით ფუნქციას, რომელიც პირველ რიგში ანიჭებს navBtnId ცვლადს დაჭერილი ღილაკის ინდექსს, ანუ მის სერიულ ნომერს, ვინაიდან ათვლა იწყება ნულიდან, მაშინ თუ დააწკაპუნეთ მეორე ღილაკზე, შემდეგ იწერება navBtnId მნიშვნელობა 1. შემდეგ ვაკეთებთ შემოწმებას, სადაც ერთს ვამატებთ ღილაკის სერიულ ნომერს, რომ მივიღოთ რიცხვი, თითქოს ათვლა დაიწყო არა 0-დან, არამედ 1-დან. შეადარეთ ეს რიცხვი მიმდინარე სლაიდის რიცხვს, თუ ისინი ემთხვევა, მაშინ ჩვენ არ განვახორციელებთ რაიმე ქმედებებს, რადგან სასურველი სლაიდი უკვე არის ხედვის პორტში.

თუ ჩვენ გვჭირდება სლაიდი არ არის ხედვის ველში, მაშინ ვიანგარიშებთ მანძილს, რომლითაც უნდა გადავიტანოთ slidewrapper მარცხნივ, შემდეგ შევცვალოთ CSS ტრანსფორმაციის თვისების მნიშვნელობა თარგმნად (იგივე მანძილი პიქსელებში, 0 ). ჩვენ ეს უკვე არაერთხელ გავაკეთეთ, ამიტომ კითხვები არ უნდა იყოს. დასასრულს, ჩვენ კვლავ ვინახავთ მიმდინარე სლაიდის მნიშვნელობას slideNow ცვლადში.

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

Გმადლობთ ყურადღებისთვის!

ტეგები:

• jquery სლაიდერი
• css
• css3 ანიმაცია
• html

ტეგების დამატება

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

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

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

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

როგორ შევქმნათ JavaScript სლაიდერი: დასაწყისი

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

მომხმარებელს ყოველთვის არ აინტერესებს როგორ იწერება კოდი, როგორია მისი არქიტექტურა, მთავარია შედეგი ნახოს!

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

როგორც საფუძველი, მე ავიღე ეს JavaScript გამოსახულების სლაიდერი - https://codepen.io/gabrieleromanato/pen/pIfoD.

გადავწყვიტე იქ გაჩერება, რადგან... მისი JS კოდი დაიწერა OOP პრინციპების გამოყენებით და მისი კლასები ეფუძნება პროტოტიპებს და არა ბანალურ ფუნქციებს.

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

მაგრამ, სამწუხაროდ, თანამედროვე მსოფლიოში ცოტა ადამიანი იზიარებს ჩემს პოზიციებს, რადგან... ეს ენა გიჟური ტემპით ვითარდება და ცდილობს კიდეც მოიგოს backend-ის დეველოპერები Node.js-ის გამოყენებით Java, PHP, C#, Ruby და სხვა მონსტრების ალტერნატივად.

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

ჩემს მიერ ნაპოვნი კოდიდან გამომდინარე, მჭირდებოდა სლაიდერის შემუშავება სუფთა JS-ში pop-up ფანჯარაში (ამ ნივთს ასევე უწოდებენ ამომხტარ, ამომხტარს და ა. სლაიდი. ასევე საჭირო იყო ამ ფანჯრის დახურვის ღილაკის გაკეთება.

ეს არის ის, რაც მე დავასრულე.

სლაიდერის JS ბიბლიოთეკის დამზადება

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

მისი კოდი შეგიძლიათ იხილოთ GitHub-ზე ამ მისამართზე - https://github.com/Pashaster12/popupSlider.js

ბიბლიოთეკის სტრუქტურა ასეთია:

სლაიდების საქაღალდე განკუთვნილია სლაიდების სურათებისთვის. Controls შეიცავს JS კარუსელის მართვის სურათებს (ღილაკები სლაიდერის დახურვისა და სლაიდების გადართვისთვის). ხოლო აქტივებში არის JS სლაიდერის სტატიკური ელემენტები: HTML მარკირება და ფაილი CSS სტილებით.

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

მე გადავწყვიტე დამეწყო ჩვენი JS გამოსახულების კარუსელის HTML მარკირებით, რომელიც ჩემს შემთხვევაში ასე გამოიყურება:

ტექსტი 1 ტექსტი 2 ტექსტი 3

JavaScript-ში სლაიდერის ჩამოსაყალიბებლად, მე გამოვიყენე შემდეგი სტილები:

#სლაიდერი ( ზღვარი: ავტომატური; სიგანე: 600 პიქსელი !მნიშვნელოვანი; გადინება: დამალული; ) #სლაიდერი (სიგანე: 9999 პიქსელი; სიმაღლე: 343 პიქსელი; პოზიცია: ფარდობითი; გადასვლა: მარცხნივ 400მმ წრფივი; ) .სლაიდი ( ათწილადი: მარცხნივ; სიგანე : 600 პიქსელი: ფარდობითი გადინება: დამალული; წარწერა (სიგანე: 600 პიქსელი; სიმაღლე: 1.5; შრიფტის ზომა: 300; ტექსტის გასწორება: ცენტრში; ფერი: # 000; ეკრანი: მაგიდა; 50% ტრანსფორმაცია: translateX(-50%) ) #slider-nav a (სიგანე: 8px; ტექსტის დეკორაცია: არცერთი; დისპლეი: inline-block; საზღვარი-რადიუსი: 50%; ზღვარი: 0 5 პიქსელი: #fafafa ) #slider-nav a.current (ფონის ფერი: #337ab7;) : 20px ზევით: 50% margin-top: -10px; მარცხენა: -40px; ) #prev:hover (ფონი: url(../controls/arrow_left_active.png); ) #next (ფონი: url(../controls/arrow_right_inactive.png); მარჯვნივ: -40px; ) #next:hover (ფონი : url(../controls/arrow_right_active.png #cq-popup ( სიგანე: 600px; z-index: 23; მარცხენა: calc(50%); top: calc(50%); პოზიცია: ფიქსირებული !მნიშვნელოვანი ; background-repeat: no-repeat; %, -50%) scale(1 #cq-popup .header ( ჩვენება: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( სიგანე: 500px; font-); ზომა: 22 პიქსელი; ხაზის სიმაღლე: 36 პიქსელი; ; სიმაღლე: 16px; სიმაღლე: 100%; ფონი: rgba(51,51,51,0.8); z-ინდექსი: 22; )

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

მე გადავიტანე HTML მარკირების და CSS სტილები ცალკეულ ფაილებში popupSlider.html და popupSlider.css, რომლებიც განთავსებულია JavaScript სლაიდერების ბიბლიოთეკის აქტივების დირექტორიაში. ეს განზრახ გავაკეთე, რომ ამ კოდის გამოყენებისას მომხმარებლებმა მარტივად შეცვალონ მარკირება და დიზაინი JS კოდში ჩარევის გარეშე, სადაც პირდაპირ უნდა ჩაიწეროს ის, რაც უნდა ჩაიწეროს.

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

შედეგად, მე გადავწყვიტე უბრალოდ შემეტანა მზა ფაილები მთავარ ბიბლიოთეკის ფაილში popupSlider.js, რომელმაც ჩემი ამოცანისთვის მიიღო შემდეგი ფორმა:

ფუნქცია Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: ფუნქცია () ( this.links = this.el.querySelectorAll ("#slider-nav a"); ) ( var self = ეს; for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "ბლოკი"; else if (ინდექსი == 1) this.prevBtn.style.display = "არცერთი"; ), setCurrentLink: ფუნქცია (ბმული) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "მიმდინარე"; this.currentElement = ბმული; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };

რამდენიმე კომენტარი ზემოთ მოცემულ კოდთან დაკავშირებით. popupSlider.js ფაილის შინაარსი არის ერთი JavaScript Slider კლასი, რომელიც, როგორც PHP-ში, შეიცავს კონსტრუქტორს და კლასის მეთოდებს. მხოლოდ JS-ში კონსტრუქტორის განმარტება, PHP-სგან განსხვავებით, სავალდებულოა.

კონსტრუქტორი განისაზღვრება შემდეგი კონსტრუქციის გამოყენებით:

ფუნქციის სლაიდერი(ელემენტი) (//კონსტრუქტორის კოდი)

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

თავად კლასის მეთოდები განთავსდება პროტოტიპის შიგნით და ხელმისაწვდომი იქნება ამ JavaScript კლასის ყველა ინსტანციისთვის. JS პროტოტიპი ჩემს შემთხვევაში აღწერილია შემდეგი დიზაინით:

Slider.prototype = (//methods)

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

Var slider = new Slider(); slider.class_method();

და თავად კლასის კოდის შიგნით, შემდეგი მეთოდია ხელმისაწვდომი:

This.class_method();

მთავარია არ დაგვავიწყდეს, რომ JavaScript-ში ამის მნიშვნელობა დამოკიდებულია ზარის კონტექსტზე, ამიტომ ზოგიერთი მეთოდის სხეულებში, რომლებშიც საჭირო იყო კლასის მეთოდებისა და თვისებების გამოძახება, არის ასეთი კონსტრუქცია:

ვარ თვით = ეს; self.class_method(); // მეთოდზე წვდომა, რომელიც აღწერილი მეთოდის კოდზე ერთი საფეხურით მაღალია

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

loadStatic ()

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

პირველ რიგში, მეხსიერებაში იქმნება ახალი ბმული ტეგი JavaScript ფუნქციის document.createElement() გამოყენებით და მას ენიჭება ყველა საჭირო ატრიბუტის მნიშვნელობა, მათ შორის CSS ფაილის გზა JS სლაიდერის სტილებით. და ბოლოს, ის ემატება HTML გვერდზე JavaScript appendChild() მეთოდის გამოყენებით head განყოფილების ბოლოს, სადაც უნდა იყოს სტილები.

შემდეგი, ჩვენ იგივე ვაკეთებთ ფაილს ჩვენი სლაიდერის HTML მარკირებით სუფთა JavaScript-ში. აქ არის მხოლოდ მცირე ნიუანსი: თქვენ არ შეგიძლიათ უბრალოდ ჩართოთ HTML ფაილი იმავეში, როგორც ეს გავაკეთეთ CSS ფაილთან დაკავშირებით. ამისათვის არის სპეციალური ბიბლიოთეკები, მაგალითად, HTML-ის HTML-ში ჩასართავად, w3.org-ის lib არის შესანიშნავი - https://www.w3schools.com/howto/howto_html_include.asp

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

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

თუ გსურთ ჩასვათ div სლაიდერის მარკირებით არა მხოლოდ სხეულის ბოლოში, არამედ კონკრეტულ კონტეინერში, ამის ნაცვლად შეგიძლიათ გამოიყენოთ შემდეგი კოდი:

Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);

შეიყვანეთ შემდეგი, მიუთითეთ სამიზნე კონტეინერის სასურველი იდენტიფიკატორი (ჩემს შემთხვევაში, HTML JS სლაიდერი განთავსდება ელემენტში id popupSlider-ით):

Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;

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

დასასრულს გამოიძახება navigate() მეთოდი.

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

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

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

სლაიდი (ელემენტი)

თავად JavaScript კარუსელის მეთოდი „პასუხისმგებელია მაგიაზე“, რომელიც შეიცავს კოდს, რომელიც ცვლის სლაიდების პოზიციებს. თავიდანვე იწოდება setCurrentLink() მეთოდი, რაზეც ცოტა მოგვიანებით ვისაუბრებთ.

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

თავად სლაიდ გადამრთველი მუშაობს შემდეგნაირად:

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

ჩვენ განვსაზღვრავთ მიმდინარე სლაიდის მარცხენა კიდის ოფსეტს საწყისი ელემენტის მარცხენა კიდიდან offsetLeft თვისების გამოყენებით.

და ჩვენ გადავიტანთ მშობელ ელემენტს ამ მნიშვნელობით ისე, რომ საჭირო ელემენტი გამოჩნდეს სლაიდერის ფანჯარაში.

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

setCurrentLink (ბმული)

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

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

მიმდინარე ელემენტის ხაზგასმის ლოგიკა მარტივია:

ვიღებთ მშობელი ელემენტის ობიექტს, რომელიც ჩვენს შემთხვევაში არის კონტეინერი იდენტიფიკატორით slider-nav.

ჩვენ ვიღებთ ყველა ნავიგაციის ელემენტს ბმულების მასივის სახით.

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

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

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

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

თავად მეთოდი იწოდება ადრე აღწერილი navigate() შიგნით, რომელიც შეიცავს ჩვენს JavaScript სლაიდერზე მიმდინარე მოქმედებების ყველა სცენარს.

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

Document.getElementById("cq-popup-bg").onclick = ფუნქცია () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;

JavaScript სლაიდ შოუ შემუშავებული ბიბლიოთეკის საფუძველზე

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

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

სლაიდშოუ: ფუნქცია (დროის ამოწურვა) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector ("#slider-nav a.current").getAttribute ("data-slide" var slideId = parseInt(currentSlideNumber, 10) + 1 self.slide(document.querySelector(""));

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

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

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

ისე, რომ ამ კოდმა იმუშაოს, თავად მეთოდი უნდა გამოიძახოთ. მე გადავწყვიტე ეს ყველაფერი გავაკეთო იმავე navigate(), რომელიც ზუსტად არის ყველა სახის სკრიპტის კოლექცია. მე დავაყენე ზარი ბოლოში, არგუმენტად გადავიტანე დროის ინტერვალის მნიშვნელობა ჩვენს JS სლაიდ შოუში სლაიდების ავტომატურად შეცვლისთვის (მე ავირჩიე 2000 მილიწამი ან 2 წამი, თქვენ შეგიძლიათ შეცვალოთ ეს რიცხვი საჭიროებისამებრ):

Self.slideShow(2000);

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

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

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

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

JavaScript-ის კარუსელის სლაიდების ავტომატური ჩვენების შესაწყვეტად გადავწყვიტე გამომეყენებინა სტანდარტული JS ფუნქცია clearInterval(), რომელსაც არგუმენტად გადავცემ setInterval() ფუნქციის მიერ დაბრუნებული დროის ინტერვალის იდენტიფიკატორს, როდესაც ის დაყენებულია.

შედეგად მივიღე შემდეგი კოდი, რომელიც გადავწყვიტე არ დამეწერა, როგორც ცალკე მეთოდი:

ClearInterval(self.slideCycle);

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

Link.addEventListener("click", ფუნქცია (e) (...)); self.prevBtn.addEventListener("click", ფუნქცია (e) (...)); self.nextBtn.addEventListener("click", ფუნქცია (e) (...));

უმჯობესია დარეკოთ clearInterval() უფრო ახლოს დაწკაპუნების მოვლენასთან, მთავარია მის წინ და არა მის შემდეგ.

JavaScript სლაიდერის ინტეგრაცია საიტზე

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

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

Ნაბიჯი 1 . ჩვენ ვაკოპირებთ ბიბლიოთეკის ფაილებს ჩვენს ვებსაიტზე ცალკე დირექტორიაში.
ნაბიჯი 2. დაამატეთ შემდეგი კოდი იმ გვერდების HTML-ში, სადაც სლაიდერი უნდა იყოს ნაჩვენები, განათავსეთ იგი დახურვის ტეგამდე:

ნაბიჯი 3. ჩვენ ვათავსებთ შემდეგ კოდს JS კარუსელის გამოძახებისთვის ნებისმიერ არსებულ JavaScript ფაილში, რომელიც შედის გვერდზე თავად სლაიდერის შეერთების შემდეგ:

Var aSlider = new Slider("#slider");

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

ახალი სლაიდების დამატება JavaScript კარუსელში

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

და შემდეგ ფაილის კოდში assets/popupSlider.html დაამატეთ ახალი ბლოკი კონტეინერში ID slider-wrapper-ით:

ტექსტი

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

თქვენ ასევე დაგჭირდებათ ახალი ნავიგაციის ელემენტის დამატება წრის სახით, რადგან... ამ დროისთვის მისი ავტომატური დამატება ჯერ არ განხორციელებულა. ამისათვის თქვენ უნდა დაამატოთ შემდეგი კოდი კონტეინერში slider-nav id-ით და დაწეროთ იგი ბოლოში:

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

JS კარუსელის შეფუთვა ერთ სკრიპტში

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

მისი მუშაობის დასაჩქარებლად, სხვათა შორის, შეგიძლიათ კიდევ უფრო შეკუმშოთ სტატიკური კომპონენტები: CSS, HTML და JavaScript ფაილები. მე ეს არ გამიკეთებია და შემოგთავაზებთ მინიფიცირებულ კოდს, რადგან ახლა ბევრია frontend build სისტემა: Gulp, Grunt, Webpack და სხვა. და თითოეულ მათგანს აქვს საკუთარი ალგორითმები ფაილების შეკუმშვისა და დასაკავშირებლად.

გარდა ამისა, მინიფიცირებული შედეგები შეიძლება განსხვავებულად იმუშაოს სხვადასხვა OS-ზე. ზოგადად, მრავალი მიზეზი არსებობს.

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

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

მაშინ ერთი JavaScript კარუსელის სკრიპტის ვარიანტი გამოგადგებათ, რადგან... მთელი კონტენტი პირდაპირ მასში იქნება, მათ შორის HTML/CSS კოდი, რომელიც ბიბლიოთეკის შემთხვევაში ინახება ცალკე ფაილებში.

სცენარი ჩემს შემთხვევაში ორი ნაწილისგან შედგება. პირველი ნაწილი შეიცავდა popupSlider.js ფაილის შიგთავსს, რომელსაც მეორედ არ წარმოვადგენ. ჩადეთ ის თავად, წაშალეთ loadStatic() მეთოდის აღწერა და მისი გამოძახება კლასის კოდიდან, რადგან ჩვენ არ დაგვჭირდება ისინი.

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

იქ დავამატებთ კარუსელის JS კოდს HTML/CSS გვერდზე და შევქმნით Slider კლასის ობიექტს, რაც უდრის თავად სლაიდერის გააქტიურებას.

სქემატურად კოდი ასე გამოიყურება:

/* popupSlider.js-ის შინაარსი loadStatic() მეთოდისა და მისი გამოძახების გარეშე */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css კოდი*/ \ /* html კოდი * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = ახალი სლაიდერი("#სლაიდერი");

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

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

მორგებული JS სლაიდერი - განვითარების პერსპექტივები

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

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

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

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

გააკეთეთ გარე კონფიგურაცია ისე, რომ მოხერხებულად შეძლოთ სლაიდერის კონფიგურაცია;

შესაძლებელს გახდის სლაიდერის ჩასმა გვერდის შიგნით (ამჟამად ის შექმნილია მხოლოდ როგორც ამომხტარი);

HTML კოდის ასინქრონული ჩატვირთვა (ახლა სინქრონული, რომელიც მონიშნულია როგორც მოძველებული მრავალი ბრაუზერის მიერ);

შეფუთეთ ბიბლიოთეკა პაკეტად, NPM, Bower ან სხვა პაკეტად, რათა შესაძლებელი იყოს მისი ინსტალაცია და დამოკიდებულებების მართვა პაკეტის მენეჯერების გამოყენებით;

გააკეთეთ განლაგება ადაპტირებული JS კარუსელის გამოყენებისთვის სხვადასხვა მოწყობილობებზე;

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

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

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

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

სულ ეს იყო რისი თქმაც მინდოდა! Ყველაფერი საუკეთესო! 🙂

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

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

WOW სლაიდერი

საპასუხო jQuery გამოსახულების სლაიდერი ვიზუალური ეფექტების დიდი ნაკრებით (როტაცია, აფრენა, ბუნდოვანი, სპირალები, ბლაინდები და ა.შ.) და მრავალი მზა შაბლონი. WOW Slider-ის ჩაშენებული გვერდის ჩასმის ოსტატის მეშვეობით, თქვენ შეგიძლიათ მარტივად და უპრობლემოდ შექმნათ განსაცვიფრებელი სლაიდშოუ წუთებში. დეველოპერის ვებსაიტი შეიცავს ყველა საჭირო დოკუმენტაციას რუსულ ენაზე მოდულის დასაყენებლად და გამოსაყენებლად, ასევე შესანიშნავი ცოცხალი მაგალითები, თუ როგორ მუშაობს მოდული. ცალკე Wordpress-ის მოდული და Joomla-ს მოდული ასევე ხელმისაწვდომია ჩამოსატვირთად. დარწმუნებული ვარ, რომ ბევრს მოეწონება ეს მშვენიერი სლაიდერი, როგორც დამწყებთათვის, ასევე გამოცდილ ვებმასტერებს.

HiSlider

HiSlider - HTML5, Jquery სლაიდერი და სურათების გალერეა, აბსოლუტურად უფასო დანამატი პირადი გამოყენებისთვის პოპულარული სისტემების საიტებზე - WordPress, Joomla, Drupal. ამ მარტივი, მაგრამ საკმაოდ ფუნქციონალური ხელსაწყოს დახმარებით თქვენ შეგიძლიათ მარტივად შექმნათ საოცარი და ცოცხალი სლაიდ შოუები, სანახაობრივი პრეზენტაციები და ახალი შეტყობინებების ანონსები თქვენი ვებსაიტების გვერდებზე. რამდენიმე მზა შაბლონი და სკინი სლაიდერისთვის, კონტენტის გასაოცარი გადასვლის (ცვლის) ეფექტები, სხვადასხვა მულტიმედიური კონტენტის გამომავალი: ვიდეოები YouTube-დან და Vimeo-დან, მომხმარებლის მოქნილი პარამეტრები და ა.შ.

ნივო სლაიდერი

Nivo Slider არის კარგი ძველი, ყველასთვის ცნობილი, ერთ-ერთი ყველაზე ლამაზი და ადვილად გამოსაყენებელი გამოსახულების სლაიდერი. JQuery Nivo Slider მოდული უფასოა ჩამოსატვირთად და გამოსაყენებლად და ლიცენზირებულია MIT ლიცენზიით. WordPress-ისთვის არის ცალკე დანამატიც, მაგრამ სამწუხაროდ ის უკვე გადახდილია და ერთი ლიცენზიისთვის 29 დოლარის გადახდა მოგიწევთ. ჯობია ცოტა მაგია გააკეთოთ WP თემის ფაილებით და დაურთოთ Nivo Slider მოდულის უფასო jQuery ვერსია თქვენს ბლოგს, რადგან ინტერნეტში უამრავი ინფორმაციაა ამის შესახებ.
რაც შეეხება ფუნქციონირებას, ყველაფერი იდეალურად არის. ის იყენებს jQuery v1.7+ ბიბლიოთეკას, ლამაზ გადასვლის ეფექტებს, მარტივ და ძალიან მოქნილ პარამეტრებს, ადაპტირებულ განლაგებას, გამოსახულების ავტომატურ ამოჭრას და სხვა ბევრს.

სლაიდერის იდეა შთაგონებულია დეველოპერების მიერ, რომლებიც კარგად არიან ცნობილი Apple-ის პროდუქტების პრეზენტაციის სტილით, სადაც რამდენიმე პატარა ობიექტი (სურათი) იცვლება არჩეულ კატეგორიაზე დაწკაპუნებით მარტივი ანიმაციური ეფექტით. Codrops თქვენს განკარგულებაშია დეტალური გაკვეთილი, თუ როგორ უნდა შექმნათ ეს სლაიდერი, Html მარკირების სრული განლაგება, CSS წესების ნაკრები და შესრულებადი jQuery მოდული, ასევე სლაიდერის გამოყენების შესანიშნავი ცოცხალი მაგალითი.

Slit Slider

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

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

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

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

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

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

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

სახელი თავისთავად საუბრობს, ეს არის ალბათ ერთ-ერთი ყველაზე მსუბუქი და მინიმალისტური jQuery გამოსახულების სლაიდერი, რომელიც მე შემხვედრია (1kb მოდული). ResponsiveSlides.js არის პატარა JQuery მოდული, რომელიც ქმნის სლაიდების ჩვენებებს კონტეინერის შიგნით არსებული ელემენტების გამოყენებით. მუშაობს ბრაუზერების ფართო სპექტრთან, მათ შორის IE-ის ყველა ვერსიით - ცნობილი brake on progress, IE6-დან და უფრო მაღალი. სანდოობისთვის ნამუშევარი იყენებს CSS3 გადასვლებს javascript-თან ერთად. მარტივი განლაგება შეუკვეთავი სიის გამოყენებით, გადასვლების და დროის ინტერვალების პერსონალიზაცია, სლაიდების გადართვის ავტომატური და ხელით კონტროლი, ასევე მრავალჯერადი სლაიდ შოუების მხარდაჭერა ერთდროულად. აი, ასეთი მხიარული "ბავშვი".

კამერა

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

bxSlider jQuery

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

FlexSlider 2

FlexSlider 2 - ამავე სახელწოდების სლაიდერის განახლებული ვერსია, გაუმჯობესებული რეაგირებით, სკრიპტის მინიფიკაციით და ხელახალი გადამუშავების/გადახაზვის მინიმუმამდე შემცირებით. მოდული მოიცავს ძირითად სლაიდერს, სლაიდების კონტროლს ესკიზებით, ჩაშენებულ მარცხნივ-მარჯვნივ ისრებით და ქვედა ნავიგაციის ზოლს ღილაკების სახით. ვიდეოს სლაიდებში ჩვენების შესაძლებლობა (ვიმეო), მოქნილი პარამეტრები (გადასვლები, დიზაინი, დროის ინტერვალი), სრულად ადაპტირებული განლაგება.

გალერია

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

მოცვი

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

jQuery popeye 2.1

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

თანმიმდევრობა

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

გადაფურცლეთ

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

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

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

FractionSlider

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

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

მთელი პატივისცემით, ანდრია

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

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

მაშ, რა მახასიათებლები შეიძლება აღინიშნოს ჩვენი jQuery სლაიდერის (რომელსაც მე ვუწოდე HWSlider)?

• გამოყენების სიმარტივე და დიზაინი - მინდოდა შემექმნა მარტივი სკრიპტი ზარების და სასტვენების გარეშე, ამიტომ არ გამოვიყენე CSS3 ანიმაციები და კოდი აღმოჩნდა ძალიან მრავალმხრივი და გასაგები.
• ორივე სურათის და ნებისმიერი HTML კოდის სლაიდებში ჩასმის შესაძლებლობა.
• სლაიდების გადახვევის შესაძლებლობა როგორც თანმიმდევრობით (წინ - უკან) და თითოეული სლაიდის არჩევა (1,2,3,4...)
• ავტომატურად გენერირებული ბმულები (წინა - შემდეგი და სლაიდების ნომრებით). თქვენ უბრალოდ უნდა ჩასვათ დივების საჭირო რაოდენობა, დანარჩენი ყველაფერი თავისთავად გამოითვლება. კარგად, შეიძლება აღინიშნოს, რომ სლაიდების რაოდენობა შეუზღუდავია.

სკრიპტი თავსებადია ყველა თანამედროვე ბრაუზერთან: IE, Opera, Firefox, Safari, Chrome (რადგან სლაიდერი არ იყენებს CSS3).

დავიწყოთ HTML მარკირებით. HTML გვერდი ან შაბლონი საჭირო ადგილას უნდა იყოს ჩასმული.

აქ არის სლაიდი 1-ის შინაარსი აი სლაიდი 2-ის შინაარსი აი სლაიდი 3-ის შინაარსი

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

#slider-wrap( /* Wrapper სლაიდერის და ღილაკებისთვის */ width:660px; ) #slider( /* Wrapper for slider */ width:640px; სიმაღლე:360px; overflow: დამალული; საზღვარი:#eee მყარი 10px; position:relative; .slide( /* სლაიდი */ სიგანე:100%; სიმაღლე:100%;) .sli-links control-slide( margin:2px; display:inline-block; სიგანე:16px; სიმაღლე:16px; overflow:hiden; text-indent:-9999px; background:url(radioBg.png) ცენტრის ქვედა არა-. გამეორება;) .sli -links .control-slide:hover( კურსორი:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton ( /* ბმული "შემდეგი" და "წინა" */ ჩვენება: ბლოკი; სიგანე: 15 პიქსელი; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზედა: 0; გადინება: დამალული; ტექსტის შეწევა: -999 პიქსელი; ფონი: url(arrowBg .png) გაუმჭვირვალობა: 0,8; #prewbutton:hover, #nextbutton:hover (გაუმჭვირვალობა:1;)

მოდით შევხედოთ მას უფრო დეტალურად. პირველ რიგში ვაძლევთ მთავარ ბლოკს, ID „slider-wrap“, სასურველ სიგანეს. მას შემდეგ, რაც ყველა სხვა ბლოკი არის ჩასმული, სიმაღლე არ არის საჭირო, ეს დამოკიდებული იქნება იმაზე, თუ რა არის შიგნით. შემდეგ ჩვენ უნდა დავაყენოთ კონტეინერის ზომები, რომელშიც განთავსდება სლაიდები. ეს არის #სლაიდერი. მივცეთ მას სიგანე და სიმაღლე, ისევე როგორც, მაგალითად, 10 პიქსელის საზღვარი. აქ სიგანე არის 640 პიქსელი, რაც ნაკლებია მშობლის სიგანეზე, რადგან ჩვენ ვამატებთ 10 პიქს საზღვრებს მარჯვნივ და მარცხნივ. თავად სლაიდების სიგანე (.slide) ასევე დამოკიდებულია ამ დივის სიგანეზე.

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

Selector.sli-links არის ბლოკი, რომელიც შეიცავს ღილაკებს საჭირო სლაიდზე გადასასვლელად. ეს ღილაკები არის ტიპის ნომრის მარტივი ელემენტები, რომლებიც ავტომატურად ჩასმული იქნება საჭირო რაოდენობით, მათ parent.sli-link-ებთან ერთად. ღილაკებს ვაყენებთ მშვენიერ იერს, კერძოდ, ვაკეთებთ თითოეულ ღილაკს კვადრატში, ვასწორებთ ყველა მათ ცენტრში და ასევე, გადატვირთვის წყალობით: დამალული და ტექსტური შეწევა:-9999 პიქსელი, ვხსნით ტექსტს და ვტოვებთ მხოლოდ ფონის ხატებს. , რომელიც ასევე იცვლება კურსორის ამ ელემენტზე მიტანისას. მოხერხებულობისთვის გამოვიყენე სპრაიტები, რამაც შეამცირა სურათების რაოდენობა.

შემდეგი, აქტიური ღილაკი შექმნილია. ჩვენ უბრალოდ ვცვლით ფონის პოზიციას. შემდეგ ჩვენ გადავამუშავებთ ბმულებს შემდეგ და წინა სლაიდებზე გადასასვლელად. თქვენ შეგიძლიათ მიანიჭოთ მათ ნებისმიერი დიზაინი, ისევე როგორც ღილაკები. ეს ბმულები ავტომატურად ჩასმულია #სლაიდერის შიგნით. მაგრამ იმისათვის, რომ ისინი ხილული ყოფილიყო, მე მათ მივეცი აბსოლუტური პოზიცია და ზედა ფენა (z-index:3), რათა ისინი გამოჩნდნენ სლაიდების ზემოთ. მე ვფიქრობ, რომ CSS-ით აქ ყველაფერი ნათელი და მარტივია: თქვენ შეგიძლიათ შეცვალოთ თითქმის ყველა თვისება, რათა შეიმუშავოთ სლაიდერი ისე, როგორც გჭირდებათ.

ახლა მოდით შევხედოთ თავად სცენარს:

Var hwSlideSpeed ​​= 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(დოკუმენტი).ready(function(e) ($(".slide").css(("პოზიცია" : "აბსოლუტური", "ზემო":"0", "მარცხნივ": "0")). დამალვა () .eq(0).show(); .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "შემდეგი")(if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else(slideNum = arrow; ) $(".slide").eq( slideNum) .fadeIn(hwSlideSpeed, rotator) $(".control-slide.active").removeClass("active").eq(slideNum) ; if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#სლაიდერი"); $("#nextbutton"). დააწკაპუნეთ(function())(animSlide("შემდეგი"); )) $( " #prewbutton". + ინდექსი + "" ) $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("აქტიური"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = false; var rotator = ფუნქცია())( if(!pause)(slideTime = setTimeout(function())(animSlide("შემდეგი")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pause = true;), function()(pause = false; rotator(); )); rotator(); ));

პირველ რიგში, პარამეტრები ინახება ცვლადებში: hwSlideSpeed ​​- სლაიდების ბრუნვის სიჩქარე, hwTimeOut - დრო, რომლის შემდეგაც სლაიდი ავტომატურად იცვლება, hwNeedLinks - აკონტროლებს "შემდეგი" და "წინა" ბმულებს - თუ ამ ცვლადის მნიშვნელობა არის მართალია, მაშინ ეს ბმულები გამოჩნდება, ხოლო თუ მცდარია, მაშინ ისინი არ იქნება (როგორც ჩემი ბლოგის მთავარ გვერდზე).

შემდეგი, ჩვენ დავაყენეთ სლაიდებისთვის საჭირო CSS თვისებები .css() მეთოდის გამოყენებით. ჩვენ ვაწყობთ ბლოკებს სლაიდებით ერთმანეთზე აბსოლუტური პოზიციონირების გამოყენებით, შემდეგ ვმალავთ მათ.hide() და ვაჩვენებთ მხოლოდ პირველს. slideNum ცვლადი არის აქტიური სლაიდის რიცხვი, ანუ მრიცხველი.

ჩვენი jQuery სლაიდერის მთავარი ლოგიკა არის animSlide ფუნქცია. ამას ერთი პარამეტრი სჭირდება. თუ მასში გადავცემთ სტრიქონებს „next“ ან „prew“, მაშინ იმუშავებს პირობითი ოპერატორები და გამოჩნდება, შესაბამისად, შემდეგი ან წინა სლაიდი. თუ ჩვენ გამოვგზავნით რიცხვს მნიშვნელობად, მაშინ ეს რიცხვი გახდება აქტიური სლაიდი და გამოჩნდება.

ასე რომ, ეს ფუნქცია მალავს მიმდინარე div-ს, ითვლის ახალს და აჩვენებს მას.

გაითვალისწინეთ, რომ .fadeIn() მეთოდს, რომელიც ხილვადს ხდის აქტიურ სლაიდს, მოცემულია მეორე არგუმენტი. ეს არის ეგრეთ წოდებული გამოძახების ფუნქცია. იგი შესრულებულია, როდესაც სლაიდი მთლიანად გამოჩნდება. ამ შემთხვევაში, ეს კეთდება სლაიდების ავტომატური გადახვევის უზრუნველსაყოფად. ქვემოთ განსაზღვრული rotator ფუნქცია კვლავ იძახებს animSlide ფუნქციას, რათა გადავიდეს შემდეგ სლაიდზე დროის სასურველ ინტერვალში: ჩვენ მივიღებთ დახურვას, რომელიც უზრუნველყოფს მუდმივ გადახვევას.

ყველაფერი კარგად მუშაობს, მაგრამ ჩვენ უნდა შევაჩეროთ ავტომატიზაცია, თუ მომხმარებელი კურსორს სლაიდერზე გადააადგილებს, ან დააჭერს ღილაკებს. ამ მიზნით იქმნება პაუზის ცვლადი. თუ მისი მნიშვნელობა დადებითია - მართალია, მაშინ ავტომატური გადართვა არ იქნება. .hover() მეთოდის გამოყენებით ვაზუსტებთ: გაასუფთავეთ ტაიმერი, თუ ის მუშაობს - clearTimeout(slideTime) და დააყენეთ პაუზა = true. და კურსორის გადაადგილების შემდეგ გამორთეთ პაუზა და გაუშვით rotator() დახურვა.

გარდა ამისა, ჩვენ უნდა შევქმნათ ახალი ელემენტები გვერდზე და განვათავსოთ ისინი სწორ ადგილას. თითოეული სლაიდისთვის ყოველი() ციკლის გამოყენებით (div კლასით .slide), ჩვენ შევქმნით span ელემენტს, რომლის შიგნით არის რიცხვი - სლაიდის ნომერი. ეს რიცხვი გამოიყენება ანიმაციის ფუნქციაში ამ ნომრით სლაიდზე გადასასვლელად. მოდით, ყველაფერი ჩავაკრათ დივში საჭირო კლასებით და ბოლოს მივიღებთ შემდეგ მარკირებას:

0 1 2 3

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

შედეგად, სლაიდერის განლაგება ასე გამოიყურება (გამოვიყენე სურათები სლაიდებად და დავაყენე 5 მათგანი):

0 1 2 3

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

და ბოლოს, რამდენიმე პუნქტი ამ სლაიდერის დრუპალთან ინტეგრაციის შესახებ. თქვენ შეგიძლიათ დაამატოთ ეს კოდი შაბლონის ფაილში, მაგალითად page.tpl.php-ში და დაურთოთ სკრიპტი, როგორც ცალკე js ფაილი თემას. დრუპალში Jquery ჩართულია ნაგულისხმევად, მაგრამ მუშაობს თავსებადობის რეჟიმში (). გაუმჯობესების ორი ვარიანტი არსებობს. ან შეფუთეთ ყველა js კოდი:

(ფუნქცია ($) ( // ყველა თქვენი კოდი... ))(jQuery);

ან შეცვალეთ $ სიმბოლოები მთელ სკრიპტში jQuery-ით. Ამგვარად:

JQuery(document).ready(function(e) (jQuery(".slide").css(("პოზიცია" : "აბსოლუტური", "ზემო":"0", "მარცხნივ": "0")). დამალვა () .eq(0).show();

მაგალითმა უკვე დანერგა პირველი მეთოდი.

Მადლობა წაკითხვისთვის! დატოვე კომენტარები, მოდი ისევ. თქვენ ასევე შეგიძლიათ გამოიწეროთ RSS, რომ პირველ რიგში მიიღოთ ბლოგის განახლებები!

დამატებულია: ეს ყველაფერი არ არის. წაიკითხეთ. აქ ჩვენ დავამატებთ ახალ ფუნქციებს ამ სკრიპტს.

თუ თქვენ გჭირდებათ jQuery გამოსახულების მაღალი ხარისხის სლაიდერის დამატება თქვენს საიტზე, მაშინ ამ სტატიაში ნახავთ საჭირო დანამატების აღწერას. მიუხედავად იმისა, რომ JQuery-მ ბევრად გააადვილა JavaScript-თან მუშაობა, ჩვენ მაინც გვჭირდება დანამატები ვებ დიზაინის პროცესის დასაჩქარებლად.

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

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

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

JQuery გამოსახულების სლაიდერები Jssor Responsive Slider

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

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

დემო | ჩამოტვირთვა

PgwSlider - საპასუხო სლაიდერი JQuery / Zepto-ზე დაფუძნებული

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

• ადაპტური განლაგება;
• SEO ოპტიმიზაცია;
• სხვადასხვა ბრაუზერების მხარდაჭერა;
• მარტივი გამოსახულების გადასვლები;
• არქივის ზომა არის მხოლოდ 2.5 KB.

დემო | ჩამოტვირთვა

Jquery ვერტიკალური ახალი ამბების სლაიდერი

მოქნილი და სასარგებლო JQuery სლაიდერი, რომელიც შექმნილია ახალი ამბების რესურსებისთვის, მარცხენა მხარეს პუბლიკაციების სიით და მარჯვნივ ნაჩვენები სურათით:

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

დემო | ჩამოტვირთვა

Wallop Slider

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

• ადაპტური განლაგება;
• მარტივი დიზაინი;
• სლაიდების შეცვლის სხვადასხვა ვარიანტები;
• მინიმალური JavaScript კოდი;
• ზომა მხოლოდ 3KB.

დემო | ჩამოტვირთვა

ბრტყელი სტილის პოლაროიდის გალერეა

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

• ადაპტაციური სლაიდერი;
• ბრტყელი დიზაინი;
• სლაიდების შემთხვევითი ცვლილება;
• სრული წვდომა საწყის კოდზე.

დემო | ჩამოტვირთვა

A-სლაიდერი

დემო | ჩამოტვირთვა

HiSlider – HTML5, jQuery და WordPress გამოსახულების სლაიდერი

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

• ადაპტაციური სლაიდერი;
• არ საჭიროებს პროგრამირების ცოდნას;
• რამდენიმე საოცარი შაბლონი და სკინი;
• ლამაზი გარდამავალი ეფექტები;
• სხვადასხვა პლატფორმის მხარდაჭერა;
• თავსებადია WordPress, Joomla, Drupal-თან;
• სხვადასხვა ტიპის კონტენტის ჩვენების შესაძლებლობა: სურათები, YouTube ვიდეოები და Vimeo ვიდეოები;
• მოქნილი დაყენება;
• სასარგებლო დამატებითი ფუნქციები;
• ნაჩვენები შინაარსის შეუზღუდავი რაოდენობა.

დემო |ჩამოტვირთვა

ვაა სლაიდერი

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

WOW Slider მოყვება ინსტალაციის ოსტატი, რომელიც საშუალებას გაძლევთ შექმნათ ფანტასტიკური სლაიდერები წამებში კოდის გაგების ან სურათების რედაქტირების გარეშე. მოდულის ვერსიები Joomla-სა და WordPress-ისთვის ასევე ხელმისაწვდომია ჩამოსატვირთად:

• სრულად რეაგირებადი;
• მხარს უჭერს ყველა ბრაუზერს და ყველა ტიპის მოწყობილობას;
• სენსორული მოწყობილობების მხარდაჭერა;
• მარტივი ინსტალაცია WordPress-ზე;
• მოქნილობა კონფიგურაციაში;
• SEO ოპტიმიზირებულია.

დემო |ჩამოტვირთვა

Nivo Slider – უფასო jQuery მოდული

Nivo Slider ცნობილია მთელ მსოფლიოში, როგორც ყველაზე ლამაზი და ადვილად გამოსაყენებელი გამოსახულების სლაიდერი. Nivo Slider მოდული უფასოა და გამოშვებულია MIT ლიცენზიით:

• მოითხოვს JQuery 1.7 და ზემოთ;
• ლამაზი გარდამავალი ეფექტები;
• მარტივი და მოქნილი კონფიგურაციისთვის;
• კომპაქტური და ადაპტური;
• Საჯარო წყარო;
• ძლიერი და მარტივი;
• რამდენიმე განსხვავებული შაბლონი;
• სურათის ავტომატური ამოჭრა.

დემო |ჩამოტვირთვა

მარტივი jQuery სლაიდერი ტექნიკური დოკუმენტაციით

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

• ადაპტური განლაგება;
• მინიმალისტური დიზაინი;
• სხვადასხვა გამოტოვების და სლაიდების შეცვლის ეფექტები.

დემო |ჩამოტვირთვა

სრული ზომის jQuery გამოსახულების სლაიდერი

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

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

• ადაპტური JQuery სლაიდერი;
• სრული ზომა;
• მინიმალისტური დიზაინი.

დემო |ჩამოტვირთვა

Elastic Content Slider + გაკვეთილი

Elastic Content Slider ავტომატურად არეგულირებს სიგანეს და სიმაღლეს საწყისი ელემენტის ზომებზე დაყრდნობით. ეს არის მარტივი jQuery სლაიდერი. იგი შედგება სლაიდის ზონისგან ზედა და ნავიგაციის ჩანართების ზოლისგან ბოლოში. სლაიდერი არეგულირებს მის სიგანეს და სიმაღლეს მშობელი კონტეინერის ზომების მიხედვით.

პატარა დიაგონალურ ეკრანებზე ნახვისას ნავიგაციის ჩანართები იქცევა პატარა ხატებად:

• ადაპტაციური დიზაინი;
• მაუსის დაწკაპუნებით გადახვევა.

დემო |ჩამოტვირთვა

უფასო 3D დასტის სლაიდერი

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

• ადაპტაციური დიზაინი;
• Flip - გარდამავალი;
• 3D ეფექტები.

დემო |ჩამოტვირთვა

Fullscreen Slit Slider დაფუძნებული JQuery-სა და CSS3 + ტუტორიალზე

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

• ადაპტაციური დიზაინი;
• გაყოფილი გადასვლა;
• სრული ეკრანის სლაიდერი.

დემო |ჩამოტვირთვა

Unislider - ძალიან პატარა jQuery სლაიდერი

არ არის ზედმეტი ზარები და სასტვენები, 3KB-ზე ნაკლები ზომის. გამოიყენეთ ნებისმიერი HTML კოდი თქვენი სლაიდებისთვის, გააფართოვეთ იგი CSS-ით. Unslider-თან დაკავშირებული ყველაფერი მასპინძლობს GitHub-ზე:

• სხვადასხვა ბრაუზერების მხარდაჭერა;
• კლავიატურის მხარდაჭერა;
• სიმაღლის რეგულირება;
• ადაპტაციური დიზაინი;
• შეხების შეყვანის მხარდაჭერა.

დემო | ჩამოტვირთვა

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

მარტივი და კომპაქტური მოდული (მხოლოდ 1 კბ ზომით), რომელიც ქმნის საპასუხო სლაიდერს კონტეინერის შიგნით არსებული ელემენტების გამოყენებით. ResponsiveSLides.js მუშაობს ბრაუზერების ფართო სპექტრით, მათ შორის IE-ის ყველა ვერსია IE6-დან და ზემოთ:

• სრულად რეაგირებადი;
• ზომა 1 KB;
• CSS3 გადასვლები JavaScript-ით გაშვების შესაძლებლობით;
• მარტივი მარკირება ბურთულიანი სიების გამოყენებით;
• გარდამავალი ეფექტების მორგების შესაძლებლობა და ერთი სლაიდის ნახვის ხანგრძლივობა;
• მხარს უჭერს მრავალი სლაიდ შოუს შექმნის შესაძლებლობას;
• ავტომატური და ხელით გადახვევა.

დემო |ჩამოტვირთვა

კამერა - უფასო jQuery სლაიდერი

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

• სრულად რეაგირებადი დიზაინი;
• ხელმოწერები;
• ვიდეოების დამატების შესაძლებლობა;
• 33 სხვადასხვა ფერის ხატი.

დემო |ჩამოტვირთვა

SlidesJS, საპასუხო jQuery მოდული

SlidesJS არის პასუხისმგებელი დანამატი JQuery-სთვის (1.7.1 და ზემოთ) სენსორული მოწყობილობებისა და CSS3 გადასვლების მხარდაჭერით. ჩაატარეთ ექსპერიმენტი, სცადეთ რამდენიმე მზა მაგალითი, რომელიც დაგეხმარებათ გაიგოთ, როგორ დაამატოთ SlidesJS თქვენს პროექტში:

• ადაპტაციური დიზაინი;
• CSS3 გადასვლები;
• სენსორული მოწყობილობების მხარდაჭერა;
• მარტივი დაყენება.

დემო | ჩამოტვირთვა

BX Jquery Slider

ეს არის უფასო საპასუხო jQuery სლაიდერი:

• სრულად რეაგირებს - ადაპტირდება ნებისმიერ მოწყობილობაზე;
• ჰორიზონტალური, ვერტიკალური სლაიდის შეცვლა;
• სლაიდები შეიძლება შეიცავდეს სურათებს, ვიდეოებს ან HTML შინაარსს;
• გაფართოებული მხარდაჭერა სენსორული მოწყობილობებისთვის;
• CSS გადასვლების გამოყენება სლაიდების ანიმაციისთვის (ტექნიკის აჩქარება);
• API გამოძახებები და სრულიად საჯარო მეთოდები;
• ფაილის მცირე ზომა;
• მარტივი განხორციელება.

დემო |ჩამოტვირთვა

FlexSlider 2

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

დემო | ჩამოტვირთვა

Galleria - JavaScript-ზე დაფუძნებული საპასუხო ფოტო გალერეა

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

• სრულიად უფასო;
• სრული ეკრანის ნახვის რეჟიმი;
• 100% ადაპტირებული;
• არ არის საჭირო პროგრამირების გამოცდილება;
• iPhone, iPad და სხვა სენსორული მოწყობილობების მხარდაჭერა;
• Flickr, Vimeo, YouTube და სხვა;
• რამდენიმე თემა.

დემო | ჩამოტვირთვა

Blueberry - მარტივი საპასუხო jQuery გამოსახულების სლაიდერი

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

• მინიმალური დიზაინი;
• ადაპტური განლაგება;
• პრეზენტაციები.

დემო | ჩამოტვირთვა

jQuery Popeye 2.1

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

• ადაპტაციური დიზაინი;
• ხელმოწერის მხარდაჭერა;
• სლაიდ შოუს რეჟიმი.

დემო | ჩამოტვირთვა