მარტივი კარუსელი css-ით. ყველაზე წარმატებული jQuery კარუსელის მოდული
ამჟამად, სლაიდერი - კარუსელი - არის ფუნქციონირება, რომელიც უბრალოდ აუცილებელია ბიზნეს ვებსაიტზე, პორტფოლიოს ვებსაიტზე ან ნებისმიერ სხვა რესურსზე. სრულ ეკრანზე გამოსახულების სლაიდერებთან ერთად, ჰორიზონტალური კარუსელის სლაიდერები კარგად ჯდება ნებისმიერ ვებ დიზაინში.
ზოგჯერ სლაიდერი უნდა დაიკავოს საიტის გვერდის მესამედი. აქ კარუსელის სლაიდერი გამოიყენება გარდამავალი ეფექტებით და საპასუხო განლაგებით. ელექტრონული კომერციის საიტები იყენებენ კარუსელის სლაიდერს რამდენიმე ფოტოს ცალკეულ პოსტებში ან გვერდებზე საჩვენებლად. სლაიდერის კოდი თავისუფლად შეიძლება გამოყენებულ იქნას და შეიცვალოს თქვენი საჭიროებების შესაბამისად.
JQuery-ის გამოყენებით HTML5-თან და CSS3-თან ერთად, შეგიძლიათ გახადოთ თქვენი გვერდები უფრო საინტერესო, მიაწოდოთ მათ უნიკალური ეფექტები და მიიპყროთ ვიზიტორების ყურადღება საიტის კონკრეტულ არეალზე.
Slick – თანამედროვე კარუსელის სლაიდერის მოდულიSlick არის თავისუფლად ხელმისაწვდომი jquery მოდული, რომლის დეველოპერები ამტკიცებენ, რომ მათი გადაწყვეტა დააკმაყოფილებს თქვენს ყველა სლაიდერის მოთხოვნას. ადაპტაციური სლაიდერი - კარუსელს შეუძლია იმუშაოს მობილური მოწყობილობებისთვის "ფილა" რეჟიმში, ხოლო დესკტოპის ვერსიისთვის "გადაათრიეთ და ჩამოაგდეს" რეჟიმში.
შეიცავს "გაქრობის" გადასვლის ეფექტს, საინტერესო "ცენტრის რეჟიმში" ფუნქციას, სურათების ზარმაცი დატვირთვას ავტომატური გადახვევით. განახლებული ფუნქცია მოიცავს სლაიდების და სლაიდების ფილტრის დამატებას. ყველაფერი იმის უზრუნველსაყოფად, რომ თქვენ დააკონფიგურიროთ მოდული თქვენი მოთხოვნების შესაბამისად.
დემო რეჟიმი | ჩამოტვირთვა
Owl Carousel 2.0 – jQuery – მოდული სენსორულ მოწყობილობებზე გამოსაყენებლადამ დანამატს აქვს ფუნქციების დიდი ნაკრები, შესაფერისია როგორც დამწყებთათვის, ასევე გამოცდილი დეველოპერებისთვის. ეს არის კარუსელის სლაიდერის განახლებული ვერსია. მის წინამორბედსაც იგივე სახელი ერქვა.
სლაიდერს აქვს ჩაშენებული დანამატები საერთო ფუნქციონირების გასაუმჯობესებლად. ანიმაცია, ვიდეოს დაკვრა, სლაიდერის ავტომატური დაკვრა, ზარმაცი დატვირთვა, სიმაღლის ავტომატური რეგულირება - ეს არის Owl Carousel 2.0-ის ძირითადი მახასიათებლები.
მობილურ მოწყობილობებზე მოდულის უფრო მოსახერხებელი გამოყენებისთვის მოყვება გადათრევა და ჩამოშვების მხარდაჭერა.
მოდული შესანიშნავია დიდი სურათების ჩვენებისთვის, თუნდაც მობილური მოწყობილობების პატარა ეკრანებზე.
მაგალითები | ჩამოტვირთვა
საკმაოდ პატარა, მაგრამ ფუნქციურად მდიდარი jquery დანამატი, რომელიც საშუალებას გაძლევთ განათავსოთ სლაიდერი გვერდზე - კარუსელი, რომელსაც აქვს მცირე ბირთვი და არ მოიხმარს საიტის ბევრ რესურსს. მოდული შეიძლება გამოყენებულ იქნას ვერტიკალური და ჰორიზონტალური სლაიდერების საჩვენებლად, ანიმაციით და სურათების ნაკრების შესაქმნელად გალერეიდან.
მაგალითები | ჩამოტვირთვა
ულტრა კომპაქტური jQuery სლაიდერი - კარუსელი, რომლის ფუნქციონირება ბევრად აღემატება ჩვეულებრივ სლაიდერს. მათ შორისაა ერთი სურათის გადახედვა, მრავალჯერადი გამოსახულების კარუსელის ჩვენება და სათაურზე დაფუძნებული სლაიდერის ჩვენება.
მაგალითები | ჩამოტვირთვა
Owl carousel არის სლაიდერი, რომელიც მხარს უჭერს სენსორულ ეკრანებს და გადაათრიეთ და ჩამოაგდეს ტექნოლოგიას, ადვილად ინტეგრირებულია HTML კოდში. მოდული არის ერთ-ერთი საუკეთესო სლაიდერი, რომელიც საშუალებას გაძლევთ შექმნათ ლამაზი კარუსელები სპეციალურად მომზადებული მარკირების გარეშე.
მაგალითები | ჩამოტვირთვა
იყენებს 3D გადასვლებს CSS სტილების და მცირე Javascript კოდის საფუძველზე.
მაგალითები | ჩამოტვირთვა
ბრწყინვალე 3D კარუსელი. როგორც ჩანს, ეს ჯერ კიდევ ბეტა ვერსიაა, რადგან ახლა აღმოვაჩინე რამდენიმე პრობლემა. თუ გაინტერესებთ საკუთარი სლაიდერების ტესტირება და შექმნა, ეს კარუსელი დიდი დახმარება იქნება.
მაგალითები | ჩამოტვირთვა
საპასუხო სლაიდერი - კარუსელი ჩატვირთვის ტექნოლოგიის გამოყენებით მხოლოდ თქვენი ახალი ვებსაიტისთვის.
მაგალითები | ჩამოტვირთვა
ყველაზე პოპულარული პორტფოლიოს და ბიზნეს ვებსაიტებზე. ამ ტიპის სლაიდერი - კარუსელი - ხშირად გვხვდება ნებისმიერი ტიპის საიტებზე.
მაგალითები | ჩამოტვირთვა
ეს პატარა ზომის სლაიდერი მზადაა იმუშაოს მოწყობილობებზე ნებისმიერი ეკრანის გარჩევადობით. სლაიდერს შეუძლია მუშაობა როგორც წრიულ, ასევე კარუსელის რეჟიმში. პატარა წრე წარმოდგენილია, როგორც ამ ტიპის სხვა სლაიდერების ალტერნატივა. არის ჩაშენებული მხარდაჭერა IOS და Android ოპერაციული სისტემებისთვის.
წრიულ რეჟიმში სლაიდერი საკმაოდ საინტერესოდ გამოიყურება. შესანიშნავი მხარდაჭერა გადათრევის მეთოდისა და სლაიდების ავტომატური გადახვევის სისტემისთვის.
მაგალითები | ჩამოტვირთვა
მძლავრი, ადაპტური, კარუსელის სლაიდერი შესანიშნავია თანამედროვე ვებსაიტისთვის. მუშაობს სწორად ნებისმიერ მოწყობილობაზე. აქვს ჰორიზონტალური და ვერტიკალური რეჟიმები. მისი ზომა შემცირებულია მხოლოდ 1 კბ-მდე. ულტრა კომპაქტურ დანამატს ასევე აქვს შესანიშნავი გლუვი გადასვლები.
მაგალითები | ჩამოტვირთვა
შეიცავს 50-ზე მეტ ეფექტს, რომელიც დაგეხმარებათ შექმნათ ორიგინალური სლაიდერი თქვენი ვებსაიტისთვის.
მაგალითები | ჩამოტვირთვა
შეცვალეთ თქვენი ბრაუზერის ფანჯრის ზომა, რათა ნახოთ, როგორ ადაპტირდება სლაიდერი. Bxslider-ს გააჩნია 50-ზე მეტი პერსონალიზაციის ვარიანტი და აჩვენებს მის მახასიათებლებს სხვადასხვა გარდამავალი ეფექტებით.
მაგალითები | ჩამოტვირთვა
jCarousel არის jQuery მოდული, რომელიც დაგეხმარებათ თქვენი სურათების ნახვის ორგანიზებაში. თქვენ შეგიძლიათ მარტივად შექმნათ პერსონალური გამოსახულების კარუსელები მაგალითში ნაჩვენები ბაზიდან. სლაიდერი არის ადაპტირებული და ოპტიმიზირებულია მობილურ პლატფორმებზე მუშაობისთვის.
მაგალითები | ჩამოტვირთვა
Scrollbox არის კომპაქტური დანამატი სლაიდერის შესაქმნელად - კარუსელი ან ტექსტური სეირნობა. ძირითადი მახასიათებლები მოიცავს ვერტიკალურ და ჰორიზონტალურ გადახვევის ეფექტებს მაუსის ზევით შეჩერებით.
მაგალითები | ჩამოტვირთვა
მარტივი კარუსელის სლაიდერი. თუ გჭირდებათ სწრაფი მოდული, ეს არის 100% შესაფერისი. მოყვება მხოლოდ ძირითადი ფუნქციები, რომლებიც საჭიროა სლაიდერის მუშაობისთვის.
მაგალითები | ჩამოტვირთვა
Flexisel-ის შემქმნელები შთაგონებული იყვნენ ძველი სკოლის jCarousel მოდულით, მისი ასლი გააკეთეს, რომელიც მიზნად ისახავდა სლაიდერის სწორი მუშაობის უზრუნველყოფას მობილურ და ტაბლეტ მოწყობილობებზე.
Flexisel-ის საპასუხო განლაგება, როდესაც მუშაობს მობილურ მოწყობილობებზე, განსხვავდება ბრაუზერის ზომის ფანჯრის განლაგებისგან. Flexisel შესანიშნავად არის ადაპტირებული ეკრანებზე მუშაობისთვის, როგორც დაბალი, ასევე მაღალი გარჩევადობით.
მაგალითები | ჩამოტვირთვა
Elastislide შესანიშნავად ეგუება თქვენი მოწყობილობის ეკრანის ზომას. თქვენ შეგიძლიათ დააყენოთ სურათების მინიმალური რაოდენობა, რათა გამოჩნდეს კონკრეტული გარჩევადობით. კარგად მუშაობს, როგორც კარუსელის სლაიდერი სურათების გალერეებით, ფიქსირებული სახვევის გამოყენებით ვერტიკალური გადახვევის ეფექტთან ერთად.
მაგალითი | ჩამოტვირთვა
უფასო სლაიდერი Wootemes-ისგან. ის სამართლიანად ითვლება ერთ-ერთ საუკეთესო ადაპტაციურ სლაიდერად. მოდული შეიცავს რამდენიმე შაბლონს და სასარგებლო იქნება როგორც დამწყები მომხმარებლებისთვის, ასევე ექსპერტებისთვის.
მაგალითი | ჩამოტვირთვა
საოცარი კარუსელი – საპასუხო გამოსახულების სლაიდერი jQuery-ის გამოყენებით. მხარს უჭერს შინაარსის მართვის ბევრ სისტემას, როგორიცაა WordPress, Drupal და Joomla. ასევე მხარს უჭერს Android და IOS და დესკტოპის ოპერაციულ სისტემებს თავსებადობის პრობლემების გარეშე. ჩაშენებული საოცარი კარუსელის შაბლონები საშუალებას გაძლევთ გამოიყენოთ სლაიდერი ვერტიკალურ, ჰორიზონტალურ და წრიულ რეჟიმებში.
ერთ დღეს ჩემმა მეგობრებმა გადაწყვიტეს ჩემთვის სასიამოვნო სიურპრიზი მოეწყო. სიურპრიზი თავისთავად ძალიან მარტივი იყო, მას სჭირდებოდა ძალიან ჩვეულებრივი მაისური ყოველგვარი დიზაინის გარეშე.
შემდეგ კი მათ შეექმნათ პრობლემა - მაღაზიების ყველა მაისურზე იყო გამოსახულებები. უმარტივესი მაისური ნახატების გარეშე ვერ იპოვეს. ვფიქრობ, თქვენ შეგხვედრიათ მსგავსი პრობლემა, როცა უმარტივესს ვერ პოულობთ.
და ეს იგივე ამბავია კარუსელებთან დაკავშირებით, თითქმის ყველა კარუსელს აქვს დიზაინი. და თქვენ თითქმის ყოველთვის გჭირდებათ სუფთა კარუსელი, რომელიც შემდეგ შეგიძლიათ დააპროექტოთ ისე, როგორც დიზაინერმა განიზრახა.
ამიტომ, იმისთვის, რომ დაუყოვნებლივ ისიამოვნოთ კარუსელებთან მუშაობით და სწრაფად გააკეთოთ ისინი, გირჩევთ გამოიყენოთ შემდეგი მოდული.
jQuery მოდული სუფთა და ძლიერი კარუსელისთვისამ მოდულის ყველაზე მაგარი ის არის, რომ მას არ აქვს დიზაინი და ბევრად უფრო ადვილია მუშაობა, ვიდრე სხვა ლამაზი დანამატები.
მისი გაფორმება შესაძლებელია თქვენთვის სასურველი გზით.
ასე რომ, აქ არის ეს მოდული: Owl Carousel.
მოდულის ინსტალაცია1. დააკავშირეთ jQuery, თუ ის უკვე არ არის დაკავშირებული, მაგალითად ასე
2. დააკოპირეთ დანამატის ფაილები საიტის საქაღალდეში
- ამოფუთვა
- დააკოპირეთ owl-carousel საქაღალდე საიტზე
3. დააკავშირეთ ეს ფაილები საიტთან:
4. დაამატეთ კოდი გვერდზე
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. გაუშვით დანამატი
$(document).ready(function())( // იპოვნეთ კარუსელის ბლოკი var carousel = $("#carousel"); // გაუშვით კარუსელის დანამატი carousel.owlCarousel(); ));
6. ვაწყობთ
/* მთავარი ბლოკი */ .owl-wrapper-outer ( საზღვარი: 1px მყარი #777; საზღვრის რადიუსი: 5px; გადინება: დამალული; ფონი: თეთრი; ) /* 1 კარუსელის კვადრატი */ .კარუსელის ელემენტი ( padding: 30px ტექსტის გასწორება: შრიფტის ზომა: 300%;
ღილაკები უკან და წინამ მაგალითში მე ვაჩვენებ არა უსწრაფეს, არამედ უნივერსალურ მეთოდს.
1. დაამატეთ ღილაკები თავად
უკან წინ
2. ღილაკების მიმაგრება კარუსელის დანამატზე
მოდულის გაშვების შემდეგ დაამატეთ კოდი
// უკან // როდესაც დააწკაპუნებთ "უკან" $("#js-prev").click(function () ( // დაწყება მარცხენა carousel.trigger("owl.prev"); return false; )); // წინ // როდესაც დააწკაპუნებთ "წინ" $("#js-next"). დააწკაპუნეთ (ფუნქცია () ( // დაიწყეთ გადახვევა მარჯვნივ carousel.trigger ("owl.next"); დაბრუნება false; ) );
ახლა, როდესაც დააწკაპუნებთ "უკან" და "წინ", ამოქმედდება უკან გადახვევა.
მარკერებიეს ის პუნქტებია, რომლებიც გვიჩვენებს, სად ვართ ახლა.
მათი ჩართვა შესაძლებელია მოდულის გაშვებისას შემდეგი პარამეტრის დამატებით
// კარუსელის მოდულის გაშვება carousel.owlCarousel(( // პუნქტები კარუსელის პაგინაციის ქვეშ: true ));
/* დაბლოკვა წერტილებით */ .owl-page ( text-align: ცენტრში; /* წერტილების გასწორება შუაში */ ) /* 1 Point */ .owl-page ( სიგანე: 10px; სიმაღლე: 10px; საზღვარი: 1px მყარი დისპლეი: inline-block: white-radius: 5px) /* Active point */ .owl-page.active (ფონი: #777;)
მხოლოდ 1 ბლოკის ჩვენებაეს საკმაოდ ხშირად საჭიროა, ამისათვის ჩვენ ვამატებთ შემდეგ პარამეტრს
// კარუსელის მოდულის გაშვება carousel.owlCarousel(( singleItem: true, // აჩვენე მხოლოდ 1 ბლოკი მთელ სიგანეზე ));
ბლოკების სხვადასხვა რაოდენობა სხვადასხვა მოწყობილობებზეძალიან სასარგებლო ფუნქცია, რომელიც საშუალებას გაძლევთ შექმნათ ადაპტური კარუსელი მობილური მოწყობილობებისთვის.
// კარუსელის მოდულის გაშვება carousel.owlCarousel(( // ნაჩვენები ბლოკების რაოდენობა // მოწყობილობის მიხედვით (ეკრანის სიგანე) // ბლოკების რაოდენობა დიდ ეკრანებზე: 10, // 5 ბლოკი კომპიუტერებზე (ეკრანი 1400 პიქსელამდე 901 პიქსელი) ელემენტი სამუშაო მაგიდა : , // 3 ბლოკი პატარა კომპიუტერებზე (ეკრანი 900 პიქსელიდან 601 პიქსელამდე) ელემენტი სამუშაო მაგიდა მცირე: , // 2 ელემენტი ტაბლეტებზე (ეკრანი 600-დან 480 პიქსელამდე) ელემენტი ტაბლეტი: , // ტელეფონის პარამეტრები გამორთულია, ამ შემთხვევაში ისინი გამორთულია იქნება // გამოყენებული იქნება ტაბლეტის პარამეტრების ელემენტები მობილური: false ));
ეს რა სიურპრიზია?ჩემს დაბადების დღეზე მეგობრები მოდიან, მხიარულად იღიმებიან, სიამოვნება ჭარბობს. საზეიმოდ მაჩუქებენ.
ვხსნი და მაისურს ვათვალიერებ. მე ვხსნი მას. ჯანდაბა, რა სისულელეა. ამ მაისურზე ჩემს 3 ფოტოს ვხედავ. მაისური ჩავიცვი და ყველა სიცილს იწყებს, სულელური და სასაცილო გამოვიდა.
როცა ამ თემის შესწავლა დავიწყე, 3D კარუსელი არ მჭირდებოდა, მაგრამ მისი განხორციელების ტექნიკური დეტალები უფრო მაინტერესებდა. რა თქმა უნდა, გამოყენებული ძირითადი ტექნიკა, რა თქმა უნდა, არის CSS Transforms Module Level 1, მაგრამ გამოყენებული იქნება სხვა ფრონტ-ენდის განვითარების ტექნოლოგიების ჯგუფიც, რომლებიც შეეხება სხვადასხვა თემებს CSS, Sass და კლიენტის მხარეს JavaScript-ში.
დემოCSS 3D ტრანსფორმაციების დაყენების საილუსტრაციოდ, მე გაჩვენებთ კომპონენტის მხოლოდ CSS ვერსიას. შემდეგ მე გაჩვენებთ როგორ გააუმჯობესოთ ის JavaScript-ით მარტივი კომპონენტის სკრიპტის შემუშავებით.
მარკირება კარუსელისთვის რვა სურათითგანლაგებისთვის, კომპონენტის შიგნით გამოსახულებები შეფუთულია ელემენტის შიგნით, რომელიც უზრუნველყოფს საბაზისო ჩონჩხს:
ეს იქნება ჩვენი საფუძველი.
გეომეტრიული კარუსელის სტრუქტურასანამ CSS-ს შევხედავთ, მოდით შევხედოთ მონახაზს, რომელიც განვითარდება შემდეგ განყოფილებებში.
ესენი ელემენტები უნდა განლაგდეს კარუსელის მიერ გამოკვეთილ წრეში. ეს წრე შეიძლება მიახლოებული იყოს მისი შემოსაზღვრული რეგულარული მრავალკუთხედით და მის ფლანგზე გამოსახულებით:
ამრიგად, ასეთი მრავალკუთხედის გვერდების რაოდენობა ემთხვევა კარუსელში გამოსახულებების რაოდენობას:
სამი გამოსახულების მქონე მრავალკუთხედი არის ტოლგვერდა სამკუთხედი;
ოთხი გამოსახულებით ეს არის კვადრატი;
ხუთი ხუთკუთხედით; და ასე შემდეგ:
მრავალკუთხედის განსაზღვრა შეუძლებელია და შემდეგი პროცედურის გამოყენება შეუძლებელია. ყოველ შემთხვევაში, ერთი გამოსახულების შემთხვევა საკმაოდ უსარგებლოა; ორი გამოსახულება გარკვეულწილად უფრო სავარაუდოა და შეიძლება განთავსდეს წრეზე ორ დიამეტრალურად საპირისპირო წერტილზე. სიმარტივისთვის, ეს განსაკუთრებული შემთხვევები არ არის დამუშავებული და მინიმუმ სამი სურათია ნავარაუდევი. თუმცა, კოდის შედარებითი ცვლილებები არ იქნება რთული.
ეს წარმოსახვითი საცნობარო პოლიგონი განლაგდება სამგანზომილებიან სივრცეში ხედის სიბრტყის პერპენდიკულარულად და მისი ცენტრი უკან დაიხევს ეკრანზე მისი აპოთემის ტოლი მანძილით, პოლიგონის გვერდის დაშორებით ცენტრიდან. როგორც ნაჩვენებია ნახ. ეს არის კარუსელის ზემოდან ქვემოთ ხედი:
ამგვარად, მხარე, რომელიც ამჟამად მაყურებლის წინაშეა, ეკრანის სიბრტყეზე იქნება z = 0, ხოლო წინა სურათი, რომელიც არ იმოქმედებს შემცირების პერსპექტივით, იქნება მისი ნორმალური 2D ზომის. d სურათზე ასო წარმოადგენს CSS პერსპექტივის თვისების მნიშვნელობას.
კარუსელის გეომეტრიის აგებაამ განყოფილებაში მე გაჩვენებთ CSS-ის ძირითად წესებს, რომლებსაც ეტაპობრივად გავივლი.
კოდის შემდეგი ფრაგმენტები იყენებენ Sass-ის ზოგიერთ ცვლადს, რათა კომპონენტი უფრო კონფიგურირებადი გახდეს. გამოვიყენებ $n-ს კარუსელში სურათების რაოდენობის აღსანიშნავად და $item-width გამოსახულების სიგანის მითითებისთვის.
ელემენტი არის პირველი სურათის შემცველი ფანჯარა და საცნობარო ელემენტი, რომლის გარშემოც განლაგდება და გარდაიქმნება სხვა სურათები.
თუ ვივარაუდებთ, რომ კარუსელს მხოლოდ ერთი გამოსახულება ჰქონდა საჩვენებელი, შემიძლია დავიწყოთ ზომითა და გასწორებით:
კარუსელი ( ჩვენება: flex; flex-მიმართულება: სვეტი; გასწორება-ერთები: ცენტრი; > * ( flex: 0 0 auto; ) .figure ( width: $item-width; transform-style: ruaj-3d; img ( სიგანე: 100% &:not(:first-of-type) ( ჩვენება: არცერთი /* მხოლოდ ახლა */ ) ) )
ელემენტს აქვს კარუსელის ელემენტის მოცემული სიგანე და მას აქვს გამოსახულების იგივე სიმაღლე (ისინი შეიძლება იყოს სხვადასხვა ზომის, მაგრამ მათ უნდა ჰქონდეთ იგივე ასპექტის თანაფარდობა). ამ გზით კარუსელის კონტეინერის სიმაღლე ადაპტირდება გამოსახულების სიმაღლეზე. გარდა ამისა, იგი ჰორიზონტალურად არის ორიენტირებული კარუსელის კონტეინერში.
პირველ სურათს დამატებითი ტრანსფორმაციები არ სჭირდება, რადგან ის უკვე სამიზნე მდგომარეობაშია, რომელიც კარუსელის წინა მხარეა.
კარუსელის ბრუნვა შესაძლებელია 3D სივრცეში ელემენტზე ბრუნვის ტრანსფორმაციის გამოყენებით. ეს როტაცია უნდა იყოს პოლიგონის ცენტრის გარშემო, ამიტომ მე შევცვლი ტრანსფორმაციის თავდაპირველ საწყისს:
კარუსელის ფიგურა ( ტრანსფორმაციის წარმოშობა: 50% 50% (-$apothem); )
ეს მნიშვნელობა უარყოფილია, რადგან CSS-ში z-ღერძის დადებითი მიმართულება არის ეკრანის გარეთ, მაყურებლისკენ. ფრჩხილები აუცილებელია Sass სინტაქსის შეცდომების თავიდან ასაცილებლად. აპოთემის მრავალკუთხედის გამოთვლა მოგვიანებით იქნება ახსნილი.
ელემენტის საცნობარო ჩარჩოს თარგმნით, მთელი კარუსელი შეიძლება შემობრუნდეს ბრუნვით (ახალ) y ღერძზე:
კარუსელის ფიგურა ( ტრანსფორმაცია: rotateY(/* გარკვეული თანხა აქ */rad); )
ამ გადახვევის დეტალებს მოგვიანებით დავუბრუნდები.
მოდით გადავიდეთ სხვა სურათების გარდაქმნებზე. აბსოლუტური პოზიციონირებით, სურათები იკეცება შიგნით:
კარუსელის ფიგურა img:not(: first-of-type) (პოზიცია: აბსოლუტური; მარცხნივ: 0; ზედა: 0; )
ეს z-ინდექსის მნიშვნელობები იგნორირებულია, რადგან ისინი მხოლოდ წინასწარი ნაბიჯია შემდეგი ტრანსფორმაციებისთვის. ფაქტობრივად, ყოველი სურათი ახლა შეიძლება შემობრუნდეს კარუსელის y-ღერძის გასწვრივ ბრუნვის კუთხით, რომელიც დამოკიდებულია იმ პოლიგონის მხარეს, რომელზეც გამოსახულება არის მინიჭებული. პირველ რიგში, როგორც ეს ხდება ელემენტთან, ის ცვლის გამოსახულების ნაგულისხმევ წარმოშობას პოლიგონის ცენტრში გადატანით:
Img:not(:first-of-type) ( transform-origin: 50% 50% (-$apothem); )
გამოსახულება შეიძლება შემოტრიალდეს ახალ y ღერძზე ($i - 1) * $თეტა რადიანებით, სადაც $i არის სურათის ინდექსი (დაწყებული ერთიდან) და $theta = 2 * $PI. / $n, $PI წარმოადგენს მათემატიკურ მუდმივ პის. მაშასადამე, მეორე გამოსახულება შემობრუნდება $theta მესამე 2 * $theta-ით და ასე შემდეგ, სანამ ბოლო გამოსახულება უნდა შემოტრიალდეს ($n - 1) * $theta .
სურათების ეს შედარებითი პოზიციონირება შენარჩუნდება კარუსელის ბრუნვის დროს (ანუ ბრუნვები შეცვლილი y ღერძის გარშემო) ჩადგმული CSS ტრანსფორმაციების იერარქიული ბუნების გამო.
თითოეული სურათის როტაციის ეს რაოდენობა შეიძლება დაინიშნოს @for Sass კონტროლის დირექტივის გამოყენებით:
კარუსელის ფიგურა img ( @$i-სთვის 2-დან $n-მდე ( &:nth-child(#($i)) ( ტრანსფორმაცია: rotateY(#(($i - 1) * $theta)rad); ) ) )
ეს იყენებს for...tough კონსტრუქციის ნაცვლად for...to იმიტომ, რომ ნაცვლად for... ბოლო მნიშვნელობას, რომელიც მინიჭებულია ინდექსის ცვლადზე $i იქნება n-1 ნაცვლად n .
გაითვალისწინეთ #() Sass ინტერპოლაციის სინტაქსის ორი მაგალითი. პირველ შემთხვევაში გამოიყენება index:nth-child() სელექტორისთვის;
მეორე შემთხვევაში, ის გამოიყენება ბრუნვის თვისების მნიშვნელობის დასაყენებლად.
მრავალკუთხედის აპოთემის გამოთვლა დამოკიდებულია გვერდების რაოდენობაზე და გვერდის სიგანეზე, ანუ $n და $item-width ცვლადებზე.
ფორმულა:
$image-width / (2 * tan($PI/$n))
სადაც tan() არის ტანგენტის ტრიგონომეტრიული ფუნქცია.
ეს ფორმულა შეიძლება მიღებული იყოს გარკვეული გეომეტრიით და ტრიგონომეტრიით. კალმის წყაროში ეს ფორმულა არ არის განხორციელებული ისე, როგორც დაწერილია, რადგან ტანგენტის ფუნქცია მიუწვდომელია Sass-ში, ამიტომ მის ნაცვლად გამოიყენება მყარი მნიშვნელობა. ამის ნაცვლად, ფორმულა სრულად განხორციელდება JavaScript-ის დემო ვერსიაში.
მანძილი კარუსელის ელემენტებს შორისამ ეტაპზე კარუსელის გამოსახულებები გვერდიგვერდ „იკერება“ სასურველი მრავალკუთხედის ფორმის მისაღებად. მაგრამ აქ ისინი მჭიდროდ არის შეფუთული და ხშირად 3D კარუსელებში მათ შორის სივრცეა. ეს მანძილი აძლიერებს 3D სივრცის აღქმას, რადგან ის საშუალებას გაძლევთ იხილოთ საპირისპირო სურათები კარუსელის უკანა მხარეს.
თქვენ შეგიძლიათ კიდევ დაამატოთ ეს მანძილი სურათებს შორის სხვა კონფიგურაციის ცვლადის $item-separation-ის შემოღებით და თითოეულისთვის ჰორიზონტალური შუამავლის გამოყენებით. ელემენტი. უფრო ზუსტად, ამ მნიშვნელობის ნახევარის აღება მარცხენა და მარჯვენა ბალიშისთვის:
კარუსელის ფიგურა img ( padding: 0 $item-separation / 2; )
გამოსახულებები გაკეთდა ნახევრად გამჭვირვალე გამჭვირვალობის თვისებით, კარუსელის სტრუქტურის უკეთ ილუსტრაციისთვის, ხოლო კარუსელის ძირის ელემენტზე მოქნილი განლაგება გამოყენებული იყო მისი ვერტიკალურად დასაყრდენად.
მბრუნავი კარუსელიკარუსელის როტაციის შესამოწმებლად გასაადვილებლად, მე ვაპირებ დავამატო UI კონტროლი სურათებს შორის ნავიგაციისთვის. იხილეთ CodePen-ის დემო ვერსია HTML, CSS და JavaScript-ისთვის ამ კონტროლის განხორციელებისთვის; აქ მხოლოდ როტაციასთან დაკავშირებულ კოდს აღვწერ.
ჩვენ ვიყენებთ currImage მთელი რიცხვის ცვლადს, რომელიც მიუთითებს რომელი სურათია კარუსელის წინა მხარეს. როდესაც მომხმარებელი ურთიერთქმედებს წინა/შემდეგ ღილაკებთან, ეს ცვლადი იზრდება ან მცირდება ერთით.
CurrImage-ის განახლების შემდეგ, კარუსელის როტაცია ხდება:
Figure.style.transform = `rotateY($(currImage * -theta)rad)`;
(აქ და შემდეგ ფრაგმენტებში, ES6 შაბლონის ლიტერალები გამოიყენება სტრიქონებში გამონათქვამების ინტერპოლაციისთვის. მოგერიდებათ გამოიყენოთ ტრადიციული "+" შეერთების ოპერატორი, თუ გსურთ)
სადაც თეტა იგივეა, რაც ადრე:
NumImages = figure.childElementCount; თეტა = 2 * მათემატიკა.PI/numImages;
როტაცია ხდება - თეტა იმის გამო, რომ შემდეგ პუნქტზე გადასვლა მოითხოვს საათის ისრის საწინააღმდეგო როტაციას და ასეთი ბრუნვის მნიშვნელობები უარყოფითია CSS გარდაქმნებში.
გაითვალისწინეთ, რომ ეს currImage მნიშვნელობა არ შემოიფარგლება დიაპაზონით, არამედ შეიძლება გაიზარდოს განუსაზღვრელი ვადით, როგორც დადებითი, ასევე უარყოფითი მიმართულებით. სინამდვილეში, თუ წინა პანელზე სურათი არის ბოლო (ასე რომ currImage==n-1) და მომხმარებელი დააჭერს შემდეგ ღილაკს, თუ currImage 0-ზე გადავაყენებთ კარუსელის პირველ სურათზე გადასასვლელად, იქნება გარდამავალი ბრუნვის კუთხე (n-1) *თეტადან 0-მდე და ეს მოაბრუნებს კარუსელს ყველა წინა სურათის საპირისპირო მიმართულებით. მსგავსი პრობლემა შეიძლება წარმოიშვას წინა ღილაკის დაჭერისას, როდესაც პირველი სურათი პირველია.
იმისათვის, რომ ვიყო პრეტენზიული, უნდა შევამოწმო currentImage-ის პოტენციური გადადინება, რადგან Number მონაცემთა ტიპს არ შეუძლია მიიღოს თვითნებურად დიდი მნიშვნელობები. ეს შემოწმებები არ არის დანერგილი დემო კოდში.
კარუსელის მიღმა ძირითადი CSS-ის ნახვის შემდეგ, JavaScript ახლა შეიძლება გამოყენებულ იქნას კომპონენტის გასაუმჯობესებლად რამდენიმე გზით, როგორიცაა:
- სურათების ნებისმიერი რაოდენობა
- სურათები პროცენტული სიგანით
- კარუსელის მრავალი შემთხვევა თითო გვერდზე
- თითო ინსტანციის კონფიგურაციები, როგორიცაა უფსკრული ზომა და უკანა მხარის ხილვადობა
- კონფიგურაცია HTML5* მონაცემთა ატრიბუტების გამოყენებით
პირველ რიგში, მე ამოვხსნი ცვლადებს და წესებს, რომლებიც დაკავშირებულია გარდაქმნის წარმოშობასთან და ბრუნვასთან სტილის ფურცლიდან, რადგან ეს გაკეთდება JavaScript-ის გამოყენებით:
$item-width: 40%; // ახლა შეგვიძლია გამოვიყენოთ პროცენტები $item-separation: 0px; // ეს ახლა დაყენებულია Js $viewer-distance: 500px; .კარუსელი ( padding: 20px; პერსპექტივა: $viewer-დისტანცია; overflow: დამალული; ჩვენება: flex; flex-direction: სვეტი; გასწორება-ერთები: ცენტრი; > * ( flex: 0 0 auto; ) ფიგურა ( ზღვარი: 0; სიგანე: $item-width: save-3d: transform 0.5s img ( width: 100%; box-sizing: border-box; padding: 0 $item-separation; :პირველი ტიპის) (პოზიცია: აბსოლუტური; მარცხნივ: 0; ზედა: 0; ) ) )
ფუნქცია კარუსელი (root) ( // მალე... )
ძირეული არგუმენტი ეხება DOM ელემენტს, რომელიც შეიცავს კარუსელს.
ჩვეულებრივ, ეს ფუნქცია იქნება კონსტრუქტორი, რომელიც გენერირებს ერთი ობიექტის თითოეულ კარუსელს გვერდზე, მაგრამ მე აქ არ ვწერ კარუსელის ბიბლიოთეკას, ამიტომ მარტივი ფუნქცია საკმარისი იქნება.
იმავე გვერდზე მრავალი კომპონენტის შესაქმნელად, კოდი ელოდება ყველა სურათის ჩატვირთვას, მსმენელის დარეგისტრირებით ფანჯრის ობიექტზე დატვირთვის მოვლენისთვის, და შემდეგ იძახებს carousel() თითოეულ ელემენტს კარუსელის კლასით:
Window.addEventListener("ჩატვირთვა", () => ( var carousels = document.querySelectorAll("carousel"); for (var i = 0; i< carousels.length; i++) { carousel(carousels[i]); } });
carousel() ასრულებს სამ ძირითად ამოცანას:
- ნავიგაციის პარამეტრები.
- გარდაქმნების დაყენება
- დაარეგისტრირეთ ფანჯრის ზომის შეცვლის მსმენელი, რათა შეინარჩუნოთ კარუსელის გამოხმაურება ახალ ხედის ზომასთან ადაპტაციისას
სანამ კონვერტაციის დაყენების კოდს გადავხედავ, მე გადავხედავ რამდენიმე საკვანძო ცვლადს და როგორ ხდება მათი ინიციალიზაცია ინსტანციის კონფიგურაციის საფუძველზე:
Var figure = root.querySelector("figure"), images = figure.children, n = images.length, gap = root.dataset.gap || 0, bfc = "bfc" root.dataset-ში;
სურათების რაოდენობა (n) ინიციალიზებულია ელემენტის ბავშვების რაოდენობის მიხედვით. უფსკრული სლაიდებს შორის, ინიციალიზებულია HTML5 data-gap ატრიბუტიდან, თუ დაყენებულია. უკანა მხარის ხილვადობის დროშა (bfc) იკითხება HTML5 მონაცემთა ნაკრების API-ს გამოყენებით. ეს მოგვიანებით გამოყენებული იქნება იმის დასადგენად, ხილული უნდა იყოს თუ არა კარუსელის უკანა მხარეს არსებული სურათები.
CSS Transforms-ის დაყენებაკოდი, რომელიც ადგენს CSS ტრანსფორმაციებთან დაკავშირებულ თვისებებს, ჩასმულია setupCarousel(). ეს ჩადგმული ფუნქცია იღებს ორ არგუმენტს. პირველი არის ელემენტების რაოდენობა კარუსელში, ანუ ზემოთ წარმოდგენილი ცვლადი. მეორე პარამეტრი s არის კარუსელის პოლიგონის გვერდის სიგრძე. როგორც უკვე აღვნიშნე, ეს უდრის სურათების სიგანეს, ასე რომ თქვენ შეგიძლიათ წაიკითხოთ ერთ-ერთი მათგანის მიმდინარე სიგანე getComputedStyle():
SetupCarousel(n, parseFloat(getComputedStyle(images).width));
ამ გზით გამოსახულების სიგანე შეიძლება დაყენდეს პროცენტული მნიშვნელობების გამოყენებით.
Window.addEventListener("ზომის შეცვლა", () => ( setupCarousel(n, parseFloat(getComputedStyle(images).width)); ));
სიმარტივისთვის, მე არ მესმის მსმენელის ზომის შეცვლა.
პირველი, რაც უნდა გააკეთოს setupCarousel()-მა არის გამოთვალოს პოლიგონის აპოთემა გადაცემული პარამეტრების და ადრე განხილული ფორმულის გამოყენებით:
Apothem = s / (2 * Math.tan(Math.PI / n));
შემდეგ ეს მნიშვნელობა გამოიყენება ფორმის ელემენტის ტრანსფორმაციის დასაწყისის შესაცვლელად კარუსელის ბრუნვის ახალი ღერძის შესაქმნელად:
Figure.style.transformOrigin = `50% 50% $(-apothem)px`;
შემდეგ სტილები გამოიყენება სურათებზე:
იყიდება (var i = 0; i< n; i++) { images[i].style.padding = `${gap}px`; } for (i = 1; i < n; i++) { images[i].style.transformOrigin = `50% 50% ${- apothem}px`; images[i].style.transform = `rotateY(${i * theta}rad)`; } if (bfc) { for (i = 0; i < n; i++) { images[i].style.backfaceVisibility = "hidden"; } }
პირველი მარყუჟი ანიჭებს ადგილს კარუსელის ელემენტებს შორის სივრცეს. მეორე მარყუჟი ადგენს 3D გარდაქმნებს. ბოლო ციკლი ამუშავებს უკანა კიდეებს, თუ შესაბამისი დროშა მითითებული იყო კარუსელის კონფიგურაციაში.
დაბოლოს, rotateCarousel() გამოიძახება მიმდინარე სურათის წინ გადასატანად. ეს არის პატარა დამხმარე ფუნქცია, რომელიც ნაჩვენები სურათის ინდექსის გათვალისწინებით, ატრიალებს ფორმის ელემენტს Y ღერძის გასწვრივ, რათა გადაიტანოს სამიზნე გამოსახულება წინ. ის ასევე გამოიყენება ნავიგაციის კოდით წინ და უკან ნავიგაციისთვის:
ფუნქცია rotateCarousel(imageIndex) ( figure.style.transform = `rotateY($(imageIndex * -theta)rad)`;)
აქ არის საბოლოო შედეგი, დემო ვერსია, რომელიც ქმნის მრავალ კარუსელს, თითოეული განსხვავებული კონფიგურაციით.
/* აქედან იწყება ჩვენი კარუსელი. Block.carousel-wrapper განლაგებულია შედარებით, wrapper.carousel-item განლაგებულია აბსოლუტურად. . */ .carousel-wrapper( position:relative; /* აბსოლუტურად განლაგებული ყუთები იღებენ სიმაღლეს და სიგანეს მათი მშობლისგან. ჩვენ ისინი გავხადეთ გამჭვირვალე ნაგულისხმევად და შემდეგ ისინი შეუფერხებლად გამოჩნდება ბმულებზე დაწკაპუნებისას.arrow-prev and.arrow- შემდეგ. ბალიშები მარცხნივ და მარჯვნივ ჩვენ შეგვიძლია განვათავსოთ ჩვენი ბმულები 50 პიქსელით ორიგინალური URL-ის ბმულები არ იყო მხოლოდ გამჭვირვალე მართკუთხედები */ .arrow(პოზიცია:აბსოლუტური; ზევით:0; ჩვენება:ბლოკი; სიგანე:100%; -webkit-tap-highlight. -color:rgba(0,0,0, 0 background:url("/carousel-arrow-dark.png")50%50%/20pxno-repeat. .arrow-prev( მარცხნივ:0; ) /* და მეორე არის მარჯვნივ, რადგან მე ვიყენებ იმავე სურათს ისრისთვის, ვატრიალებ 180 გრადუსით. */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) /* მე ძალიან მომწონს, როგორ გამოიყურება კარუსელის სლაიდები მუქ ფონზე და თუ block.carousel - ნივთს აქვს კლასი "light", მის ტექსტს ვცვლით თეთრად და ნაცრისფერის ნაცვლად ვიყენებთ თეთრ ისრებს. ორჯერ შეამოწმეთ, რომ ისრის გამოსახულებისკენ მიმავალი გზა სწორია */ &.light( ფერი:თეთრი; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* მოდით დავწეროთ მედია მოთხოვნა, რომ შევცვალოთ ისრების ზომა მოწყობილობებზე, ეკრანის უფრო მცირე ზომის.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background -პოზიცია:10px50% ) ) ) /* დააყენეთ ბმული სამიზნეების ჩვენება: არცერთი; ამ გზით, ჩვენ თავიდან ავიცილებთ ბრაუზერს, რომელიც მუდმივად ხტება კარუსელის ზევით ყოველ ჯერზე, როცა ისრებს ვაჭერთ. ეს თვისება ეფექტურია ნებისმიერი ელემენტისთვის, რომლის ID იწყება „target-item“-ით. */ ( display:none; ) /* ზემოთ, ჩვენ ყველა ჩვენი კარუსელის სლაიდი გავხადეთ გამჭვირვალე, რაც ნიშნავს, რომ როდესაც კარუსელი იტვირთება, მის ნაცვლად მივიღებთ დიდ ცარიელ ყუთს. მოდით შევცვალოთ პირველი სლაიდის გამჭვირვალობის მნიშვნელობა ჩვენებისთვის 1-ით. ჩვენ ასევე დავაყენეთ z-ინდექსი 2-ზე, განვათავსებთ მას დანარჩენ სლაიდებზე მაღლა. */ .item-1( z-index:2; opacity:1; ) /* მაგრამ ჩვენ არ გვინდა, რომ პირველ სლაიდს ყოველთვის ჰქონდეს გამჭვირვალობის მნიშვნელობა: 1; წინააღმდეგ შემთხვევაში, ჩვენ მოგვიწევს ამ სლაიდის გავლა, სხვების როტაციისას. */ *:target~.item-1( opacity:0; ) /* ..მაგრამ თუ #target-item-1 არის ფოკუსში და გვინდა პირველი სლაიდის ჩვენება, მაშინ აირჩიეთ ის ~ ხატულაზე და დააყენეთ გამჭვირვალობა ისევ 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* თუ სხვა target-item-# არის ფოკუსირებული, აირჩიეთ ისინი ~ სელექტორის გამოყენებით, შეუფერხებლად აჩვენეთ და განათავსეთ ისინი ზევით z-ინდექსის გამოყენებით: 3. აქ შეგიძლიათ დაამატოთ დამატებითი სპანები სამიზნე ნივთის იდენტიფიკატორით, თუ მათგან სამზე მეტი გაქვთ. შეიძლება ერთდროულად დაამატოთ 10 ცალი.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3(z-index:3; opacity:1; ) )
1. jQuery კარუსელი „clickCarousel“
დაბლოკვა გადახვევის ახალი ამბების განცხადებებით. გამოიყენეთ მარცხენა/მარჯვენა ისრები ბლოკებში გადასასვლელად. არქივი შეიცავს კარუსელს ორ სტილში: ღია და მუქი.
1. jQuery კარუსელი, მოდული „carouFredSel“
სუფთა, ახალი გამოსახულების კარუსელი jQuery-ში.
4. jQuery მოდული: კარუსელი „Elastislide“
დიდი შინაარსის სლაიდერები გამოსახულების კარუსელის სახით jQuery-ის გამოყენებით. დემო გვერდი აღწერს, თუ როგორ უნდა მიამაგროთ ეს კარუსელი თქვენს საიტზე.
Slider Kit მოდული, მსუბუქი კარუსელი სხვადასხვა გადახვევის მეთოდებით.
7. javascript კარუსელი
ორიგინალური ნავიგაცია გამოსახულების ესკიზებს შორის. დემო გვერდის მარჯვენა მხარეს ეფექტის სანახავად დააწკაპუნეთ ღილაკებზე მაღლა და ქვევით. jQuery-ის ეს გადაწყვეტა ასევე უზრუნველყოფს მინიატურაზე გადაადგილების ეფექტს და მაუსის ბორბლით გადახვევას.
9. მარტივი კარუსელი 10. კარუსელი დამზადებული "Easy Paginate" ბლოკებისგან
jQuery მოდული "Easy Paginate". თითოეული მართკუთხა ბლოკი წარმოადგენს რეგულარულ li სიის ერთეულს და თუ არის სამზე მეტი ელემენტი, მაშინ მათი სანახავად საჭიროა გამოიყენოთ სლაიდერის მსგავსი ნავიგაცია (ისრების „წინ“, „უკან“ და ნავიგაციის ღილაკების გამოყენებით ქვედა).
11. ვერტიკალური Ticker rotator
ვერტიკალური rotator jQuery-ზე: გვერდის შინაარსის ავტომატური გადახვევა. მოწოდებულია ნავიგაციის ღილაკები, ასევე როტაციის შეჩერებისა და ხელახლა დაწყების შესაძლებლობა. როდესაც მაუსის კურსორს ატარებთ, მოძრაობა ჩერდება. HTML მარკირების დონეზე, გადახვევის ბლოკები წარმოდგენილია ჩვეულებრივი li სიის ელემენტებით.
12. javascript CSS გადახვევის არე
javascript გადაწყვეტა "TinyScroller" DIV კონტეინერში მოთავსებული გადახვევის არეალის შესაქმნელად.
13. jQuery მოდული „Smooth Div Scroll“
მოდული კონტენტის ჰორიზონტალური გადახვევის განსახორციელებლად კონკრეტულ ზონაში. როდესაც მაუსის ატარეთ არეალის მარცხენა ან მარჯვენა კიდეზე, გადახვევა იწყება.
ნავიგაცია შინაარსის სლაიდებს შორის შეიძლება განხორციელდეს ისრებით ან მინიატურაზე დაწკაპუნებით. ბოლოში არის ღილაკი "ჩვენება", რომელიც საშუალებას გაძლევთ დამალოთ/აჩვენოთ ესკიზები ან სლაიდის სრული აღწერა.
15. კონტენტის მბრუნავი „წრიული შინაარსის კარუსელი“
ბლოკი სკროლერით, რომელიც ჩნდება კურსორზე გადატანისას. შეგიძლიათ შინაარსის გადახვევა გადახვევის ზოლის ან მაუსის ბორბლის გამოყენებით.
jQuery-ის ეს გადაწყვეტა შთაგონებულია Apple-ის ვებსაიტზე მსგავსი ეფექტით. ამ კორპორაციის დეველოპერები ყოველთვის პოულობდნენ საინტერესო გადაწყვეტილებებს, რომლებიც შთააგონებდნენ ვებმასტერებს მთელი მსოფლიოდან. მოდულის დემონსტრირებისთვის აირჩიეთ კატეგორია სიიდან.
19. გასაოცარი სლაიდერი
სლაიდერი ავტომატურად იქმნება. მონაცემები პროდუქტის სახელით, აღწერილობით, ბმულით და სურათის მისამართით აღებულია slider.db.txt ფაილიდან. გამოყენებული ტექნოლოგიები: CSS, PHP, jQuery.
20. მბრუნავი ბლოკები jQuery-ის გამოყენებით
ბლოკის ბრუნვის ეფექტის სანახავად დააწკაპუნეთ დემო გვერდზე ერთ-ერთ პატარა ოთხკუთხედზე
კონტენტის გადახვევის მოდული, მაგალითად, შეიძლება გამოყენებულ იქნას უახლესი ამბების საჩვენებლად ან ვებსაიტზე Twitter-ის ფლაერების საჩვენებლად.
22. დინამიური ბლოკი "მომხმარებელთა მიმოხილვები"
ბლოკის შინაარსის ავტომატური როტაცია. გამოყენებული ტექნოლოგიები: PHP, XML, CSS, jQuery.
ეს მოდული გარდაქმნის სიის ელემენტებს (ul li) jQuery კარუსელის ელემენტებად.
26. javascript კარუსელი "ImageFlow"
ადვილია სურათების გადახვევა მაუსის ბორბლის გამოყენებით.
27. გადახვევის შინაარსი
კომპაქტური ბლოკი საიტზე ან სიახლეების უახლესი მასალების ანონსით. მარცხენა სვეტში ნაჩვენებია უახლესი ამბების მოკლე განცხადებების ფურცირებული სია. როდესაც თქვენ აირჩევთ ერთ-ერთ მათგანს, მარჯვენა სვეტში გამოჩნდება უფრო დეტალური აღწერა და ბმული პუბლიკაციის სრული ტექსტის წასაკითხად. განხორციელებულია jQuery-ის გამოყენებით.
ბმულების მქონე სურათები გადახვევა, როდესაც მაუსის ატარებს, გადახვევა ჩერდება და გამოჩნდება ნავიგაციის ზოლი. როდესაც მაუსის სურათს ახვევთ, მისი სახელი ასევე გამოჩნდება საკონტროლო ღილაკებს შორის. ძალიან ლამაზად გამოიყურება გვერდზე
33. შინაარსის გადახვევა, Mootools მოდული „Scrollbar“
გადახვევა ხდება როგორც გადახვევის ზოლის, ასევე მაუსის ბორბლის გამოყენებით.