html

با توسعه CSS3، طرح بندی به صورت نمادین رشد می کند. بیشتر و بیشتر عملکردی را می توان بر روی CSS خالص اجرا کرد. این پست روند توسعه را نشان می دهد. در ارتباط بودن لغزنده چرخه بدون یک خط واحد جاوا اسکریپت. چرخش اتوماتیک، انتخاب هر اسلاید با انتقال صاف - در "خالص" CSS. مثال در عمل

اطلاعات کلی.

استانداردها و پیشوند ها

انتقال خواص، انیمیشن و تبدیل به مدت طولانی در یک یا چند اجرا شده است، در تمام مرورگرهای محبوب اجرا شده است. در تاریخ 6 ژوئن 2012، W3C اعلام کرد که این بخش از استاندارد CSS 3.0 استاندارد توسعه یافته به طور چشمگیری تغییر نمی کند و توصیه می شود آن را به تمام مرورگرها امروز اجرا کنید.

برای توسعه دهندگان جلو، این به معنی ظاهر یک استاندارد است که شما می توانید به آن تکیه کنید. در حال حاضر لازم نیست که ترس داشته باشید که در آینده هر مرورگر از خواص غیر استاندارد پیشوند خود را رد کند - زیرا آن را با یک اموال استاندارد تکرار می شود و در صورت لزوم آن را جایگزین می کند.

منسوخ شده نسخه اینترنتی اکسپلورر، که به زودی به نسخه 9 مربوط می شود، از انتقال، انیمیشن و تبدیل به هیچ وجه پشتیبانی نمی کند. اما سهم آنها هنوز بیش از 10٪ است. IE7-9 توسط JS- "Plug" ارائه شده است، و اثر سوئیچینگ صاف بین اسلایدها هیچ چیز نیست.

چرا CSS، نه JS؟

وظایف زیادی وجود دارد که می توانند حل شوند کمک CSS: گالری های تعاملی، منوهای کشویی چند سطحی، ساختمان و انیمیشن نمودارهای سه بعدی ... چرا از CSS استفاده می کنید، زیرا شما می توانید همه چیز را در JS انجام دهید، به خصوص با توجه به جرم تحولات آماده شده؟ استدلال اصلی ممکن است چنین باشد:

• در بیشتر موارد، اثرات CSS کار سریعتر، زیرا آنها به طور انحصاری مرورگرهای خود را دنبال می کنند. این به ویژه در دستگاه های تلفن همراه قابل توجه است.
• برای پیاده سازی این کار، شما به دانش JS و به طور کلی هر زبان برنامه نویسی نیاز ندارید. ویرایش CSS، به عنوان یک قاعده، همچنین برای یک کاربر معمولی موجود است. و "هیزم جذاب" در CSS بسیار پیچیده تر از JS است.

حراجی

بنه

بنابراین، یک روش Modifier عنصر بلوک متدولوژی (BEM) برای نامگذاری کلاسهای CSS استفاده شد. خط پایین این است که طرح بندی بر اساس طرح صفحه از بلوک های مستقل است. به گفته BEM، بلوک ممکن است عناصر داشته باشد، اما تنها در داخل بلوک.

کلاسهای لغزنده:
.slider / * بلوک حاوی نوار تصویر * / .sslider__Radio / * Point Radio * / .slider__item / * Slide * / .sslider__img / * تصویر در داخل اسلاید * / .sslider__number-list / * container با دکمه های سوئیچینگ * / .slider__number / * دکمه گنجاندن اسلاید مرتبط * / .sslider__number- پس از / * برای پشتیبانی از IE7 و IE8 تعبیه شده است، که از شبه عناصر پشتیبانی نمی کند: پس از و :: پس از، به ترتیب * / .sslider_count_x / * اصلاح کننده تعریف تعداد اسلایدها X * /

انیمیشن

توالی انیمیشن برای پرسنل کلیدی برای سه اسلاید به نظر می رسد این است:
@ Slider_Item-Autoplay_Count_3 (0٪ (Opacity: 1؛) 10٪ (Opacity: 1؛) 43٪ (Opacity: 0؛) 100٪ (Opacity: 0؛) 100٪ (Opacity: 0؛)
ویژگی اجرای لغزنده این است که تمام اسلایدها و تمام دکمه ها همان انیمیشن را تعیین می کنند:
Slider_Count_3. Slider_Count_3. Slider_Count_3 .Slider__Number-After (-Moz-انیمیشن: Slider__Item-Autoplay_Count_3 15S Infinite؛ -Webkit-انیمیشن: Slider__iteM-Autoplay_Count_3 15S Infinite؛ -O-انیمیشن: Slider__Item-Autoplay_Count_3 15S Infinite؛ انیمیشن: Slider__Item-Autoplay_Count_3 15S Infinite ؛)
این رویکرد به شما اجازه می دهد تا به طور جدی مقدار کد را کاهش دهید، زیرا تمام انیمیشن ها هنوز هم باید آنها را با نسخه های پیشوند (@ -Webkit-KeyFrames، @ -Moz-KeyFrames و @ KeyFrames) کپی کنند، و هر کدام از این "پشته" قوانین باید به طور جداگانه برای هر تعداد اسلاید مورد نیاز (توسط مشتری) شرح داده شود. اگر شما همچنین به طور جداگانه انیمیشن را برای هر اسلاید توصیف کنید، حجم کد می تواند ده ها کیلوبایت باشد.

برای اجتناب از این، اما به طور مداوم تمام اسلایدها و دکمه ها را با استفاده از یک انیمیشن متحرک، آن را کافی برای تنظیم شروع انیمیشن در زمان برای هر جفت اسلاید + دکمه:
.slider__item: nth-type (2)، .slider__number: nth-type (2)\u003e .slider__number- پس از (-moz-انیمیشن تاخیر: 5S؛ -Webkit-انیمیشن- تاخیر: 5s؛ -o- انیمیشن تاخیر: 5S؛ انیمیشن تاخیر: 5s؛) .slider__item: nth-of type (3)، .slider__number: nth-of type (3)\u003e .slider__number- پس از (-Moz-انیمیشن- تاخیر: 10S ؛ -BEBKIT-انیمیشن-تاخیر: 10S؛ -O-انیمیشن-تاخیر: 10s؛ انیمیشن-تاخیر: 10s؛) ...
برای اولین جفت، مقدار پیش فرض باقی می ماند - صفر افست.

همچنین مهم است که افست به تعداد اسلایدها بستگی ندارد و می تواند یک بار برای حداکثر مقدار آنها توصیف شود.

به عنوان یک نتیجه، انتقال صاف متحرک بین اسلایدها به نظر می رسد این است:

مکث زمانی که مکان نما را شناور

برای مورد زمانی که کاربر می خواهد اسلاید را بر روی صفحه نگه می دارد، اما نمی خواهد چرخش را خاموش کند، می توانید از یک حالت مکث برای شناور بر روی اسلاید استفاده کنید:
.sliders: sliderssliders.slider__item، .slider: hover .slider__number- پس از (-Moz-animation-ide-play-state: posused؛ -Lay-state: متوقف شد؛)

سوئیچینگ کلیک کنید

تعدادی از رویدادهای CSS وجود دارد عنصر HTML. اگر ما در مورد کلیک ماوس صحبت کنیم، این ظاهر شبه کلاس: Focus، Target، یا: در یکی از عناصر صفحه بررسی شده است. Pseudo-Class: Focus می تواند بیش از یک عنصر در هر صفحه در یک زمان باشد؛ Pseudo-Class: Target Litters تاریخچه مرورگر و نیاز به حضور تگ "A"؛ Pseudo-Class: Checked شرایط را قبل از خروج از صفحه به یاد می آورد، به علاوه، در مورد استخر های رادیویی، یک سوئیچ گسسته است که تنها یک عنصر یک گروه خاص را می توان انتخاب کرد - چه چیزی مورد نیاز است.
.slider__RADIO (سبک ها را انتخاب نکرده اید) .slider__Radio: بررسی شده (سبک های رادیوکوپتر انتخاب شده)

در انتخابات زیر سطح 4، حالت یک عنصر دلخواه را تغییر دهید (به عنوان مثال، کدورت اسلاید) تنها در یک بسته نرم افزاری با یک دکمه رادیویی، با کمک انتخابات همسایگان + و ~ امکان پذیر است. شما می توانید هر دو سبک همسایه و سبک های فرزندان همسایه را تغییر دهید، اما در هر صورت همسایه باید پس از رادیوکوپتر باشد.
/ * سبک اول اسلاید "انتخاب نشده" * / .slider__Radio: nth-type (1) ~ .slider__item: nth-type (1) (Opacity: 0.0؛) / * سبک اولین کشویی در ایالت "انتخاب شده" * / .sslider__Radio: Nth-of-type (1): بررسی ~ .slider__item: nth-type (1) (Opacity: 1.0؛)
سوئیچینگ لغزش کدورت استفاده می شود که حاوی یک تصویر است. این بیشتر است راه جهانیاز تعویض خواص تصویر، زیرا در یک ظرف DIV، بر خلاف یک عنصر خالی IMG، می توان هر یک را قرار داد اطلاعات اضافی (به عنوان مثال، نام اسلاید، یا توضیحات مرتبط، از جمله لینک ها).
برای اسلایدها، خواص انتقال نشان داده شده است که به شما اجازه می دهد تا بین آنها صاف کنید.
.slider__item (-moz-transition: opacity 0.2S خطی؛ -webkit-transition: opacity 0.2S خطی؛ -o-transition: opacity 0.2S خطی؛ انتقال: Opacity 0.2S خطی؛)

توقف چرخش هنگام انتخاب اسلاید

هنگامی که یک کاربر از هر اسلاید را انتخاب می کنید، باید انیمیشن تمام اسلایدها و دکمه ها را متوقف کنید. این به خاطر این واقعیت است که اولویت مقادیر خواص انیمیشن در حال اجرا همیشه بالاتر از سایر مقادیر دیگر خواص مشابه است (شما می توانید حتی خواص درون خطی را قطع کنید).

از آنجا که انیمیشن، حتی اگر ساختار یکسان باشد، هر اسلاید وجود دارد و لازم است انیمیشن تمام اسلایدها را خاموش کنید (در غیر این صورت انتقال آرام سه اسلاید شرکت خواهند کرد)، تمام کانال های رادیویی باید قبل از اولین اسلاید قرار گیرد.
...

علاوه بر این، تمام دکمه ها (برچسب های دکمه رادیویی) باید در یک واحد جداگانه گروه بندی شوند و پس از استخر های رادیویی قرار گیرند، در غیر این صورت مشکلات می توانند با موقعیت جهانی برچسب ها برای تعداد دلخواه اسلاید ها بوجود آیند.

توقف انیمیشن از تمام اسلاید ها و دکمه ها هنگام انتخاب هر اسلاید به صورت زیر تنظیم می شود:
.slider__RADIO: .sslider__item، .slider__Radio: ~ .slider__number-list\u003e .slider__number-after هیچ یک؛)

اسلاید تعداد دلخواه

یک نوار لغزنده جهانی زیر هر تعداد اسلایدها غیرممکن است، زیرا برای هر عدد آن "پشته" CSS قوانین انیمیشن را می گیرد. هر "پشته" (اگر شرح داده شده) را می توان از طریق اصلاح کننده واحد لغزنده متصل کرد:
.slider_count_x.
جایی که x تعداد اسلایدها است.

برای حمایت از برخی از مرورگرهای قدیمی، اولین اسلاید انیمیشن نیست. به همین دلیل، ظرف اولین تصویر دارای کدورتی است که همیشه برابر با 1.0 است. یک مشکل وجود دارد: با سوئیچینگ صاف دو اسلاید دیگر در میان خود، اولین بار تغییر می کند (این می تواند پدر و مادر والدین بلوک لغزان باشد). برای حذف اثر انتقال، تاخیر گذر تاخیر برای تمام اسلایدها، به جز انتخاب انتخاب شده است؛ برای انتخاب شده، Z-index بیش از هر کس دیگری نصب شده است:
.slider__item (Opacity: 1.0؛ موقعیت: نسبی؛ -moz-transition: opacity 0.2s خطی 0.2S؛ -webkit انتقال: کدورت 0.2S 0.0s خطی 0.2S؛) .Slider__Radio: Nth-of-Type (1): بررسی ~ .slider__item: nth-type (1)، .slider__Radio: nth-of type (2): بررسی ~ .slider__item: nth-type (2)، .slider__Radio: nth-of type (3): بررسی ~ .slider__item: nth-of-type (3)، .slider__Radio: nth-of type (4): بررسی ~. slider__item: nth-of type (4)، .slider__Radio: nth-of type (5): بررسی ~ .slider__item: nth-type (5) (-moz-transition: opacity 0.2S خطی؛ -Webkit انتقال : Opacity 0.2S خطی؛ -O-Transition: Opacity 0.2S خطی؛ انتقال: Opacity 0.2S خطی؛ Z-index: 6؛)
به طوری که اسلایدها با عناصر دیگر سایت اختلاف نظر ندارند (به عنوان مثال، منوی کشویی را با شاخص Z کمتر یا برابر 6 برابر نکنند)، زمینه خود را (متن انباشتی) برای یک بلوک اتصال ایجاد نکنید حداقل برای دید، Z-index`a ضروری است:
.slider (z-index: 0؛)

بنابراین

در حال حاضر، بدون مهارت های برنامه نویسی و کتابخانه های تخصصی، به استاندارد سازی نهایی آن، CSS 3.0 به شما امکان می دهد تا وظایف پیچیده و جالب را اجرا کنید. لغزنده تعاملی توصیف شده، در حال حاضر، به طور کامل در 80٪ از کاربران RANTET عملیاتی است. برای اکثر کاربران باقی مانده، یعنی کاربران مرورگرهای IE7-9، می توانید از JS- "Plug" استفاده کنید، که عملکرد اصلی نوار لغزنده را اجرا می کند.

مثال کار می تواند دیده شود

مارس 3، 2015 در 18:15

جالب و در عین حال یک نوار لغزنده ساده cSS خالص3

• توسعه وب سایت،
• CSS،
• html

من امریکا را به کسی باز نمی کنم، من مردم را با تمرکز جدید تعجب نخواهم کرد و مغز را برای کسانی که در CSS3 به عنوان یک آفتاب شنا می کنند، باز نمی کند. من به شما یک راه ساده برای ایجاد یک نوار لغزنده با استفاده از توابع ساده CSS3 بدون نیاز به استفاده از جاوا اسکریپت به شما می گویم.

1. حرکت پایه

برای پیاده سازی لغزنده، ما به یک مجموعه نسبتا ساده از برچسب ها نیاز داریم، که به نوبه خود به عناصر لغزنده پاسخ می دهد.

در اینجا می بینیم که بلوک کلی "Wrapper" شامل یک بلوک "لغزنده" با 5 اسلاید است، که در داخل آن می تواند هر کد HTML را که بر روی اسلاید قرار می گیرد قرار داده شود. قبل از واحد مشترک، دکمه های رادیویی وجود دارد، که پس از آن پنهان خواهد شد تا پانل ناوبری اسلاید خود را ایجاد کند که بر اساس برچسب های کنترل بلوک به ما کمک خواهد کرد.

2. کشیدن نوار لغزنده

در اینجا ما یک CSS کمی را متوقف خواهیم کرد. لطفا توجه داشته باشید که برای برخی از خواص، پیشوند های متقابل مرورگر به همه اعمال می شود مرورگرهای مدرن می تواند آنها را درک کند.

* (حاشیه: 0؛ padding: 0؛ -Webkit-box اندازه گیری: Border-Box؛ -Moz جعبه اندازه: جعبه مرزی؛ جعبه اندازه: Border-Box؛ جعبه اندازه: Border-Box؛ ) بدن (Background-Image: URL (http://habrastorage.org/files/996/d76d04d422fa54cc43322FA54CC433E7EAD2A.PNG)؛)
با طراحی پس زمینه و سبک های به اشتراک گذاشته شده، همه چیز روشن است.

Wrapper (ارتفاع: 350 پیکسل؛ حاشیه: 100px خودکار 0؛ موقعیت: نسبی؛ عرض: 700 پیکسل؛) .Slider (Background-Color: #DDD؛ ارتفاع: به ارث برده؛ سرریز؛ موقعیت: نسبی؛ WebKit Box -Shadow: 0 0 20px RGBA (0، 0، 0، 5)؛ -Moz-Box-Shadow: 0 0 20px RGBA (0، 0، 0، 0، 5)؛ -O-Box-Shadow: 0 0 20px RGBA (0، 0، 0، 5)؛ جعبه سایه: 0 0 20px RGBA (0، 0، 0، 7)؛)
واحد مشترک و بلوک با یک نوار لغزنده ابعاد مشابهی را برای نظارت بر موقعیت کشویی در صفحه دارد. در حالی که هیچ اسلاید وجود ندارد، لغزنده ما به طور موقت در خاکستری روشن رنگ شده است.

بسته بندی\u003e ورودی (نمایش: هیچ؛)
دکمه های رادیویی مخفی کردن بعدا به آنها نیاز خواهیم داشت.

نتیجه این لحظه چنین:

3. ساخت اسلاید

در اینجا ما سبک های معمول را برای اسلایدها و هر اسلاید به طور جداگانه ارائه می دهیم:

اسلاید: مطلق؛ عرض: به ارث؛) .slide1 (پس زمینه-تصویر: URL (http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452DB516195CB0C9BFC9.jpg)؛) .slide2 (پس زمینه-تصویر: URL (http : //habrastorage.org/files/3e1/95d/c7f/3E195DC7F5A64F9807F49A14F97BA0E.jpg)؛)؛ SSLIDE3 (پس زمینه-تصویر: URL (http://habrastorage.org/files/663/6B1/6F / 6636B1D4F8E643D29EAB8C192FC1CEA3.JPG) ؛؛) .sslide4 (پس زمینه-تصویر: URL (http://habrastorage.org/files/e59/424/c04/e59424/04/04/099424/04/04/09979784AB015C87EA.jpg)؛) .slide5 (پس زمینه-تصویر: URL (http: //habratorage.org/) فایل ها / 53C / FF6 / C1C / 53CFF6C1CAF842368C70B8EF892D8402.JPG)؛)
برای همه اسلاید ها، ما موقعیت مطلق را ذکر کردیم تا بتوانید با اثرات ظاهر بازی کنید. ابعاد اسلایدها از اندازه خود کشویی گرفته شده است تا آنها نباید به چندین مکان تجویز شوند.

4. ما ناوبری را روی اسلایدها می کنیم

از آنجا که دکمه های رادیویی پنهان شده اند و ما به عنوان سوئیچ نیاز داریم، ما برچسب های آماده شده را تهیه می کنیم:

Wrapper .Crappers (چپ: 50٪؛ حاشیه سمت چپ: -98px؛ موقعیت: مطلق؛) برچسب برچسب (مکان نما: اشاره گر؛ صفحه نمایش: inline-block؛ ارتفاع: 8 پیکسل؛ حاشیه: 25px 12px 0 16px؛ موقعیت: نسبی؛ عرض: 8px؛ -Webkit-Border-Radius: 50٪؛ -Moz-Border-Radius: 50٪؛ -O-Border-Radius: 50٪؛ شعاع مرزی: 50٪؛). برچسب برچسب: پس از (مرز: 2px Solid #DDD؛ محتوا: "" صفحه نمایش: بلوک؛ ارتفاع: 12px؛ سمت چپ: -4px؛ موقعیت: مطلق؛ بالا: -4px؛ عرض: 12px؛ -Webkit-border-radius: 50٪؛ -Moz-border - شعاع: 50٪؛ -O-border-radius: 50٪؛ شعاع مرزی: 50٪؛)
ما کلاسیک ناوبری را می سازیم هر دکمه یک منطقه در قالب یک دایره است، که درون آن، با یک اسلاید فعال، یک منطقه خالی جزئی است. در عین حال، ما نتیجه زیر را داریم:

5. ما دکمه را کلیک کنید کلیک کنید

این زمان برای تدریس لغزنده برای تغییر اسلاید با کلیک بر روی یک دکمه خاص است:

برچسب بسته بندی (مکان نما: اشاره گر؛ صفحه نمایش: inline-block؛ ارتفاع: 8 پیکسل؛ حاشیه: 25px 12px 0 16px؛ موقعیت: نسبی؛ عرض: 8px؛ -webkit-border-radius: 50٪؛ -Moz-border-Radius: 50 ٪؛ -o-border-radius: 50٪؛ شعاع مرزی: 50٪؛ -Webkit-transition: پس زمینه سهولت از خارج .5s؛ -moz-transition: پس زمینه سهولت از خارج .5s؛ -o- انتقال: پسزقق پس انداز .5s؛ انتقال: پسزمینه سهولت خارج .5s؛). برچسب برچسب: Hover، # Slide1: بررسی ~ .controls برچسب: nth-type (1)، # slide2: بررسی ~ .controls label: nth-of-type (2)، # slide3: بررسی ~ .controls label: nth-of type (3)، # slide4: بررسی ~. controls label: nth-type (4) # Slide5: بررسی ~ .controls برچسب: nth-of-type (5) (پس زمینه: #DDD؛)
در دکمه های ناوبری، رنگ آمیزی صاف را در داخل آنها اضافه کنید. همچنین شرایطی را که دکمه فعال و دکمه ای را که مکان نما به صورت یکپارچه رنگ آمیزی می شود اضافه کنید. دکمه های رادیویی ما آماده هستند:

6. لغزنده مهندسی

خوب، حالا ما این کار را انجام می دهیم که اسلایدها در نهایت تغییر می کنند:

اسلایدها (ارتفاع: به ارث؛ Opacity: 0؛ موقعیت: مطلق؛ عرض: به ارث برده؛ Z-index: 0؛ -webkit-transform: مقیاس (1.5)؛ -Moz-transform: مقیاس (1.5)؛ -O-transform: scale (1.5)؛ تبدیل: مقیاس (1.5)؛ -Webkit انتقال: تبدیل سهولت در خارج .5s، Opacity سهولت از خارج .5s؛ -moz-transition: تبدیل سهولت در خارج .5s، Opacity سهولت -in-out .5s؛ -o-transition: تبدیل سهولت از خارج .5s، Opacity سهولت از خارج .5s؛ انتقال: تبدیل سهولت در خارج .5s، Opacity سهولت در خارج .5s؛ ) # slide1: بررسی ~ .slider\u003e .sslide1، # slide2: بررسی ~ .slider\u003e .sslide2، # slide3: ~ .slider\u003e .sslide3، # slide4: ~ .slider\u003e را بررسی کرد .slider\u003e .sslide5 (Opacity: 1؛ z-index: 1؛ -webkit-transform: scale (1)؛ -moz-transform: مقیاس (1)؛ -O-transform: scale (1)؛ تبدیل: مقیاس ( تبدیل: مقیاس (یک)؛)
ما خواص را در سبک های معمول اسلاید اضافه می کنیم، که در آن تمام اسلایدها نامرئی می شوند و به پس زمینه می روند. ما همچنین افزایش کمی در اسلایدها را افزایش دادیم، در حالی که آنها نامرئی هستند تا ظاهر جالبی در نوار لغزنده داشته باشند.

نتیجه را می توان در اینجا مشاهده کرد.

لغزنده CSS دارای مزایای بیش از لغزنده در جاوا اسکریپت است. یکی از این مزایا، سرعت دانلود است. نه تنها تصاویر برای لغزنده استفاده می شود. اندازه های بزرگ (اگر بهینه سازی برای صفحه نمایش های مختلف وجود نداشته باشد)، همچنین برای چندین بار در حال دانلود اسکریپت ها است. اما در مقاله فقط لغزنده ها را بر روی CSS خالص خواهید دید.

این چیزی است که من در سایت در موضوع لغزنده یافتم:

1. تصاویر Slider CSS3

لغزنده در CSS، که از دکمه های رادیویی اسلاید برای حرکت استفاده می کند. این استخر های رادیویی تحت لغزنده ها قرار دارند. همچنین، علاوه بر استخر های رادیویی، ناوبری با استفاده از تیرانداز در سمت چپ و راست انجام می شود. برای پیگیری آنچه در حال حاضر نمایش داده می شود - شبه مدارس استفاده می شود: بررسی شده است.

2. تصاویر لغزنده CSS3 با مینیاتوری

بر خلاف نوار لغزنده گذشته در CSS، در اینجا به جای استخر های رادیویی در پایین، ریز عکسها از همه تصاویر است که همچنین هنگام ایجاد گالری عکس نیز مناسب است. تصاویر با یک نوع اثر جایگزین می شوند: در حالی که افزایش می یابد، به راحتی ناپدید می شوند.

3. گالری در CSS

اما این لغزنده در CSS مناسب برای فروش صفحات است. به عنوان یک قاعده، بسیاری از توسعه دهندگان وب در توسعه وام دهی (فروش صفحات) یک نوار لغزنده را در ابتدا قرار دهید تا در صفحه اول (بدون پیمایش)، بازدید کننده بلافاصله تمام مزایایی را که در این صفحه قرار دارد را مشاهده کرد. علاوه بر این، این لغزنده سازگار است، که همچنین خوشحال است.

4. لغزنده CSS بدون لینک

بلافاصله می خواهم توجه کنم که این نوار لغزنده از لینک ها استفاده نمی کند! به طور پیش فرض، علاوه بر تصویر اصلی (اسلاید)، 2 اسلاید بیشتر قابل مشاهده است. آنها در پشت اصلی قرار دارند. تغییر اسلایدها در حالت زیبا رخ می دهد: اول، دو اسلاید منتقل می شوند و اسلاید به مرکز تبدیل می شود، که پس از آن تبدیل به اصلی خواهد شد. سپس اسلاید افزایش می یابد و جلوتر از بقیه قرار می گیرد.

5. لغزنده تطبیقی \u200b\u200bدر CSS3

یک نوار لغزنده سازگار دیگر که کنترل آن بر اساس رادیو کوپتر است. برای دیدن این که چگونه این نوار لغزنده نگاه خواهد کرد دستگاه های مختلفآه - شما می توانید به طور مستقل پنجره مرورگر را تغییر دهید، یا در صفحه نوار لغزنده، آیکون های خاصی از دستگاه های مختلف وجود دارد، با کلیک بر روی آن که خواهید دید، یک نوار لغزنده را بر روی کامپیوتر، رایانه لوحی یا گوشی هوشمند خود نگاه کنید.

*** BONUS SLIDER ***

علاوه بر تمام لغزنده، که در بالا ارائه می شود، من می خواهم به شما لطفا با یکی دیگر. این لغزنده مناسب برای ایجاد گالری عکس است. کلمات چیزی را توضیح نمی دهند، بنابراین بهتر است همه چیز را در ویدیو تماشا کنید:

1. نمایش اسلامی عالی جی کوئری

یک نمایش اسلاید بزرگ دیدنی و جذاب با استفاده از فن آوری های جی کوئری.

2. پلاگین "چرخ فلک مقیاس" جی کوئری

نمایش اسلاید مقیاس پذیر با استفاده از جی کوئری. شما می توانید اندازه های اسلاید را که شما مناسب تر است تنظیم کنید.

3. جی کوئری پلاگین "slidejs"

لغزنده تصاویر با توضیحات متن.

4. پلاگین "jslidernews"

5. Slider جی کوئری CSS3

هنگامی که مکان نما را روی فلش های ناوبری حرکت می دهید، یک تصویر کوچک از اسلاید بعدی ظاهر می شود.

6. لغزنده جی کوئری ناز "چرخه ارائه"

لغزنده جی کوئری با نشانگر بارگذاری تصویر. یک تغییر اسلاید اتوماتیک وجود دارد.

7. پلاگین جی کوئری "لغزنده اختلاف منظر"

لغزنده با اثر پس زمینه حجمی. برجسته این لغزنده در پس زمینه پس زمینه، که شامل چندین لایه است، هر کدام از آنها با آن پیمایش می شود سرعت های مختلف. در نتیجه، تقلید از اثر فراگیر را به نمایش می گذارد. به نظر می رسد بسیار زیبا، شما می توانید مطمئن شوید که در مورد آن. اثر هماهنگ تر در چنین مرورگرها نمایش داده می شود: اپرا، گوگل کروم.، یعنی.

8. تازه، لغزنده جی کوئری سبک "Bxslider 3.0"

در صفحه آزمایشی در بخش "نمونه ها" شما می توانید لینک ها را به همه پیدا کنید گزینه های احتمالی از این پلاگین استفاده کنید.

9. لغزنده جی کوئری تصاویر، پلاگین "Slidejs"

Slider جی کوئری شیک مطمئنا قادر به تزئین پروژه شما خواهد بود.

10. جی کوئری پلاگین نمایش اسلاید "اسلاید آسان" v1.1

آسان برای استفاده از پلاگین جی کوئری برای ایجاد یک نمایش اسلاید.

11. پلاگین "جی کوئری اسلاید"

پلاگین جی کوئری آسان در طراحی های مختلف. یک تغییر اسلاید اتوماتیک وجود دارد.

12. گالری جی کوئری CSS با تغییر اسلاید اتوماتیک

اگر بازدید کننده در یک زمان خاص فلش "جلو" یا "برگشت" را فشار ندهد، گالری به طور خودکار پیمایش می کند.

13. لغزنده جی کوئری "Nivo Slider"

پلاگین نور بسیار حرفه ای با کیفیت بالا با کد معتبر. اثرات مختلفی از تغییر اسلاید وجود دارد.

14. لغزنده جی کوئری "Mobilyslider"

لغزنده تازه لغزنده جی کوئری با اثرات مختلف تغییر تصویر.

15. پلاگین جی کوئری "Slider²"

لغزنده آسان با تغییر اسلاید اتوماتیک.

16. لغزنده جاوا اسکریپت تازه

لغزنده با تغییر تصویر خودکار.

پلاگین برای اجرای یک نمایش اسلاید با تغییر اسلاید اتوماتیک. این امکان وجود دارد که صفحه نمایش را با استفاده از ریز عکسها از تصاویر مدیریت کنید.

جی کوئری CSS لغزنده تصویر با استفاده از پلاگین Nivoslider.

19. لغزنده جی کوئری "Jshowoff"

پلاگین برای چرخش محتوا. سه گزینه برای استفاده: بدون ناوبری (با تغییر خودکار در فرمت نمایش اسلاید)، با ناوبری در قالب دکمه ها، با ناوبری در قالب تصاویر.

20. پلاگین نمونه کارها اثر شاتر

پلاگین جی کوئری تازه برای نمونه کارها عکاس. گالری یک اثر جالب برای تغییر تصاویر را اجرا کرد. عکس ها یکدیگر را با اثر مشابه کار شاتر لنز جایگزین می کنند.

21. آسان جاوا اسکریپت CSS Slider "Tinyslider 2"

پیاده سازی لغزنده تصاویر با با استفاده از جاوا اسکریپت و CSS

22. باد از نوار لغزنده TinyCirclider

لغزنده شیک شیک. انتقال بین تصاویر با کشیدن در اطراف لغزنده دایره به عنوان یک دایره قرمز انجام می شود. اگر شما در طراحی از عناصر دور استفاده می کنید، مناسب است.

23. لغزنده تصاویر بر روی جی کوئری

لغزنده آسان "کشویی کیت". لغزنده در طرح های مختلف نمایش داده می شود: عمودی و افقی. همچنین انواع مختلف ناوبری بین تصاویر را اجرا کرد: با استفاده از دکمه های "به جلو" و "پشت" با استفاده از ماوس، با استفاده از ماوس روی اسلاید کلیک کنید.

24. گالری با مینیاتور "کیت کشویی"

گالری "کیت کشویی". مینیاتوری اسکرول هر دو در جهت عمودی و افقی انجام می شود. انتقال بین تصاویر با استفاده از: چرخ های موش، کلیک ماوس یا یک مکان نما مینیاتوری انجام می شود.

25. لغزان جی کوئری کشویی کشویی محتوا

لغزنده محتوا عمودی و افقی در جی کوئری.

26. نمایش اسلاید جی کوئری "کیت کشویی"

نمایش اسلاید با تغییر اسلاید اتوماتیک.

27. آسان حرفه ای جاوا اسکریپت CSS3 لغزنده

یک نوار لغزنده شسته شده در جی کوئری و CSS3، که در سال 2011 ایجاد شده است.

نمایش اسلامی جی کوئری با مینیاتوری.

29. ساده اسلاید ساده جی کوئری

نمایش اسلاید با دکمه های ناوبری.

30. SlideHow Slideshow jQuery "Skitter"

جی کوئری پلاگین "Skitter" برای ایجاد یک نمایش اسلاید خیره کننده. پلاگین پشتیبانی از 22 (!) مشاهده اثرات انیمیشن های مختلف را در هنگام تغییر تصاویر پشتیبانی می کند. این می تواند با دو گزینه ناوبری برای اسلایدها کار کند: با استفاده از شماره های اسلاید و با تصویر بند انگشتی. اطمینان حاصل کنید که به تظاهرات نگاه کنید، پیدا کردن بسیار با کیفیت بالا. فن آوری های مورد استفاده: CSS، HTML، جی کوئری، پی اچ پی.

31. نمایش اسلاید "ناخوشایند"

نمایش اسلاید عملکردی در قالب اسلایدها می تواند انجام دهد: تصاویر ساده، تصاویر با امضا، تصاویر با راهنمایی های پاپ آپ، کلیپ های ویدئویی. شما می توانید از فلش ها، لینک ها به شماره ها و کلیدهای اسلاید به سمت راست / چپ بر روی صفحه کلید برای حرکت استفاده کنید. نمایش اسلاید در چند نسخه ساخته شده است: با ریز عکسها و بدون آنها. برای مشاهده تمام گزینه ها، پیاده روی در امتداد لینک ها نسخه ی نمایشی # 1 - نسخه ی نمایشی # 6 در بالای صفحه DEMO قرار دارد.

تصاویر نوار لغزنده طراحی بسیار اصلی شبیه فن. تغییر اسلاید متحرک ناوبری بین تصاویر با استفاده از فلش انجام می شود. همچنین یک تغییر خودکار را فراهم می کند که می تواند با استفاده از دکمه پخش / مکث واقع شده در بالای صفحه روشن و خاموش شود.

لغزنده جی کوئری متحرک. تصاویر پس زمینه به طور خودکار مقیاس زمانی که پنجره مرورگر تغییر می کند. برای هر تصویر یک بلوک را با یک توضیحات شناور می کند.

34. لغزنده "لغزنده شار" بر روی جی کوئری و CSS3

لغزنده جی کوئری جدید. چندین اثر متحرک متحرک هنگام تغییر اسلاید.

35. پلاگین "Jswitch" جی کوئری

گالری جی کوئری متحرک.

نمایش اسلاید نور در جی کوئری با تغییر اسلاید اتوماتیک.

37. نسخه جدید پلاگین "SlideDreck 1.2.2"

لغزنده محتوای حرفه ای. گزینه ها با یک تغییر اسلاید اتوماتیک، و همچنین یک گزینه با استفاده از یک چرخ ماوس برای انتقال بین اسلایدها امکان پذیر است.

38. لغزنده جی کوئری "Sudo Slider"

اسلحه آسان تصویر بر روی جی کوئری. بسیاری از گزینه های پیاده سازی: تغییر افقی و عمودی تصاویر، با پیوندهایی به تعداد اسلاید و بدون آنها، با امضاهای تصاویر و بدون، اثرات مختلف تغییر تصویر. یک تابع از تغییر اسلاید اتوماتیک وجود دارد. پیوندهای به تمام پیاده سازی نمونه را می توان در صفحه DEMO یافت.

39. Slideshow jQuery CSS3

نمایش اسلاید با مینیاتوری ها از حالت تغییر اسلاید اتوماتیک پشتیبانی می کند.

40. جی کوئری "لغزنده شار"

لغزنده با اثرات متعدد تغییر تصویر.

41. لغزنده ساده جی کوئری

لغزنده تصویر شیک بر روی جی کوئری.

من می خواهم یک راه ساده برای ایجاد یک نوار لغزنده، بدون استفاده از JS، با کمک انیمیشن CSS بگویم.

1) برای شروع، شما HTML را نوشتید، فرض کنید که 4 تصویر در نوار لغزنده جایگزین خواهند شد.

2) بعد، ما اندازه بلوک را قرار می دهیم، و چند تنظیمات دیگر، موقعیت: نسبی لازم است برای ایجاد یک زمینه قالب بندی، پس از آن روشن خواهد شد که چرا.

لغزنده (عرض: 500 پیکسل؛ ارتفاع: 300 پیکسل؛ حاشیه: خودکار؛ حاشیه - بالا: 25px؛ مرز: 1px جامد جامد؛ موقعیت: نسبی؛ سرریز: پنهان؛)
3) ما همچنین برخی از خواص را برای خود اسلایدها تعریف می کنیم:

اسلاید (عرض: 500 پیکسل؛ ارتفاع: 300 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛)
همانطور که از CSS دیده می شود، ما تمام اسلایدها را در گوشه بالا سمت چپ نوار لغزنده قرار می دهیم، بنابراین موقعیت همان منبع را مشخص می کنیم.

1. اسلاید در موقعیت منبع است، توسط کاربر نشان داده شده است.

2. اسلاید به سمت چپ حرکت می کند تا زمانی که لغزنده به طور کامل خارج شود (نوار لغزنده نیز در بالا ذکر شده است، سرریز: پنهان، به ترتیب، اسلاید به اشیاء اطراف اجرا نمی شود).

5. اسلاید پایین یک سطح را با یک نوار لغزنده پایین می آورد

6. اسلاید به موقعیت شروع حرکت می کند
به عبارت دیگر (عکس ها در حال حاضر، با توجه به اعداد از لیست بالا):

meyhefames slide (از (top: 0؛ left: 0؛) 1 (تبدیل: ترجمه (0px، 0px)؛) 2 (تبدیل: ترجمه (-500 پیکسل، 0)؛) 3 (تبدیل: ترجمه (-500 پیکسل، 300 پیکسل )؛) 4 (تبدیل: ترجمه (500 پیکسل، 300 پیکسل)؛) 5 (تبدیل: ترجمه (500 پیکسل، 0)؛) به (تبدیل: (0px، 0px)؛))
5) بنابراین، روشن شد که مسیر اسلاید به نظر می رسد. هر اسلاید "دایره" در اطراف ظرف آن یک نوار لغزنده است - و به اصل باز می گردد. بنابراین، ما می توانیم هر تعداد اسلایدها را بی نهایت پیچ و تاب کنیم. اما یک نانوایی باقی ماند، که مهمترین چیز در این طرح است - زمان. لازم است به درستی قصه گویی انیمیشن را در زمان محاسبه کنید و تاخیر صحیح را برای هر اسلاید تنظیم کنید تا به طور همزمان به طور همزمان متحرک شود. به منظور درک نحوه تنظیم تاخیر به درستی و محاسبه زمان انیمیشن، من در زیر آمده است.

بیایید تعیین مراحل از نقطه قبلی را داشته باشیم و درک آنچه در هر مرحله اتفاق می افتد. در اصل، مراحل شماره 1، 2 و 6 این مراحل است که اسلاید به منطقه قابل مشاهده می رسد. از این واقعیت که اسلایدها باید به طور جداگانه حرکت کنند و به همان اندازه که از نوار لغزنده یکدیگر را فشار داده اند، می توان نتیجه گرفت که مدت زمان مراحل 2 و 6 باید برابر باشد. بلافاصله رزرو کنید که من توانستم این طرح را تنها با شرایطی که طول مدت زمان اول نیز برابر با مدت زمان دوم و 6 است، کار کنم. آنچه در طول مراحل 3.4 و 5 اتفاق می افتد، اساسا نیازهای فنی است و برای سادگی، بیایید این سه مرحله را در 1 متحد کنیم.

پس از ساده سازی، ما داریم:

1. مرحله - لغزنده بر روی منبع نشان داده شده است
2. مرحله - لغزنده به سمت راست حرکت می کند
3. گام - لغزان باعث می شود حرکات فنی
4. مرحله - لغزنده به سمت چپ حرکت می کند، بازگشت به موقعیت اولیه

برای اطمینان از حادثه به اسلایدها، در لحظه ای که اسلاید مرحله 2 شروع می شود، اسلاید بعدی باید مرحله 4 را آغاز کند.

اگر زمان، دایره تمام انیمیشن ها t؛
تعداد اسلایدها - n؛
مدت 3 مرحله - Y؛
مدت زمان مراحل 1.2 و 4 - x است؛
گام تاخیر انیمیشن برای n-slide-z؛
سپس:

y \u003d (100 * n - 150) / n؛
x \u003d (100 - y) / 3؛
x و y باید به منافع ترجمه شود، و سپس:
z \u003d 2 * x * t؛

برای مورد زمانی که n \u003d 4، همانطور که در مثال بالا، ما دریافت می کنیم:

زمین 3 - 62.5٪، 1، 2 و 4 - 12.5٪. گام تاخیر انیمیشن برای هر اسلاید بعدی - 25٪.

کدام فواصل بین مراحل در مرحله سوم خواهد بود - مهم نیست.

6) حالا که همه ما شمارش کردیم و همه ارزش ها را می توان به کد نهایی داده می شود.

انیمیشن:

Slide Slide Slide (از (top: 0؛ left: 0؛) 12.5٪ (تبدیل: ترجمه (0px، 0px)؛) 25٪ (تبدیل: ترجمه (-500 پیکسل، 0)؛) 36٪ (تبدیل: ترجمه (- 500 پیکسل، 300 پیکسل)؛) 37٪ (تبدیل: ترجمه (500 پیکسل، 300 پیکسل)؛) 87.5٪ (تبدیل: ترجمه (500 پیکسل، 0)؛) به (تبدیل: (0px، 0px)؛))
اسلایدها:

slide1 (پس زمینه: URL (1.jpg)؛ انیمیشن-تاخیر: 7.5s؛) .slide2 (سابقه و هدف: URL (2.jpg)؛ انیمیشن تاخیر: 5s؛) انیمیشن-تاخیر: 2.5S؛) .slide4 (زمینه: URL (4.jpg)؛ انیمیشن تاخیر: 0S؛)
عمومی CSS برای همه اسلاید:

اسلاید (عرض: 500 پیکسل؛ ارتفاع: 300 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ انیمیشن نام: اسلاید؛ انیمیشن مدت: 10s؛ انیمیشن- زمان بندی تابع: خطی؛ انیمیشن-تکرار شمارش: Infinite؛ )
در اینجا، در واقع، همه چیز! با تشکر از هر کسی که به پایان می رسد.