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

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

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

jQuery კარუსელის ჩაშენება ვებსაიტზე

1. აიღეთ არქივები

პირველად, თქვენ გჭირდებათ არქივების zip და ფაილების გაუქმება

2. ატვირთეთ საჭირო ფაილები სერვერზე

ახლა თქვენ გჭირდებათ საქაღალდეები სურათებიі jsშეავსეთ თქვენი საიტის ძირში. თუ თქვენ უკვე იცით საქაღალდეები, გადაიტანეთ ფაილები საქაღალდეებში, რადგან ისინი დევს მათში.

3. დააკავშირეთ სკრიპტები

jquery ბიბლიოთეკის ჩათვლით

ის სცენარი, რომელიც პასუხისმგებელია კარუსელის მუშაობაზე

ასევე სკრიპტის შესწორება

ყველაფერი ბუნებრივად არის ჩასმული ტეგზე

4. დასამაგრებელი სტილები

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

ტექსტი ( font-family:Arial; font-size:12px; background:#ededed;) .example-desc ( margin:3px 0; padding:5px; ) #carousel ( width:960px; margin: 60px auto; საზღვარი:1px მყარი #222; სიმაღლე: 300 პიქსელი; პოზიცია: ფარდობითი; ნათელი: ორივე; გადადინება: დამალული; * წინააღმდეგ შემთხვევაში, ეს არ არის ისეთი აშკარა ერთეულებზე, შეიძლება დააწკაპუნოთ */ . გამოძახების გამომავალი ( სიმაღლე: 250 პიქსელი; გადადინება: გადახვევა; ) ტექსტური ზონა# ახალი ოფციები (სიგანე: 430 პიქსელი; ) .nav (სიგანე: 80 პიქსელი; ზღვარი: 20 პიქსელი ავტომატური)

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

5. ჩასვით კარუსელის html კოდი

კარგად მე დანარჩენი წელი: ჩასმა html კოდიმხიარულება იქ, de wantto її bachiti.

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

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

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

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

Slick – ყოველდღიური სლაიდერის მოდული – კარუსელები

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

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

დემო რეჟიმი | ისარგებლეთ

Owl Carousel 2.0 - jQuery - დანამატი სენსორულ მოწყობილობებზე აკრეფის შესაძლებლობით

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

სლაიდერს შეიძლება ჰქონდეს საკუთარი საწყობი და განავითაროს დანამატები საერთო ფუნქციონირების გასაუმჯობესებლად. ანიმაცია, ვიდეოს მონტაჟი, სლაიდერის ავტომატური გაშვება, ხაზის ჩატვირთვა, სიმაღლის ავტომატური კორექტირება - Owl Carousel 2.0-ის ძირითადი მახასიათებლები.

ჩართულია ხელსაყრელი ვიკი მოდულისთვის ჩართული ჩათრევისა და ჩამოშვების შესაძლებლობების მხარდაჭერა მობილური შენობები.
მოდული შესანიშნავი იდეაა მობილური მოწყობილობების მცირე ეკრანებზე შესანიშნავი სურათების ჩვენებისთვის.

მიმართვა | ისარგებლეთ

jQuery მოდული Silver Track

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

მიმართვა | ისარგებლეთ

AnoSlide - ულტრა კომპაქტური პასუხისმგებელი jQuery სლაიდერი

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

მიმართვა | ისარგებლეთ

Owl Carousel - jquery slider - კარუსელი

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

მიმართვა | ისარგებლეთ

3D გალერეა - კარუსელი

Vikoristovu 3D - გარდამავალი, CSS - სტილის და troch Javascript კოდის საფუძველზე.

მიმართვა | ისარგებლეთ

3D კარუსელი TweenMax.js-ით და jQuery-ით

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

მიმართვა | ისარგებლეთ

ჩამტვირთავი ვიკის კარუსელი

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

მიმართვა | ისარგებლეთ

დაწყებული Bootstrap - Slider Framework - Moving Box Carousel

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

მიმართვა | ისარგებლეთ

პაწაწინა წრეების დამცავი

კრიტიკული rozmіru-ს მთელი სლაიდერი მზადაა დასადგმელად, იქნება ეს რაიმე სახის razdіlnoy zdatnіstyu ეკრანი. სლაიდერის გამოყენება შესაძლებელია როგორც წრიულ, ასევე კარუსელის რეჟიმში. წრიული ხედები ამ ტიპის სხვა სლაიდერების ალტერნატივაა. Є vbudovana pіdtrimka ოპერატიული IOS სისტემებირომ ანდროიდი.

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

მიმართვა | ისარგებლეთ

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

უბიძგებს, ადაპტირებადი კარუსელის ტიპის სლაიდერი, რომელიც გიბიძგებთ მიმდინარე საიტზე. სწორად მუშაობს ნებისმიერ გარე შენობებზე. შეიძლება იყოს ჰორიზონტალური და ვერტიკალური რეჟიმები. Yogo rozmіr მინიმიზაცია 1 KB-მდე ნაკლები. ულტრა კომპაქტური მოდული ასევე იძლევა გლუვი გადასვლების საშუალებას.

მიმართვა | ისარგებლეთ

ვაი - სლაიდერი - კარუსელი

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

მიმართვა | ისარგებლეთ

საპასუხო jQuery შინაარსის სლაიდერი bxSlider

შეცვალეთ ბრაუზერის ფანჯრის ზომა სლაიდერის ადაპტაციის გასაუმჯობესებლად. Bxslider-ს გააჩნია 50-ზე მეტი პერსონალიზაციის ვარიანტი და აჩვენებს მის ფუნქციონირებას სხვადასხვა გარდამავალი ეფექტებით.

მიმართვა | ისარგებლეთ

j კარუსელი

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

მიმართვა | ისარგებლეთ

Scrollbox - jQuery მოდული

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

მიმართვა | ისარგებლეთ

dbpas კარუსელი

მარტივი სლაიდერი არის კარუსელი. თუ გჭირდებათ შვედური დანამატი - 100% დარწმუნებული. მოწოდებულია მხოლოდ სლაიდერისთვის საჭირო ძირითადი ფუნქციები.

მიმართვა | ისარგებლეთ

Flexisel: საპასუხო JQuery Carousel Slider Plugin

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

მობილურ დანართებზე მუშაობისას საპასუხო Flexisel განლაგება ჰგავს განლაგებას, რომელიც ორიენტირებულია ბრაუზერის ფანჯრის ზომაზე. Flexisel vіdmіnno ადაპტაცია ეკრანებზე მუშაობისთვის, როგორც დაბალი, ასევე მაღალი razdіlnoyu zdatnіstyu.

მიმართვა | ისარგებლეთ

Elastislide - საპასუხო კარუსელის სლაიდერი

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

კონდახი | ისარგებლეთ

Flex Slider 2

Vіlny სლაიდერი vіd Wootemes. სამართლიანად პატივს სცემენ, როგორც ერთ-ერთ საუკეთესო ადაპტაციურ სლაიდს. დანამატი გაასუფთავებს შაბლონებს და იქნება იგივე, რაც პირველი დამწყებებისთვის, ასევე ექსპერტებისთვის.

კონდახი | ისარგებლეთ

საოცარი კარუსელი

საოცარი კარუსელი არის პასუხისმგებელი jQuery გამოსახულების სლაიდერი. მხარს უჭერს ანონიმური კონტენტის მართვის სისტემებს, როგორიცაა WordPress, Drupal და Joomla. ასევე მხარს უჭერს Android და IOS და იატაკის ვარიანტებს ოპერატიული სისტემაუპრობლემოდ іz sumіsnistyu. საოცარი კარუსელის შაბლონები საშუალებას გაძლევთ შეცვალოთ სლაიდერი ვერტიკალურ, ჰორიზონტალურ და წრიულ რეჟიმებში.

მიმართვა | ისარგებლეთ

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

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

თქვენ შეგიძლიათ მოიგოთ როგორც გამოსახულების კარუსელი, ასე რომ კარუსელი არის ახალი ან სხვა შინაარსი =)

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

UPD: 07/06/2014

ვნახოთ დაახლოებით ასე:
DEMO Zavantage

შემტევი ხედვის სტრუქტურა:

მოდით აღვწეროთ სტილები:

კარუსელი (მაქს-სიგანე: 1080 პიქსელი; /* მთლიანი ბლოკის სიგანე */ ზღვარი: 50 პიქსელი ავტო; სიგანე: 100%; ) vmіst, scho გასცდეს ძირითადი არეალის ფარგლებს */ პოზიცია: შედარებითი; ). -block ( float: მარცხნივ; /* მოათავსეთ კარუსელის ყველა ელემენტი ზედიზედ */ სიგანე: 250 პიქსელი; /* დააყენეთ კანის ელემენტის სიგანე */ padding: 10px 10px 10px 0px; /* იარეთ ფრთხილად ისე, რომ ელემენტები არ დაიცვან არ გაბრაზდე */ ).კარუსელი -ბლოკი img( ჩვენება:ბლოკი; ) /**************** ღილაკები ***********/ .კარუსელი- ღილაკი-მარცხნივ a, .კარუსელი-ღილაკი-მარჯვნივ a (სიგანე: 25 პიქსელი; სიმაღლე: 36 პიქსელი; პოზიცია: შედარებითი; ზედა: 80 პიქსელი; კურსორი: მაჩვენებელი; ტექსტის დეკორაცია: არცერთი; ) . left.png); ) .carousel-button-right a( float: მარჯვნივ; ფონი: url(../images/carousel-right.png); ) /*************** SHADOW *** **** ****/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); )

ი, ნარეშტი, როგორ შეიძლება მისი პრაქტიკა:

// მარჯვენა ისრის მართვა დააწკაპუნეთ $(document).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel (კარუსელი ) );return false; )); // მარცხენა ისრის სახელური დააწკაპუნეთ $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(".carousel"); left_carusel(carusel ) );return false;)); ფუნქცია 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-items"));$(carusel).find(".carousel-item .carousel-block").eq( 0 ) .remove();$(carusel).find(".carousel-items").css(("მარცხნივ":"0px")); )); ) $(function() ( //გააუქმეთ ქვემოთ მოცემული სტრიქონი, რათა ჩართოთ კარუსელის ავტომატური გადახვევა auto_right(".carousel:first"); )) // Auto-scrolling ფუნქცია auto_right(carusel)( setInterval(function()( if ( $(carusel).is(".hover"))) right_carusel(carusel); ), 3000) ) // გადაიტანეთ კარუსელზე $(document).on("mouseenter", ".carousel", function() ( $(this).addClass("hover"))) // ამოიღო კურსორი კარუსელიდან $(document).on("mouseleave", ".carousel", function()($(this).removeClass(" დადე")))

როგორც ჩანს, ჩრდილის ამოღება შესაძლებელია. ხოლო zastosuvannya-სთვის უფრო საჭიროა CSS-ში მთავარი ბლოკის და ჩასმული ბლოკების ზომის შეცვლა „გადახვევაზე“. ასევე ადვილია პროცესის მარყუჟი ისე, რომ ღვინო ავტომატურად გადახვევა (at ამ კონკრეტულ ტიპსსაკმარისია კომენტარის გაკეთება auto_right ფუნქციაზე სწრაფი დაწკაპუნებით). იმისთვის, რომ იმუშაოთ უბრალო გალერეის ცენტრიდან, შესაძლებელია ყველაფერი, რაც საჭიროა დასახული ამოცანის ფარგლებში!

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

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

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

დროის სია- სლაიდის სიგლუვეს

დროის ხედი- შოუს დრო

რადიომაგრამ- ღილაკები სლაიდის ქვეშ ნავიგაციისთვის. true მნიშვნელობის აკრეფისთვის, false-ის ასარჩევად, გამოჩნდება ღილაკები.

ახლა კი დავიწყოთ! მოდით შევქმნათ ეს ფაილი index.htm

მოცემულ კოდში, yak mi Bachimo არაფერი იშლება, სლაიდერი-შეფუთვანიშნავს მცხუნვარე ბანაკირომელიც გახსნის სლაიდერს ეკრანის შუაში. Პარამეტრი აქტიური-სლაიდიდააყენეთ სურათის ზომა და სურათის სიმაღლე ნათელია її dozhini-სთვის. მე სლაიდერიაქტიური სურათის ჩვენება.

ახლა მოდით შევქმნათ ეს ღია ფაილი სტილი.cssდა დაწერე, მე მჭირდება როზეტი ჩვენთვის:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); სხეული ( ფერი: #4f4f5a; შრიფტი-ოჯახი: "Roboto", sans-serif; შრიფტის ზომა: 16 პიქსელი; padding: 0; ზღვარი: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( სიგანე: 100%; ჩვენება: ცხრილი; პოზიცია: შედარებითი; გადინება: დამალული; -webkit-user-select: none; -moz-user-select: none; -ms- მომხმარებლის არჩევა: არცერთი; -o-მომხმარებლის არჩევა: არცერთი; მომხმარებლის-არჩევა: არცერთი; padding: 0;-webkit-transition: 1s; -o-transition: 1s; გადასვლა: 1s; -out; transition-time- ფუნქცია: ease-in-out; ) .slide( სიგანე: calc(100%/4); სიის სტილი: არცერთი; ჩვენება: inline; float: მარცხენა;) .slide img ( სიგანე: 100%; ) .რადიო- მაგრამ( margin-top:10px; text-align:center;) -გამეორება;) .Radio-But .ctrl-select:hover (კურსორი:pointer; background-position:center center;) .Radio-But .ctrl-არჩევა .active ( ფონის პოზიცია: ცენტრის ზემოთ; ) #prewbutton, # nextbutton ( ჩვენება:block;სიგანე:40px;სიმაღლე:100%;პოზიცია:a bsolute;top:0;overflow:დამალული;text-indent:-999px; ფონი: url("arrowBg.png") მარცხენა ცენტრში არ განმეორდეს; გამჭვირვალობა:0,5 ; z-ინდექსი:3; მონახაზი: არცერთი !მნიშვნელოვანი; ) #prewbutton ( მარცხნივ:10px; ) #nextbutton (მარჯვნივ:10px; nextbutton:hover (გაუმჭვირვალობა:1; )

Სტილში სლაიდერი-შეფუთვაჩაწერა სიგანე- თქვენი სურათების მაქსიმალური სიგრძე.

Სტილში #სლაიდერი (სიგანე: გამოთვლა (100% * 4); )і .სლაიდი (სიგანე: calc(100%/4); )შეიყვანეთ სურათების რაოდენობა თქვენს სლაიდერში. მაგალითად їх 4.

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

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

$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = ფუნქცია(ისარი)(clearTimeout(slideTime); if(arrow == "შემდეგი")(if(slideNum == slideCount) (slideNum=1;) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else(slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("აქტიური"); $(".ctrl-select").eq(slideNum - 1).addClass("აქტიური"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function()(animSlide("შემდეგი"); return false; )) $("#prewbutton").click(function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) (adderSpan += " "+ინდექსი+""; }); $("

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

წარმოდგენილ სლაიდერში გამოსახულია სურათები ვებ რესურსიდან https://pixabay.com/.

1. jQuery კარუსელი "clickCarousel"

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

1. jQuery კარუსელი, მოდული „carouFredSel“

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

4. jQuery მოდული: "Elastislide" კარუსელი

5. მოდული "TinyCarousel"

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

მოდული "Slider Kit", მარტივი კარუსელი სხვაგვარადგადახვევა.

7. javascript კარუსელი

8. jQuery მოდული "Grid Navigation Effects"

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

9. მარტივი კარუსელი

10. კარუსელი ბლოკებიდან "Easy Paginate"

jQuery მოდული "Easy Paginate". მართკუთხა ბლოკი არის მთავარი ელემენტი სიაში li, თუ სამზე მეტი ელემენტია, მაშინ ყველაფრის დასათვალიერებლად აუცილებელია ნავიგაციის დაჩქარება, სლაიდერის მსგავსად (დამატებითი ისრებისთვის "წინ", "უკან" და დამატებითი ნავიგაციის ღილაკებისთვის ქვემოთ).

11. ვერტიკალური მბრუნავი „ვერტიკალური ტიკერი“

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

12. javascript css გადახვევის არე

javascript გადაწყვეტა "TinyScroller" DIV კონტეინერში მოთავსებული უბნის გადახვევისთვის.

13. jQuery მოდული "Smooth Div Scroll"

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

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

15. კონტენტის მბრუნავი „წრიული შინაარსის კარუსელი“

17. გადამხვევი

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

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

19. მოხერხებული სლაიდერი

სლაიდერი ავტომატურად იქმნება. პროდუქტის დასახელების, აღწერილობის, სურათის მისამართის, სურათის მისამართის გათვალისწინებით აღებულია slider.db.txt ფაილიდან. ტექნოლოგიები, რომლებიც იმარჯვებენ: CSS, PHP, jQuery.

20. დაბლოკოს როტაცია jQuery ვარიანტებით

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

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

22. დინამიური ბლოკი "მომხმარებელთა გამოხმაურება"

ავტომატური როტაცია ბლოკის შიგნით. ტექნოლოგიები, რომლებიც იმარჯვებენ: PHP, XML, CSS, jQuery.

ეს მოდული გარდაქმნის სიის ელემენტებს (ul li). jQuery ელემენტებიკარუსელები.

26. javascript კარუსელი "ImageFlow"

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

27. გადახვევის შინაარსი

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

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

33. ადგილზე გადახვევა, Mootools მოდული "Scrollbar"

დაწნული zdіysnyuєtsya როგორც smuga-ს მოძრავი, ისე თაგვის ბორბლის დასახმარებლად.