ბუ კარუსელი - jQuery მოდულისენსორული მხარდაჭერით, რომელიც საშუალებას გაძლევთ შექმნათ საპასუხო (ადაპტაციური) სლაიდერი (კარუსელი). ეს არის ძალიან კომფორტული, მარტივი და ადაპტური დანამატისლაიდერების, კარუსელების და ა.შ. ამ სტატიაში შევეცდები აგიხსნათ და გაჩვენოთ როგორ მუშაობს.
Owl Carousel Plugin-ის დაყენება ჯერ არქივი უნდა გადმოვწეროთ დანამატით
ქვემოთ მე გაჩვენებთ DataLife Engine შაბლონში მოდულის დაყენების მაგალითს.
არქივის ჩამოტვირთვის შემდეგ გახსენით და გაანაწილეთ ფაილები შემდეგნაირად: ფაილი owl.carousel.cssდა owl.transitions.cssჩადეთ საქაღალდეშისტილიასე ან css. ფაილი owl.carousel.jsჩადეთ js საქაღალდეში
ახლა ჩვენ უნდა დავაკავშიროთ ეს ფაილები, რათა მათ იმუშაონ ჩვენს შაბლონში. ფაილის გახსნა main.tplხაზამდე შედი შემდეგი ხაზები:
საქაღალდე cssშეცვალეთ ის, რომელშიც ხართ cssსტილები! შემდეგ ძალიან ბოლოში ხაზის წინ
შეიყვანეთ ეს ხაზი: კარგი ეს ყველაფერია! ჩვენ დავასრულეთ ინსტალაცია.
ახლა ჩვენ გვჭირდება თავად სლაიდერის ჩასმა და კონფიგურაცია. მაგალითით გაჩვენებთ topnewsიმათ აჩვენეთ პოპულარული ამბები ჩვენი ბუ კარუსელის საშუალებით.
დოკუმენტაციის გვერდი აღწერს ყველა ვარიანტს, დემო ვერსიას და როგორ გამოვიყენოთ ჩვენი Owl Carousel მოდული. მიჰყევით ბმულს და აირჩიეთ თქვენთვის სასურველი ნებისმიერი სლაიდერი. ჩვენთვის topnewsპირველივე ავირჩიე სახელით სურათები. Javascript ჩანართში დააკოპირეთ ეს სტრიქონები: $(დოკუმენტი).ready(function() ( $("#owl-demo").owlCarousel(( autoPlay: 3000, ელემენტი: 4, itemsDesktop: , itemsDesktopSmall: )); ));და ჩასვით ისინი ფაილში main.tplხაზის წინ
შემდეგ CSS ჩანართში დააკოპირეთ ხაზები: #owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; სიგანე: 100%; სიმაღლე: auto; ) და ჩართეთ ისინი ნებისმიერში cssფაილი ან შეტანა main.tplხაზის წინ
მაგრამ ხაზის შემდეგ
! ახლა ჩვენ გავაანალიზებთ ჩვენს HTML კოდს და დავუკავშირდებით topnews.ფაილში main.tplჩადეთ ტეგი სწორ ადგილას (ტოპნიუსი)რომელიც თავის მხრივ გამოსცემს პოპულარული ამბების სიას, გარეგნობარომლის კონფიგურაცია შესაძლებელია ფაილში topenews.tpl,მეტი ამის შესახებ ქვემოთ .
ჩვენი ტეგის კოდი ასე უნდა გამოიყურებოდეს:
(ტოპნიუსი)
ახლა ჩვენ უბრალოდ უნდა დავაყენოთ ახალი ამბები. ფაილის გახსნა ტopnews.tplდა თავიდანვე შევდივართ:
დახურეთ ატრიბუტი ბოლოს
თუ იყენებთ ჩემს Bootstrap-ის ერთ-ერთ შაბლონს, შეგიძლიათ გამოიყენოთ შემდეგი ხაზები ფაილში, როგორც ოფცია topnews.tpl:
(სათაურის ლიმიტი = "55")
(ტექსტის ლიმიტი = "100")
Წაკითხვა
სიახლეები გამოჩნდება ამ ფორმით
ამ მოდულის გამოყენება შესაძლებელია თითქმის ყველგან, ისევე როგორც ტეგის გამოყენებით (მორგებული კატეგორია) მათ ასევე შეუძლიათ შეცვალონ სტანდარტული DLE გალერეა, ამის შესახებ ცალკე სტატიას გამოვაქვეყნებ. ისიამოვნე ჯანმრთელობა ;)
ამჟამად, კარუსელის სლაიდერი არის ფუნქცია, რომელიც უბრალოდ აუცილებელია ბიზნეს ვებსაიტზე, პორტფელის ვებსაიტზე ან ნებისმიერ სხვა რესურსზე. სრულეკრანიანი გამოსახულების სლაიდერებთან ერთად, ჰორიზონტალური კარუსელის სლაიდერები კარგად ჯდება ნებისმიერ ვებ დიზაინში.
ზოგჯერ სლაიდერს სჭირდება საიტის გვერდის მესამედის დაკავება. აქ კარუსელის სლაიდერი გამოიყენება გარდამავალი ეფექტებით და საპასუხო განლაგებით. ელექტრონული კომერციის საიტები იყენებენ კარუსელის სლაიდერს, რათა აჩვენონ რამდენიმე ფოტო ცალკეულ პოსტებში ან გვერდებზე. სლაიდერის კოდი უფასოა გამოსაყენებლად და თქვენი მოთხოვნილებების შესაბამისად.
jQuery-ის გამოყენებით HTML5-თან და CSS3-თან ერთად, შეგიძლიათ თქვენი გვერდები უფრო საინტერესო გახადოთ უნიკალური ეფექტებით და მიიპყროთ ვიზიტორების ყურადღება საიტის კონკრეტულ არეალზე.
Slick - თანამედროვე კარუსელის სლაიდერის მოდული
Slick არის უფასო jQuery მოდული, რომლის დეველოპერები აცხადებენ, რომ მათი გადაწყვეტა დააკმაყოფილებს თქვენს ყველა სლაიდერის საჭიროებას. საპასუხო სლაიდერი - კარუსელს შეუძლია იმუშაოს მობილური მოწყობილობებისთვის "ფილა" რეჟიმში, ხოლო დესკტოპის ვერსიისთვის "გადაათრიეთ და ჩამოაგდეს" რეჟიმში.
იგი შეიცავს გაცვეთილ გარდამავალ ეფექტს, საინტერესო ფუნქციას "რეჟიმი ცენტრში", სურათების ზარმაცი დატვირთვა ავტომატური გადახვევით. განახლებული ფუნქცია მოიცავს სლაიდების და სლაიდების ფილტრის დამატებას. ყველაფერი თქვენთვის, რომ მოდულის მორგება თქვენი მოთხოვნების შესაბამისად.
ამ დანამატს აქვს ფუნქციების დიდი ნაკრები, შესაფერისი როგორც დამწყებთათვის, ასევე გამოცდილი დეველოპერებისთვის. ეს განახლებული ვერსიასლაიდერი - კარუსელი. მის წინამორბედსაც იგივე სახელი ერქვა.
სლაიდერს აქვს ჩაშენებული დანამატები საერთო ფუნქციონირების გასაუმჯობესებლად. ანიმაცია, ვიდეოს დაკვრა, სლაიდერის ავტომატური დაკვრა, ზარმაცი ჩატვირთვა, ავტომატური რეგულირებასიმაღლეები Owl Carousel 2.0-ის მთავარი მახასიათებელია.
გადაიტანეთ მხარდაჭერა და ჩამოაგდესჩართულია დანამატის უფრო მოსახერხებელი გამოყენებისთვის მობილური მოწყობილობები. მოდული შესანიშნავია დიდი სურათების ჩვენებისთვის, თუნდაც მობილური მოწყობილობების პატარა ეკრანებზე.
მაგალითები | ჩამოტვირთვა
jQuery Silver Track Plugin
საკმაოდ პატარა, მაგრამ მდიდარი jquery დანამატი, რომელიც საშუალებას გაძლევთ განათავსოთ კარუსელის სლაიდერი გვერდზე, რომელსაც აქვს მცირე ბირთვი და არ მოიხმარს საიტის ბევრ რესურსს. მოდული შეიძლება გამოყენებულ იქნას ვერტიკალური და ჰორიზონტალური სლაიდერების საჩვენებლად, ანიმაციით და სურათების ნაკრების შესაქმნელად გალერეიდან.
ულტრა კომპაქტური jQuery სლაიდერი- კარუსელი, რომლის ფუნქციონირება გაცილებით მეტია, ვიდრე ჩვეულებრივი სლაიდერი. მასში შედის გადახედვაერთი სურათი, აჩვენეთ მრავალი სურათი კარუსელში და სლაიდერში სათაურების მიხედვით.
მაგალითები | ჩამოტვირთვა
Owl Carousel - jquery slider - კარუსელი
ბუ კარუსელი - სლაიდერი მხარდაჭერით სენსორული ეკრანებიდა გადაზიდვის ტექნოლოგიებიდა ჩამოაგდეს , ადვილად ჩასმული HTML კოდში. მოდული არის ერთ-ერთი საუკეთესო სლაიდერი, რომელიც საშუალებას გაძლევთ შექმნათ ლამაზი კარუსელები სპეციალურად მომზადებული მარკირების გარეშე.
მაგალითები | ჩამოტვირთვა
3D გალერეა - კარუსელი
იყენებს 3D გადასვლებს CSS სტილების და ზოგიერთი Javascript კოდის საფუძველზე.
მაგალითები | ჩამოტვირთვა
3D კარუსელი TweenMax.js-ისა და jQuery-ის გამოყენებით
მშვენიერი 3D კარუსელი. როგორც ჩანს, ის ჯერ კიდევ ბეტა ვერსიაა, რადგან ახლავე აღმოვაჩინე რამდენიმე პრობლემა. თუ გაინტერესებთ საკუთარი სლაიდერების ტესტირება და შექმნა, ეს კარუსელი ძალიან დაგეხმარებათ.
მაგალითები | ჩამოტვირთვა
კარუსელი ჩატვირთვის გამოყენებით
საპასუხო კარუსელის სლაიდერი ჩატვირთვის ტექნოლოგიის გამოყენებით ზუსტად თქვენი ახალი ვებსაიტისთვის.
მაგალითები | ჩამოტვირთვა
Bootstrap-ზე დაფუძნებული სლაიდერი - Moving Box კარუსელი
ყველაზე მოთხოვნადი პორტფოლიოსა და ბიზნეს ვებსაიტებზე. მსგავსი ტიპის სლაიდერი - კარუსელი ხშირად გვხვდება ნებისმიერი ტიპის საიტებზე.
მაგალითები | ჩამოტვირთვა
პაწაწინა წრეების დამცავი
ეს პატარა ზომის სლაიდერი მზადაა იმუშაოს მოწყობილობებზე ნებისმიერი ეკრანის გარჩევადობით. სლაიდერს შეუძლია მუშაობა როგორც წრიულ, ასევე კარუსელის რეჟიმში. პატარა წრე წარმოდგენილია, როგორც ამ ტიპის სხვა სლაიდერების ალტერნატივა. აქვს ჩაშენებული მხარდაჭერა ოპერატიული სისტემა IOS და Android.
წრიულ რეჟიმში სლაიდერი საკმაოდ საინტერესოდ გამოიყურება. კარგად არის დანერგილი გადაადგილების მეთოდის მხარდაჭერა და სლაიდების ავტომატური გადახვევის სისტემა.
მაგალითები | ჩამოტვირთვა
Thumbelina შინაარსის სლაიდერი
მძლავრი, ადაპტირებული, კარუსელის ტიპის სლაიდერი შესანიშნავია თანამედროვე საიტისთვის. მუშაობს სწორად ნებისმიერ მოწყობილობაზე. აქვს ჰორიზონტალური და ვერტიკალური რეჟიმები. მისი ზომა შემცირებულია მხოლოდ 1 კბ-მდე. ულტრა კომპაქტურ დანამატს აქვს შესანიშნავი გლუვი გადასვლები.
მაგალითები | ჩამოტვირთვა
wow სლაიდერი კარუსელი
შეიცავს 50-ზე მეტ ეფექტს, რომელიც დაგეხმარებათ შექმნათ ორიგინალური სლაიდერი თქვენი საიტისთვის.
მაგალითები | ჩამოტვირთვა
საპასუხო jQuery შინაარსის სლაიდერი bxSlider
შეცვალეთ ბრაუზერის ფანჯრის ზომა, რომ ნახოთ როგორ ადაპტირდება სლაიდერი. Bxslider-ს გააჩნია პერსონალიზაციის 50-ზე მეტი ვარიანტი და აჩვენებს მის მახასიათებლებს სხვადასხვა გარდამავალი ეფექტებით.
მაგალითები | ჩამოტვირთვა
j კარუსელი
jCarousel არის jQuery დანამატი, რომელიც დაგეხმარებათ თქვენი სურათების ნახვების ორგანიზებაში. თქვენ შეძლებთ მარტივად შექმნათ მორგებული გამოსახულების კარუსელები მაგალითში ნაჩვენები ჩარჩოდან. სლაიდერი რეაგირებს და ოპტიმიზებულია მობილური პლატფორმებისთვის.
მაგალითები | ჩამოტვირთვა
ScrollBox - jQuery Plugin
Scrollbox არის კომპაქტური დანამატი სლაიდერის შესაქმნელად - კარუსელი ან ტექსტის გაშვებული ხაზი. ძირითადი ფუნქციები მოიცავს ვერტიკალურ და ჰორიზონტალურ გადახვევის ეფექტს მაუსის მაუსის დაჭერით შეჩერებით.
მაგალითები | ჩამოტვირთვა
dbpas კარუსელი
მარტივი კარუსელის სლაიდერი. თუ გჭირდებათ სწრაფი მოდული, ეს არის 100% შესაფერისი. მოყვება მხოლოდ ძირითადი ფუნქციები, რომლებიც საჭიროა სლაიდერის მუშაობისთვის.
მაგალითები | ჩამოტვირთვა
Flexisel: საპასუხო JQuery Carousel Slider Plugin
Flexisel-ის შემქმნელებმა შთაგონება აიღეს ძველი სკოლის jCarousel მოდულიდან, გააკეთეს მისი ასლი, ფოკუსირებული იყო სლაიდერის სწორ მუშაობაზე მობილურ და ტაბლეტ მოწყობილობებზე.
Flexisel-ის საპასუხო განლაგება, მობილურ მოწყობილობებზე მუშაობისას, განსხვავდება ბრაუზერის ფანჯრის ზომაზე ორიენტირებული განლაგებისგან. Flexisel შესანიშნავად არის ადაპტირებული ეკრანებზე მუშაობისთვის, როგორც დაბალი, ასევე მაღალი გარჩევადობით.
მაგალითები | ჩამოტვირთვა
Elastislide - საპასუხო კარუსელის სლაიდერი
Elastislide შესანიშნავად ეგუება მოწყობილობის ეკრანის ზომას. თქვენ შეგიძლიათ დააყენოთ სურათების მინიმალური რაოდენობა გარკვეული გარჩევადობის გამოსატანად. კარგად მუშაობს, როგორც კარუსელის სლაიდერი სურათების გალერეებით, ფიქსირებული სახვევის გამოყენებით, ვერტიკალური გადახვევის ეფექტთან ერთად.
მაგალითი | ჩამოტვირთვა
Flex Slider 2
უფასო სლაიდერი Wootemes-ისგან. ის სამართლიანად ითვლება ერთ-ერთ საუკეთესო საპასუხო სლაიდერად. მოდული შეიცავს რამდენიმე შაბლონს და სასარგებლო იქნება როგორც დამწყები მომხმარებლებისთვის, ასევე ექსპერტებისთვის.
მაგალითი | ჩამოტვირთვა
საოცარი კარუსელი
საოცარი კარუსელი - ადაპტური სლაიდერი jQuery სურათები. მხარს უჭერს მრავალი შინაარსის მართვის სისტემას, როგორიცაა WordPress, Drupal და Joomla. ის ასევე მხარს უჭერს Android და IOS და ოპერაციული სისტემების დესკტოპ ვერსიებს თავსებადობის პრობლემების გარეშე. ჩამონტაჟებული საოცარი კარუსელის შაბლონები საშუალებას გაძლევთ გამოიყენოთ სლაიდერი ვერტიკალურ, ჰორიზონტალურ და წრიულ რეჟიმებში.
მაგალითები | ჩამოტვირთვა
/* აქედან იწყება ჩვენი კარუსელი. The.carousel-wrapper შედარებით განლაგებულია, the.carousel-item არის აბსოლუტური. . */ .carousel-wrapper( position:relative; /* აბსოლუტურად განლაგებული უჯრები იღებენ სიმაღლესა და სიგანეს მშობლისგან. ჩვენ ისინი გავხადეთ გამჭვირვალე ნაგულისხმევად, და შემდეგ ისინი გაქრება .arrow-prev და.arrow-next-ზე დაწკაპუნებისას. კავშირი ბალიშები მარცხნივ და 50 პიქსელი მარჯვნივ? ამ გზით ჩვენ შეგვიძლია განვათავსოთ ჩვენი ბმულები! თითოეული იქნება 50 პიქსელის სიგანე. ასევე, მე ვიყენებ ცარიელ ბმულებს ფონის ნიმუშიისე, რომ ბმულები ისრებს ჰგავს. შეამოწმეთ შეცვლილი ხართ თუ არა URL-ების დაკავშირებაორიგინალური URL-ით, რათა თქვენი ბმულები არ იყოს მხოლოდ გამჭვირვალე მართკუთხედები. */ .arrow( პოზიცია: აბსოლუტური; ზედა: 0; ჩვენება: ბლოკი; სიგანე: 50 პიქსელი; სიმაღლე: 100%; -webkit-tap-highlight-color:rgba(0,0,0,0); ფონი:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* დავაბრუნოთ ჩვენი მარცხენა ისარი. */ &.arrow-prev( left:0; ) /* და მეორე მარჯვნივ ვინაიდან იმავე სურათს ვიყენებ ისრისთვის, ვატრიალებ მას 180 გრადუსით */ &.arrow-next( მარჯვნივ:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * ძალიან მომწონს, როგორ გამოიყურება კარუსელის სლაიდები მუქი ფონი, და თუ .carousel-item ბლოკს აქვს კლასი "light", ჩვენ მის ტექსტს შევცვლით თეთრად და გამოვიყენებთ თეთრ ისრებს ნაცრისფერის ნაცვლად. ხელახლა შეამოწმეთ არის თუ არა ისრის გამოსახულების გზა სწორი */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* დაწერეთ მედია მოთხოვნა, რომ შეცვალოთ ისრები ეკრანის უფრო მცირე ზომის მოწყობილობებზე.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50% ; ) ) ) /* დააყენეთ ბმული სამიზნეების ჩვენება: არცერთი; ამრიგად, ჩვენ ვიხსნით ბრაუზერის მუდმივ გადახტომას კარუსელის ზევით ისრებზე ყოველი დაწკაპუნებით. ეს თვისება ვრცელდება ნებისმიერ ელემენტზე, რომლის ID იწყება „target-item“-ით. */ ( ჩვენება:არცერთი; ) /* ზემოთ, ჩვენ ყველა ჩვენი კარუსელის სლაიდი გავხადეთ გამჭვირვალე, რაც ნიშნავს, რომ როდესაც კარუსელი იტვირთება, მის ნაცვლად მივიღებთ დიდ ცარიელ ყუთს. მოდით შევცვალოთ პირველი სლაიდის გამჭვირვალობის მნიშვნელობა 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. აქ შეგიძლიათ დაამატოთ დამატებითი სპანები სამიზნე ნივთის ID-ით, თუ გაქვთ სამზე მეტი. შეუძლია ერთდროულად 10 ელემენტის დამატება.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3(z-index:3; opacity:1; ) )
დიახ, თემა საკმაოდ დაბნეულია. მაგრამ მაინც, იმის პოვნა, რაც ნამდვილად გჭირდებათ, ხშირად რთულია. ყველა გთავაზობთ უაღრესად დახვეწილ სკრიპტებს, ბევრი დამატებითი ფუნქციონირებით. და, როგორც წესი, ეს უკვე შეკუმშული დანამატებია.
მისი გამოყენება შესაძლებელია როგორც გამოსახულების კარუსელი, ახალი ამბების კარუსელი ან ნებისმიერი სხვა შინაარსის კარუსელი =)
ერთადერთი პატარა ზარი და სასტვენი, რომელიც საკუთარ თავს ვუშვებდი, იყო ჩრდილი კარუსელის ბლოკთან.
UPD: 07/06/2014
ეს დაახლოებით ასე გამოიყურება: დემო ჩამოტვირთვა
სტრუქტურა ასე გამოიყურება:
TJ მარტივი ადაპტური კარუსელი
მოდით აღვწეროთ სტილები:
კარუსელი ( მაქსიმალური სიგანე: 1080 პიქსელი; /* მთელი ბლოკის სიგანე */ ზღვარი: 50 პიქსელი ავტომატური; სიგანე: 100%; ) შინაარსი ძირითადი არეალის გარეთ */ პოზიცია: შედარებითი; ) .კარუსელის ელემენტები ( სიგანე: 10000 პიქსელი; * დააყენეთ უფრო დიდი სიგანე ელემენტის ნაკრებისთვის */ პოზიცია: შედარებითი; /* მოათავსეთ ყუთი მთავარ კარუსელის არეალთან მიმართებაში */ ) .კარუსელი -ბლოკი ( float: მარცხნივ; /* მოაწყეთ კარუსელის ყველა ელემენტი */ სიგანე: 250px; /* დააყენეთ თითოეული ელემენტის სიგანე */ padding: 10px 10px 10px 0px; /* padding ისე, რომ ელემენტები არ გაერთიანდეს */ ) .carousel -block img( display:block; ) /***** ********** ღილაკები ***********/ .კარუსელი-ღილაკი-მარცხნივ a, .კარუსელი-ღილაკი-მარჯვნივ a( სიგანე: 25 პიქსელი; სიმაღლე: 36 პიქსელი; პოზიცია: შედარებითი ; ზედა: 80 პიქსელი; კურსორი: მაჩვენებელი; ტექსტის დეკორაცია: არცერთი; ) .კარუსელი-ღილაკი-მარცხნივ a( float: მარცხნივ; ფონი: url(../images/carousel- left.png); ) .carousel-button- მარჯვნივ a( float: უფლება; ფონი: url(../images/carousel-right.png); ) /*************** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6) ;)
და ბოლოს, როგორ უნდა იმუშაოს:
//მარჯვენა ისრის დამუშავება დააწკაპუნეთ $(დოკუმენტი).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel(carusel ); დაბრუნდეს ყალბი; )); //მარცხენა ისრის მართვა დააწკაპუნეთ $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(".carousel"); left_carusel(carusel ) ; დაბრუნება ყალბი; )); ფუნქცია left_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth();$(carusel).find(".carousel-item .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carousel-item"));$(carusel).find(".carousel-item").css(("მარცხნივ":"-" +block_width+"px"));$(carusel).find(".carousel-item .carousel-block").eq(-1).remove();$(carusel).find(".carousel-item" ).animate((მარცხნივ: "0px"), 200); ) ფუნქცია right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find ("".carousel-item").animate((მარცხნივ: "-"+ block_width +"px"), 200, function()($(carusel).find(".carousel-items .carousel-block") . eq(0).clone().appendTo($(carusel).find(".carousel-item"));$(carusel).find(".carousel-item .carousel-block").eq(0 ) .remove();$(carusel).find(".carousel-items").css(("მარცხნივ":"0px")); )); ) $(function() ( //გააუქმეთ ქვემოთ მოცემული ხაზი კარუსელის ავტომატური გადახვევის ჩასართავად auto_right(".carousel:first"); )) // Auto დინამიური გადახვევის ფუნქცია auto_right(carusel)( setInterval(function()( if (!$(carusel).is(."hover")) right_carusel(carusel); ), 3000) ) // გადაიტანეს კარუსელზე $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) // ამოიღეს კურსორი კარუსელი $(დოკუმენტი).on("mouseleave", ".carousel", function()($(this).removeClass("hover")))
შესაბამისად, ჩრდილის ამოღება შესაძლებელია. და მის გამოსაყენებლად, თქვენ უბრალოდ უნდა შეცვალოთ ძირითადი ბლოკის ზომა და ჩასმული "გადახვევის" ბლოკები css-ში. ასევე ძალიან მარტივია ამ პროცესის ციკლი ისე, რომ ის ავტომატურად გადახვევს (ში ამ საქმეს, უბრალოდ გააუქმეთ ავტო_მარჯვენა ფუნქციის გამოძახება). ანუ ამ უპრეტენზიო გალერეიდან ამოცანის ფარგლებში შეგიძლიათ გააკეთოთ ყველაფერი, რაც გჭირდებათ!
აქვე უნდა აღინიშნოს, რომ ეს მაგალითი ადაპტაციურია, ანუ კარუსელის ზომა ადაპტირდება ეკრანის ზომის მიხედვით და სწორად იქნება ნაჩვენები როგორც კომპიუტერის ან ლეპტოპის ეკრანზე, ასევე ტაბლეტების და სმარტფონების ეკრანებზე.
1. jQuery კარუსელი "clickCarousel"
დაბლოკვა გადახვევის ახალი ამბების განცხადებებით. მარცხენა/მარჯვენა ისრები გამოიყენება ბლოკებში გადასასვლელად. არქივში არის კარუსელი ორ სტილში: ღია და მუქი.
1. jQuery კარუსელი, carouFredSel მოდული
სუფთა და სუფთა jQuery გამოსახულების კარუსელი.
4. jQuery პლაგინი: Elastislide Carousel
5. მოდული "TinyCarousel"
დიდი შინაარსის სლაიდერები გამოსახულების კარუსელის სახით jQuery-ის გამოყენებით. დემო გვერდი აღწერს, თუ როგორ დააკავშიროთ ეს კარუსელი თქვენს საიტზე.
მოდული "Slider Kit", მსუბუქი კარუსელი სხვადასხვა გზებიგადახვევა.
7. javascript კარუსელი
8. jQuery მოდული "Grid Navigation Effects"
ორიგინალური ნავიგაცია გამოსახულების ესკიზებს შორის. დემო გვერდის მარჯვენა მხარეს ეფექტის სანახავად დააწკაპუნეთ ზემოთ და ქვემოთ ღილაკებზე. jQuery-ის ეს გადაწყვეტა ასევე უზრუნველყოფს მინიატურაზე და მაუსის ბორბლით გადახვევის ეფექტს.
9. მარტივი კარუსელი
10. Easy Paginate ბლოკის კარუსელი
jQuery მოდული "Easy Paginate". ყოველი მართკუთხა ბლოკი არის ჩვეულებრივი li სიის ელემენტი და თუ სამზე მეტი ელემენტია, მაშინ მათი სანახავად საჭიროა გამოიყენოთ სლაიდერის მსგავსი ნავიგაცია (წინა და უკანა ისრების გამოყენებით და ნავიგაციის ღილაკების გამოყენებით ბოლოში).
11. ვერტიკალური მბრუნავი „ვერტიკალური ტიკერი“
jQuery ვერტიკალური rotator: გვერდის შინაარსის ავტომატური გადახვევა. მოწოდებულია ნავიგაციის ღილაკები, ასევე როტაციის შეჩერებისა და ხელახლა დაწყების შესაძლებლობა. მაუსის კურსორის გადაადგილებისას მოძრაობა ჩერდება. HTML მარკირების დონეზე გადახვევის ველები წარმოდგენილია რეგულარული li სიის ელემენტებით.
12. javascript css გადახვევის არე
javascript "TinyScroller" გადაწყვეტა DIV კონტეინერში მოთავსებული გადახვევის ადგილის შესაქმნელად.
13. jQuery Smooth Div Scroll Plugin
დანამატი შინაარსის ჰორიზონტალური გადახვევის განსახორციელებლად კონკრეტულ ზონაში. როდესაც მაუსის კურსორს გადააადგილებთ არეალის მარცხენა ან მარჯვენა კიდეზე, გადახვევა იწყება.
ნავიგაცია სლაიდებს შორის შინაარსით შეიძლება განხორციელდეს ისრებით ან მინიატურაზე დაწკაპუნებით. ქვემოთ არის ღილაკი "ჩვენება", რომელიც საშუალებას გაძლევთ დამალოთ / აჩვენოთ ესკიზები ან სრული აღწერასლაიდი.
15. კონტენტის მბრუნავი „წრიული შინაარსის კარუსელი“
17. გადამხვევი
ბლოკი სკროლერით, რომელიც ჩნდება კურსორზე გადასვლისას. თქვენ შეგიძლიათ გადაახვიოთ შიგთავსში როგორც გადახვევის ზოლის, ასევე მაუსის ბორბლის გამოყენებით.
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"
გადახვევა ხდება როგორც გადახვევის ზოლის, ასევე მაუსის ბორბლის გამოყენებით.
