როგორ შევქმნათ ვიკორისტის კარუსელი მხოლოდ HTML და CSS გამოყენებით. მარტივი jQuery კარუსელი jQuery-ში წერტილოვანი კარუსელის დამზადება
კარგი. ამ სტატიაში მე ვაქვეყნებ შესანიშნავ მსუბუქ 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-სკრიპტების ყველა გზას და სკრიპტების შესაძლო კონფლიქტს. ყველა ზუსტრიჩისკენ
რობიტი სუფთა JS კარუსელი, ნულიდან საკუთარ თავზე? რატომ არ იარო ველოსიპედით, თუ მზად ხარ გადაწყვეტილების მისაღებად, გლუვი / ბუსლაიდერები? ამის მინიმუმ ორი მიზეზი არსებობს:
- პირველადი მიზნებისთვის
- vikonannya ტესტისთვის zavdan
განაცხადის მიღებისას მიმართეთ ვაკანსიას HTML verstalnik, გთხოვოთ არა მხოლოდ კარუსელის გაკეთება, არამედ її მოქმედებაში მოყვანა JSმესამე მხარის ბიბლიოთეკების გამოყენების გარეშე.
კონდახის კარუსელი
როგორ გავუშვათ JavaScript ელემენტებით?
შეცვალეთ ელემენტების სიმძლავრე, დამატებითი მეთოდებისთვის, მიმდინარე მიდგომით. სამი ვეშაპი, რომელზედაც ისინი ცდილობენ JavaScript:
- ავტორიტეტი
- მეთოდები
- podії
თავად კორისტუვაჩი უშვებს პოდიას დაწკაპუნებითღილაკზე დაჭერისას. პროგრამისტის მენეჯერი დააწკაპუნეთ საჭირო ელემენტზე და დაწერეთ ინსტრუქციები (ფუნქცია) ბრაუზერისთვის, რა შეიძლება მოხდეს, დააწკაპუნეთ საათზე.
HTML მარკირება კარუსელისთვის
ჩვენ ვქმნით კონტეინერს სურათებისთვის, ჩავსვით თავად სურათები და ორი ღილაკი - წინ / უკან.
CSS სტილები
#გალერეა(სიგანე: 640px
ზღვარი: 20px ავტო;
ტექსტის გასწორება: ცენტრში;
}
#გალერეა .ფოტოები img(
სიგანე: 100%
ჩვენება: არცერთი;
}
#gallery .ფოტოები img:first-child(
ჩვენება: ბლოკი;
}
ღილაკები (
margin-top: 20px;
}
რობოტის კარუსელის ლოგიკა
როგორ დავწერო JSკოდი, თუ ლოგიკა არ გესმით, რას ფიქრობთ. ღილაკზე დაჭერისას წინ, ამჟამინდელი სურათი ცნობილია, მაგრამ შემდეგ ადგილზე ახალია. ხილვადობის ზონაში ყოველთვის არის ერთი სურათი, მაგრამ რა შეიძლება ითქვას სხვებზე? რეშტა, ჩვენ შოვალი, ნაკრები ყველა ნახატზე ჩვენება: არცერთი, ტოვებს მხოლოდ პერშუს, სთხოვს їy ჩვენება: ბლოკი, ფსევდოკლასის მეშვეობით პირველი შვილი.
როგორ მოვიპაროთ ისე, რომ სკინით დააჭიროთ ღილაკს წინ, პირველი სურათი გამოჩნდა და მეგობარი გამოჩნდა, ჩანაცვლება კი მეორე, მესამე. აუცილებელია დენის გადართვა ჩვენება, მიჟ არცერთი / ბლოკიღილაკზე დაჭერისას.
js კოდი
რობიმოს ელემენტების შერჩევა
მოსახსნელი ღილაკები წინ / უკანსელექტორის საშუალებით, მეთოდის ჰოვერირება querySelectorდა გადასახდელი їх ცვლილებისას btn_prev / btn_next.
მოდით btn_prev = document.querySelector("#gallery .buttons .prev");
მოდით btn_next = document.querySelector("#gallery .buttons .next");
ყველა სურათს ამომრჩეველი მეთოდით ვაშორებთ querySelectopAllდა ასე რომ, ის თვითკმარია, їх u შეიცვალა სურათები.
querySelectopAll- ამოიღეთ ელემენტების მასივი, ასე რომ, ყველა სურათი.
მოდით images = document.querySelectorAll("#gallery .photos img");
მასივში ელემენტები უკვე ინახება დანომრილ ხედში, ნულიდან დაწყებული. ასე რომ, ჩვენ შეგვიძლია დავუკავშირდეთ მათ ნომრისთვის. ალე უკანა მხარეს, მოდით შევქმნათ ახალი ცვლილება და ჩავდოთ მასში პირველი სურათის ნომერი, თієї, როგორ შეიძლება ძალა ჩვენება: ბლოკი.
მოდით i = 0; // ნაკადის სურათის რაოდენობა, ეკრანზე
მოდით გადავიდეთ სტრიმინგ სურათზე, მაგრამ ის განსხვავდება სტილით, სიმძლავრით ჩვენება.
Images[i].style.display = "არცერთი"; // სურათის სტრიმინგი მინდა
ეკრანზე ერთბაშად არ ჩანს სურათები. როგორ გამოჩნდება სურათი იქ? ჩვენ ვიცით, რომ შემდეგი სურათის რაოდენობა ყოველთვის იქნება წინა სურათის რაოდენობაზე ერთით მეტი.
მე++; // მეტი შეცვლა i ერთზე
სურათები.სიგრძე- სურათების რაოდენობა, როგორ შეიძლება შეიცვალოს, არ არის საჭირო იმის თქმა, რომ გვაქვს 3 სურათი, ბრაუზერი და ასე რომ თქვენ იცით. M zbіshuєmo lichnik მე, ერთხელ მარტო, დოკები არ გამოჩნდება ბოლო სურათზე, მაგრამ შემდეგ ჩვენ პრიმუსს, zmushuemo კარუსელს, ისევ პირველ სურათს მივმართავთ. ცე ჰქვია ველოსიპედით.
დადგენილია, რომ თუ ლიჩნიკი მე, უფრო დიდი, ნაკლები რეალური სურათების რაოდენობა, შემდეგ ის გადავა სტრიმინგ სურათზე, ნომერი 0.
If(i >= images.length)(
i = 0; // ძველის შეცვლა 0
}
როდესაც ნახატები ხორხის საპირისპირო თანმიმდევრობით არის გაჟღენთილი, ლიჩი მე, შეიძლება შეიცვალოს ერთზე. თუ ცვლილების მნიშვნელობა ხდება ნულზე ნაკლები, მაშინ საჭიროა მასში დარჩენილი სურათის ნომრის ჩასმა.
btn_prev.onclick = ფუნქცია()(
images[i].style.display = "არცერთი";
i = i - 1;
თუ მე< 0){
i = სურათები.სიგრძე - 1;
}
სურათები[i].style.display="ბლოკი";
}
Vіdnіmaєmo іz zagalї kolkosti სურათები.სიგრძე, ერთი და ერთადერთი სურათი ნომრით 2. ეს იქნება ბოლო სურათი, ამიტომ პროგრამაში გაანგარიშება იწყება ნულიდან.
ტესტის ჩასაბარებლად, განლაგების დიზაინერის პოზიციისთვის აუცილებელია JS-ის მკაფიო გაგება, სწორედ განლაგების დიზაინერზე ორიენტაცია.
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 მოდული"მარტივი პაგინატი". მართკუთხა ბლოკი არის მთავარი ელემენტი სიაში 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-ს მოძრავი, ისე თაგვის ბორბლის დასახმარებლად.
ასე რომ, თემა დასრულება იგივე 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 ფუნქციაზე სწრაფი დაწკაპუნებით). იმისთვის, რომ იმუშაოთ უბრალო გალერეის ცენტრიდან, შესაძლებელია ყველაფერი, რაც საჭიროა დასახული ამოცანის ფარგლებში!
ასევე, მნიშვნელოვანია, რომ კონდახის მიმართული იყოს ადაპტაციური, რათა კარუსელი შესაბამისად გაფართოვდეს ეკრანზე და სწორად გამოჩნდეს როგორც კომპიუტერის ან ლეპტოპის ეკრანზე, ასევე ტაბლეტებისა და სმარტფონების ეკრანებზე.
/* აქედან იწყება ჩვენი კარუსელი. The.carousel-wrapper-ის პოზიციის ბლოკი უნდა, მაგრამ the.carousel-item აბსოლუტური. . */ .carousel-wrapper( position:relative; /* აბსოლუტურად განლაგებული ბლოკები იღებს მამის სიმაღლეს და სიგანეს. :0; padding:25px50px;გაუმჭვირვალობა:0;გარდამავალი:all0.5sease-in-out; /* მონიშნული padding zliva და მარჯვენა ხელის 50px თითოეული? ამ გზით ჩვენ შეგვიძლია განვათავსოთ ჩვენი შეტყობინებები! კანი იქნება 50px სიგანე. თქვენი პოსტები უბრალოდ არ ჰგავს კვადრატებს: */ .arrow( position:absolute; top:0; display:block; 0);background:url("/carousel-arrow-dark.png")50%50%/ 20pxno -გამეორება; და მეგობარს მარჯვნივ.. როდესაც მე ვიგებ იმავე სურათებს ისრისთვის, ვატრიალებ მას 180 გრადუსით. */ &.arrow-next( right:0; -webkit-transform :ბრუნვა (180 გრადუსი); transform:rotate(180deg); ) ) /* ეს უფრო მიზანშეწონილია, როგორც სლაიდ კარუსელი, რომელიც ათვალიერებს ბნელ ბუგრის, და როგორც ბლოკი. კარუსელი - ნივთს შეიძლება ჰქონდეს კლასი „შუქი“, ტექსტს ვცვლით თეთრზე და vicoristovuєmo თეთრ ისრებს სინათლის ნაცვლად. გადააბრუნეთ, რათა დარწმუნდეთ, რომ გზა ისრის გამოსახულებისკენ არის სწორი */ &.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%; ) ) ) ) /* სამიზნეების დაყენება ჩვენების დასაყენებლად: არცერთი ; ამ გზით, ჩვენ დავუშვებთ ბრაუზერის მუდმივ ხელახლა დაკავშირებას კარუსელის ზედა ნაწილთან კანის ზეწოლით ისრებზე. რა უფლებამოსილება აქვს რომელიმე ელემენტს, რომლის იდენტიფიკატორი დაფუძნებულია „სამიზნე-პუნქტზე“. */ ( ჩვენება:არა; ვიზუალიზაციისთვის შეცვალეთ პირველი სლაიდის გამჭვირვალობის მნიშვნელობა 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( გამჭვირვალობა:1; ) /* ანდა target-item-# ფოკუსზე, არჩევადი გადაფურცვლა ~ ამომრჩევი, გაქრება და გაფართოვდება მხეცზე დახმარებისთვის z-ინდექსი: 3. აქ შეგიძლიათ დაამატოთ დამატებითი სპანი სამიზნე ნივთის იდენტიფიკატორით, ასე რომ გექნებათ სამზე მეტი. შეგიძლიათ მოითხოვოთ და დაამატოთ 10 ცალი. */
