ბევრ ადამიანს საკუთარ საიტზე უნდა ნახოს სლაიდერები - ეს არის ბლოკები, რომლებიც აჩვენებს ერთი შინაარსის ელემენტს ეკრანზე და გარკვეული პერიოდის შემდეგ ცვლის ამ კონტენტს მეორეზე. ბუნებრივია, ყველა ვებ დეველოპერს შეუძლია დამოუკიდებლად შექმნას სლაიდერი HTML, CSS და JavaScript გამოყენებით, მაგრამ ამას ყოველთვის არ აქვს აზრი. საკმაოდ დიდ დროს დახარჯავთ, მიუხედავად იმისა, რომ ინტერნეტში საკმაოდ ბევრი მზა გადაწყვეტაა, რომლებიც ცხოვრებას ბევრად აადვილებს და საიტს უფრო მიმზიდველს ხდის. ეს სტატია ყურადღებას გაამახვილებს ერთ-ერთ ამ გადაწყვეტაზე, სახელწოდებით Owl Carousel. ამ სლაიდერის დაყენება წარმოუდგენლად მარტივია, ასე რომ, დამწყებთათვისაც კი შეუძლია გაუმკლავდეს მას. ახლა თქვენ შეიტყობთ რა არის ეს სლაიდერი, ისევე როგორც სხვა მნიშვნელოვანი დეტალები. Owl Carousel-ის დაყენება ეტაპობრივი პროცესია, ასე რომ თქვენ უნდა შეისწავლოთ ეს მასალა მხოლოდ თანმიმდევრობით.
რა არის ეს და რატომ უნდა აირჩიოთ ეს კონკრეტული სლაიდერი?
Owl Carousel, რომლის კონფიგურაციას განვიხილავთ ამ სტატიაში, არის ძალიან ეფექტური დანამატი, რომელიც ამატებს თქვენს გვერდს ლამაზ და მოსახერხებელ სლაიდერს, რაც მნიშვნელოვნად შეუწყობს ხელს თქვენს მუშაობას საიტზე,დაზოგავს დიდ დროს, ძალისხმევას და ფულს. რა უპირატესობა აქვს ამ კონკრეტულ მოდულს, რადგან ინტერნეტში საკმაოდ ბევრი სლაიდერია? ფაქტია, რომ ეს სლაიდერი გთავაზობთ პერსონალიზაციის ათეულ ვარიანტს, რაც საშუალებას მოგცემთ გახადოთ თქვენი გვერდი უნიკალური და განუმეორებელი. ეს არის საპასუხო დანამატი, რომელიც იმუშავებს ბრაუზერის ყველა ვერსიაზე და ადვილად შეიძლება დაუკავშირდეს WordPress-სა და სხვა პოპულარულ CMS-ს. ზოგადად, ამ სლაიდერს ბევრი უპირატესობა აქვს, ამიტომ არჩევანი მის სასარგებლოდ აუცილებლად უნდა გააკეთოთ. თუმცა, სანამ Owl Carousel-ის დაყენებას დაიწყებთ, ეს დანამატი მაინც უნდა ჩაიტვირთოს.
ჩამოტვირთვა
Owl Carousel 2-ის დაყენება შეუძლებელია, თუ ის არ ჩამოტვირთეთ თქვენს კომპიუტერში და რადგან ეს არის ეტაპობრივი ინსტრუქცია, თავიდანვე უნდა დაიწყოთ. ამრიგად, პროგრამის ჩამოტვირთვა შესაძლებელია პაკეტის მენეჯერების გამოყენებით, მაგრამ ეს არის დეველოპერის მოწინავე ინსტრუმენტები, ასე რომ, აქ ჩვენ გეტყვით, როგორ მიიღოთ ეს მოდული სტანდარტული გზით. თქვენ უნდა შეხვიდეთ მოდულის ოფიციალურ ვებსაიტზე და ჩამოტვირთოთ მისი უახლესი ვერსია. ამის შემდეგ, ყველა გადმოწერილი ფაილი უნდა გადაიტანოთ თქვენი საიტის დირექტორიაში, მოამზადეთ მოსახერხებელი საქაღალდე, რომელსაც იგივე სახელი ჰქვია, როგორც თავად მოდული. გაითვალისწინეთ, რომ ეს მოდული შეფუთულია jQuery-თან, ასე რომ თქვენ უნდა გქონდეთ ეს ბიბლიოთეკაც ხელმისაწვდომი. კარგი, ამ მოდულის ჩამოტვირთვის შემდეგ, თქვენ უნდა იზრუნოთ შემდეგ ეტაპზე, რომელიც არის Owl Carousel სლაიდერის 2-ის დაყენება.
CSS
BOwl Carousel 1.3 პარამეტრები რჩება თითქმის იგივე, რაც უფრო ახალ ვერსიაში 2, დამატებულია მხოლოდ ახალი ფუნქციები. თუმცა, ძირითადი ინფორმაცია იგივე იქნება, დაწყებული თქვენს დოკუმენტში CSS-ის დამატებით. ასე რომ, პირველი ნაბიჯი არის ხაზის დამატება. რას გაძლევს ის? ეს არის სტრიქონი, რომელიც ატვირთავს საჭირო სტილებს საიტზე სლაიდერის საჩვენებლად. აქ შეგიძლიათ დაასრულოთ ვიზუალური დამუშავებით. თუმცა, არსებობს უფრო მოსახერხებელი და სწრაფი გამოსავალი. თქვენ ასევე შეგიძლიათ დაამატოთ ხაზი, რომელიც ასევე იტვირთება სლაიდერის ნაგულისხმევ თემას, რაც მყისიერად მზად იქნება გამოსაყენებლად. თქვენ შეგიძლიათ დაარედაქტიროთ ზოგიერთი სტილი, რათა თქვენი სლაიდერი იყოს უფრო უნიკალური და განსხვავებული და უფრო შესაფერისი თქვენი შინაარსისთვის. ბუნებრივია, Owl Carousel-ის პარამეტრები რუსულ ენაზე ძალიან მოსახერხებელი იქნება, მაგრამ ყველამ, ვინც ქმნის ვებგვერდებს, უნდა გაიგოს, რომ მას არ შეუძლია ინგლისური ენის ცოდნის გარეშე.
JavaSpript კავშირი
რა თქმა უნდა, სლაიდერი არ იმუშავებს JS-ის გარეშე, ამიტომ თქვენ ასევე უნდა იზრუნოთ, რომ ჩართოთ შესაბამისი ფაილი, რომელიც შეიცავს საჭირო კოდს. ამისათვის თქვენ უნდა ჩასვათ კოდის ხაზი დოკუმენტაციისგან, თუმცა ერთი პირობა უნდა დაკმაყოფილდეს. ყველამ იცის, რომ JS არის პროგრამირების ენა, რომელიც ასრულებს ყველა ბრძანებას თანმიმდევრობით, ამიტომ ამ შემთხვევაში თქვენ უნდა დაამატოთ კოდის ეს ხაზი იმ ხაზის შემდეგ, რომელიც ამატებს jQuery ბიბლიოთეკას თქვენს დოკუმენტში. მეტი JS-ით ამ სლაიდერის შემთხვევაში, თქვენ არაფერი გაქვთ გასაკეთებელისაჭიროა.
HTML კოდირება
აბა, თქვენ დააკავშირეთ სლაიდერი, ახლა მისი დიზაინისა და მორგების დროა. უპირველეს ყოვლისა, თქვენ უნდა დაწეროთ HTML კოდი, რომ სლაიდერი საერთოდ გამოჩნდეს თქვენს გვერდზე. ამისათვის თქვენ უნდა შექმნათ კონტეინერი, რომელიც შეიცავს სლაიდებს. ეს შეიძლება გაკეთდეს div ტეგის გამოყენებით, რომელსაც უნდა მიენიჭოს owl-carousel კლასი. სწორედ ეს კლასი უზრუნველყოფს სლაიდერთან დაკავშირებული ყველა სტილის გააქტიურებას. თქვენ ასევე შეგიძლიათ დაწეროთ სხვა კლასი - owl-theme. ეს გამოგადგებათ, თუ გადაწყვეტთ ნაგულისხმევი დიზაინის გამოყენებას ან სლაიდერის სტანდარტულ ვერსიას შემდგომი მუშაობის საფუძვლად.
შემდეგ თქვენ უნდა დაამატოთ თითოეული სლაიდი ცალკე კონტეინერში div ტეგით. რა თქმა უნდა, შეგიძლიათ გამოიყენოთ სხვა ტეგები, მაგრამ ეს ტეგი საუკეთესოა სლაიდერებისთვის.
ზარის დანამატი
და ბოლო, რაც უნდა გააკეთოთ იმისათვის, რომ მზა სლაიდერი გქონდეთ თქვენს საიტზე არის გამოიყენოთ კოდის ეს ბლოკი:
$(დოკუმენტი).ready(function(){
$(".owl-carousel").owlCarousel();
});
ის უზრუნველყოფს, რომ სლაიდერი იწყებს ფუნქციონირებას, ანუ გადახვევს შინაარსს, როდესაც თქვენი გვერდი იტვირთება. იგივე კოდით შეგიძლიათ Owl Carousel-ს დააკავშიროთ WordPress-თან. ამ მოდულის პარამეტრები მრავალრიცხოვანი და მრავალფეროვანია და ახლა თქვენ გაეცნობით ყველაზე საკვანძო პუნქტებს.
სლაიდერის გარეგნობის და ფუნქციონირების დაყენება
მაშ, რა ბრძანებები შეგიძლიათ გამოიყენოთ თქვენი სლაიდერის მოსარგებად? უპირველეს ყოვლისა, თქვენ უნდა დაიმახსოვროთ ელემენტების ბრძანება, რადგან მასთან ერთად შეგიძლიათ დააყენოთ სლაიდების კონკრეტული რაოდენობა თქვენს სლაიდერში. მარყუჟის ბრძანება საშუალებას მოგცემთ აირჩიოთ სლაიდერის ციკლი ან ბოლო ელემენტის გადახვევის შეჩერება. ასევე არის Drag ბრძანება, რომელსაც აქვს რამდენიმე ვარიანტი, როგორიცაა მაუსი და შეხება. პირველ შემთხვევაში, შეგიძლიათ გააკეთოთ ის ისე, რომ თქვენი სლაიდერის ელემენტები მაუსის დაჭერით გადაიტანოთ, ხოლო მეორე შემთხვევაში, შეხებით (ეს ბრძანება განკუთვნილია მობილური მოწყობილობებისთვის). კიდევ ერთი მნიშვნელოვანი ბრძანებაა nav, რომელიც ნავიგაციის ისრების ჩვენების საშუალებას იძლევა. მასთან ერთად, შეგიძლიათ გამოიყენოთ navText ბრძანება ნავიგაციის ღილაკებზე ეტიკეტების დასამატებლად. ასევე, არ უნდა დაივიწყოთ ავტომატური დაკვრის ბრძანება, რომელიც საშუალებას გაძლევთ ჩართოთ და გამორთოთ თქვენი სლაიდერის სლაიდების გადაბრუნების ავტომატური დაწყება გვერდის ჩატვირთვისას. ამ ბრძანებით თქვენ ასევე შეგიძლიათ გამოიყენოთ autoplayTimeout, რისთვისაც შეგიძლიათ დააყენოთ კონკრეტული მნიშვნელობა მილიწამებში, რომელიც განსაზღვრავს დროს თითოეული სლაიდის ავტომატურ შემობრუნებას შორის.
თუ იყენებთ საპასუხო ვებ დიზაინს, ანუ თქვენი გვერდის დიზაინი ავტომატურად იცვლება იმისდა მიხედვით, თუ რომელ მოწყობილობაზეა ნახული, მაშინ აუცილებლად უნდა გახსოვდეთ საპასუხო ბრძანება, რომელიც საშუალებას გაძლევთ დააყენოთ სლაიდების რაოდენობა. ეკრანის სიგანის მიხედვით ჩვენება, რომელზეც ნახულობენ გვერდი.
