نوار لغزنده سازگار HTML5. چگونه یک نوار لغزنده تطبیقی \u200b\u200bرا در CSS3 ایجاد کنیم؟ لغزنده تطبیقی \u200b\u200bدر CSS3

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

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

جدول زمانی - سرعت سوئیچینگ اسلاید

timeview - زمان نشان داده شده است

رادیوبوت - دکمه های زیر اسلاید، برای ناوبری سریع. به طور پیش فرض، ارزش واقعی، اگر استفاده از اشتباه، دکمه ها ناپدید می شوند.

و حالا اجازه دهید شروع کنیم! ایجاد و باز کردن فایل index.htm

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

در حال حاضر فایل را ایجاد و باز کنید. style.css و گریه نشانه ما نیاز داریم:

import URL ("https://fonts.googleapis.com/css؟family\u003dopen+sans |Roboto")؛ بدن (رنگ: # 4F4F5a؛ فونت چهره: "Roboto"، Sans-serif؛ فونت اندازه: 16 پیکسل؛ پد: 0؛ حاشیه: 0؛) # لغزنده بسته بندی (حداکثر عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ مارجین بالا: 80 پیکسل؛) # Active-Slide (عرض: 100٪؛ صفحه نمایش: جدول؛ موقعیت: نسبی؛ سرریز - پنهان؛ -Webkit-user-Select: هیچ؛ -Moz-User-Select: هیچ؛ -ms- کاربر-SELECT: هیچکدام؛ -o-user-select: هیچکدام؛ کاربر انتخابی: هیچکدام؛) #slider (موقعیت: نسبی؛ عرض: CALC (100٪ * 4)؛ بالا: 0؛ چپ: 0؛ حاشیه: 0 ؛ padding: 0؛ -Webkit-transition: 1s؛ -o-transition: 1s؛ انتقال: 1s؛ -webkit-transition-timing-timing-timing: سهولت در خارج؛ -o-transition-timing-function: سهولت در -Out؛ تابع زمان بندی انتقال: سهولت در خارج؛) .slide (عرض: Calc (100٪ / 4)؛ لیست سبک: هیچ؛ نمایش: inline؛ شناور: سمت چپ؛) .sslide img (عرض: 100٪؛) .RRADIO-BUTTE (MARGIN-TOP: 10PX؛ متن ترانه: مرکز؛) .RADIO- اما .TRL-SELECT (MARGIN: 2PX؛ صفحه نمایش: Inline-Block؛ عرض: 16px؛ ارتفاع: 16px؛ سرریز : پنهان؛ Text-Indent: -9999px؛ سابقه و هدف: URL (RadioBG.P NG) مرکز پایین بدون تکرار؛ ) .RRADIO-CTRL-SELECT: HOVER (مکان نما: اشاره گر؛ موقعیت پس زمینه: مرکز مرکز؛) .RADIO-BLETRL-SELECTIVE.CEPTIVE (موقعیت پس زمینه: مرکز بالا؛) #PREWBUTTON، #NextButton (نمایش : بلوک؛ عرض: 40px؛ ارتفاع: 100٪؛ موقعیت: مطلق؛ بالا: 0؛ overflow: hidden؛ text-indent: -999px؛ سابقه و هدف: URL (arrowbg.png ") مرکز چپ بدون تکرار؛ Opacity: 0.5 ؛ z-index: 3؛ طرح کلی: هیچ! NextButton: Hover (Opacity: 1؛)

در سبک سبک لغزنده بسته بندی پرفوری عرض – حداکثر طول عکس های شما.

در سبک سبک #slider (عرض: CALC (100٪ * 4)؛) و .slide (عرض: CALC (100٪ / 4)؛) تعداد عکس ها را در نوار لغزنده خود مشخص کنید. در مثال ما، آنها 4 هستند.

اگر فلش به جلو / بازگشت به دید از لغزنده خود را می توان نامرئی ساخته شده و آنها ظاهر می شود زمانی که شما شناور. برای انجام این کار در پارامترها prewbut. و nextbut، مقدار اموال کدورت را تنظیم کنید 0.

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

$ (سند) .Ready \u003d 700؛ var timeview \u003d 5000؛ var radioBut \u003d true؛ var slidenum \u003d 1؛ var slideTime؛ SlideCount \u003d $ ("# لغزنده. لغزنده (SlideTime)؛ اگر (فلش \u003d\u003d "بعدی") (اگر (slidenum \u003d\u003d slidecount) (slidenum \u003d 1؛) else (slidenum ++) ترجمه \u003d - $ ("# Active-Slide") .width () * (Slidenenum - 1)؛ $ ("# لغزنده"). CSS (("تبدیل": "ترجمه" ("+ translateWidth +" PX، 0) "))؛) دیگر اگر (فلش \u003d\u003d" prew ") (اگر (slidenum \u003d\u003d 1) (slider \u003d slidecount؛) else (sliderum- \u003d 1) translateWidth \u003d - $ (# Active-Slide "). عرض () * (SlideneM - 1)؛ $ (" #slider ")؛ CSS (("تبدیل": "ترجمه" ("+ translateWidth +" PX، 0) "))؛) دیگر (slidenum \u003d arrow؛ translateWidth \u003d - $ (" # Active-Slide "). عرض () * (Slidenum - 1) $ ("# لغزنده"). CSS (("تبدیل": "ترجمه" ("+ translateWidth +" PX، 0) "))؛) $ (" Ctrl-Select.active ") .removeclass (" فعال ")؛ $ (" CTRL-SELECT "). EQ (SLIDENEM - 1) .ADDCLASS (" Active ")؛) اگر (RADIBUT) (var $ linkarrow \u003d $ ("<>") .Prependto (" # Active-Slide ")؛ $ (" # nextbutton "). کلیک کنید (تابع ()؛ بازگشت نادرست؛) $ (" # prewbutton "). کلیک کنید (manueks (animlide) ")؛ بازگشت نادرست؛))) var adderspan \u003d" "؛ $ (" اسلاید "). هر (تابع (index) (Adderspan + \u003d" "+ index +""; }); $("

"+ Adderspan +"
") .appendto (" # لغزنده بسته بندی ")؛ $ (" ctrl-select: first "). AddClass (" Active ")؛ $ (Ctrl-Select"). کلیک کنید (تابع (var gotonum \u003d parsefloat) ($ (این) .text ())؛ انیمیشن (Gotonum + 1)؛))؛ var pause \u003d false؛ var rotator \u003d function () (اگر (! pause) (slideTime \u003d settimeout (manure () بعدی "))، timeview)؛)) $ (" # لغزنده بسته بندی "). شناور (تابع ()؛ pause \u003d true؛)، function () (pause \u003d false؛ rotator ()؛)؛ var کلیک کردن \u003d FALSE؛ var prevx؛ $ ("اسلاید"). Mousedown (عملکرد (e) (کلیک کنید \u003d true؛ prevx \u003d e.clientx؛))؛ $ ("اسلاید"). museup (clicking \u003d false ؛)؛ $ (سند) .MouseUp (تابع () (کلیک کردن \u003d false؛))؛ $ ("اسلاید"). mouseMove (function (e) (اگر (کلیک کنید \u003d\u003d درست) (اگر (e.clientx)< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > prevx) (Animlide)؛ ClearTimeout (SlideTime)؛) کلیک کردن \u003d اشتباه؛ )))))) $ ("اسلاید"). شناور (). CSS ("مکان نما"، "اشارهگر")؛ روتاتور ()؛ ))

تابع انهدام سه نوع ارزش را می گیرد: بعد، پیش، مقدار عددی. پارامتر بعدی اسلاید زیر را تغییر می دهد، Prew یکی از قبلی را باز می کند، و مقدار عددی یک اسلاید قطعا مشخص شده از طریق دکمه های اسلاید رادیویی انتخاب شده است.

لغزنده ارائه شده از تصاویر از منابع وب https://pixabay.com/ استفاده شده است.

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

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

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

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

تصاویر jQuery-Sliders

لغزنده پاسخگو JSSOR.

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

  • طراحی سازگار؛
  • بیش از 15 تنظیمات؛
  • بیش از 15 اثر تغییر تصویر؛
  • گالری تصاویر، چرخ فلک، پشتیبانی از اندازه تمام صفحه؛
  • آگهی های روتاتور عمودی، فهرست اسلایدها؛
  • پشتیبانی از ویدئو

نسخه ی نمایشی | دانلود

PGWSlider - لغزنده مبتنی بر جی کوئری / زپتو

تنها وظیفه این افزونه، نشان دادن اسلاید تصاویر است. این بسیار جمع و جور است، زیرا اندازه فایل های جی کوئری تنها 2.5 کیلوبایت است، که به شما اجازه می دهد تا آن را به سرعت بارگیری کنید:

  • طرح بندی انطباقی؛
  • بهینه سازی SEO؛
  • پشتیبانی از مرورگرهای مختلف؛
  • انتقال تصویر ساده؛
  • اندازه آرشیو تنها 2.5 کیلوبایت است.

نسخه ی نمایشی | دانلود

لغزنده اخبار عمودی جی کوئری

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

  • طراحی سازگار؛
  • ستون سوئیچینگ اخبار عمودی؛
  • سرفصل های تمدید شده

نسخه ی نمایشی | دانلود

لغزنده Wallop.

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

  • طرح بندی انطباقی؛
  • طراحی ساده؛
  • گزینه های مختلف برای تغییر اسلاید؛
  • حداقل کد جاوا اسکریپت؛
  • اندازه تنها 3KB.

نسخه ی نمایشی | دانلود

گالری Polaroid Style Style

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

  • لغزنده تطبیقی؛
  • طراحی تخت؛
  • تغییر تصادفی اسلایدها؛
  • دسترسی کامل به کد منبع.

نسخه ی نمایشی | دانلود

A-Slider

نسخه ی نمایشی | دانلود

Hislider - HTML5، جی کوئری و وردپرس تصویر لغزنده

Hislider یک پلاگین جدید جی کوئری رایگان را معرفی کرد، که با آن می توانید تصاویر گالری مختلف را با انتقال فوق العاده ایجاد کنید:

  • لغزنده تطبیقی؛
  • نیازی به دانش برنامه نویسی ندارد
  • چند قالب و پوسته شگفت انگیز؛
  • اثرات انتقال زیبا؛
  • پشتیبانی از سیستم عامل های مختلف؛
  • سازگاری با وردپرس، جوملا، دروپال؛
  • توانایی نمایش محتوای انواع مختلف: تصاویر، فیلم های یوتیوب و Videa Videa؛
  • تنظیم انعطاف پذیر؛
  • توابع اضافی مفید؛
  • حجم نامحدود محتوای نمایش داده شده.

نسخه ی نمایشی | دانلود

لغزنده وای

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

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

  • کاملا سازگار؛
  • پشتیبانی از تمام مرورگرها و انواع دستگاه ها؛
  • پشتیبانی از دستگاه های حسی؛
  • نصب ساده در وردپرس؛
  • انعطاف پذیری در راه اندازی؛
  • SEO بهینه شده است.

نسخه ی نمایشی | دانلود

Nivo Slider - JQuery-Plugin رایگان

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

  • جی کوئری 1.7 و بالاتر؛
  • اثرات انتقال زیبا؛
  • ساده و انعطاف پذیر در راه اندازی؛
  • جمع و جور و تطبیقی؛
  • کد باز؛
  • قدرتمند و ساده؛
  • چند قالب مختلف؛
  • پیرایش خودکار تصویر.

نسخه ی نمایشی | دانلود

لغزنده جی کوئری ساده با اسناد فنی

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

  • طرح بندی انطباقی؛
  • طراحی مینیمالیستی؛
  • اثرات مختلف از دست دادن و تغییر اسلاید.

نسخه ی نمایشی | دانلود

لغزنده تصویر جی کوئری کامل

یک نوار لغزنده بسیار ساده است که 100٪ از عرض صفحه را اشغال می کند و به اندازه صفحات دستگاه های تلفن همراه تنظیم می شود. این کار با انتقال CSS کار می کند و تصاویر "مناسب" با حیوانات است. لنگر را می توان جایگزین یا حذف کرد اگر شما نمی خواهید پیوند به تصویر را متصل کنید.

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

  • تطبیقی \u200b\u200bجی کوئری -scider؛
  • اندازه کامل؛
  • طراحی مینیمالیستی.

نسخه ی نمایشی | دانلود

لغزنده محتوای الاستیک + دارای

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

هنگام مشاهده روی صفحه نمایش های کوچک مورب، زبانه های ناوبری به آیکون های کوچک تبدیل می شوند:

  • طراحی سازگار؛
  • با کلیک ماوس حرکت کنید

نسخه ی نمایشی | دانلود

نوار لغزنده رایگان 3D

نوار لغزنده تجربی، تصاویری در 3D. دو پشته شبیه به پشته های کاغذی، از آن زمانی که پیمایش تصویر در مرکز نوار لغزنده نمایش داده می شود:

  • طراحی سازگار؛
  • تلنگر تبدیل؛
  • اثرات 3D.

نسخه ی نمایشی | دانلود

لغزنده شکاف تمام صفحه بر اساس جی کوئری و CSS3 + Manual

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

  • طراحی سازگار؛
  • انتقال تقسیم؛
  • لغزنده تمام صفحه.

نسخه ی نمایشی | دانلود

Unislider - لغزنده جی کوئری بسیار کوچک

هیچ نشانگر غیر ضروری و علامت گذاری، اندازه کمتر از 3 کیلوبایت نیست. از هر کد HTML برای اسلایدهای خود استفاده کنید، آن را گسترش دهید با استفاده از CSS . همه مربوط به Unslider در GitHub واقع شده است:

  • پشتیبانی از مرورگرهای مختلف؛
  • پشتیبانی صفحه کلید؛
  • تنظیم ارتفاع؛
  • طراحی سازگار؛
  • پشتیبانی از ورودی حسی

نسخه ی نمایشی | دانلود

اسلایدهای پاسخگو حداقل

پلاگین ساده و جمع و جور ( اندازه تنها 1 کیلوبایت)، که یک نوار لغزنده انطباقی را با استفاده از عناصر داخل ظرف ایجاد می کند. پاسخ ها LIDES.js کار می کند مقدار زیاد مرورگرها، از جمله تمام نسخه های IE از IE6 و بالاتر:

  • کاملا سازگار؛
  • اندازه 1 کیلوبایت؛
  • انتقال CSS3 با امکان راه اندازی از طریق جاوا اسکریپت؛
  • نشانه گذاری ساده با استفاده از یک لیست مشخص شده؛
  • توانایی پیکربندی اثرات انتقال و مدت زمان مشاهده یک اسلاید؛
  • پشتیبانی از توانایی ایجاد چندین نمایش اسلاید؛
  • پیمایش اتوماتیک و دست

نسخه ی نمایشی | دانلود

دوربین - لغزنده جی کوئری رایگان

دوربین یک پلاگین با بسیاری از اثرات انتقال، یک طرح سازگار است. ساده در راه اندازی، پشتیبانی شده توسط دستگاه های تلفن همراه:

  • طراحی کاملا سازگار؛
  • امضاء؛
  • توانایی اضافه کردن ویدئو؛
  • 33 آیکون های مختلف رنگ.

نسخه ی نمایشی | دانلود

Slidesjs، پلاگین سازگار با جی کوئری

Slidesjs یک پلاگین سازگار برای جی کوئری (1.7.1 و بالاتر) با پشتیبانی از دستگاه های حسی و انتقال CSS3 است. آزمایش با او، نمونه های چندگانه آماده را امتحان کنید که به شما کمک می کند تا چگونگی اضافه کردن slidesjs را به پروژه خود اضافه کنید:

  • طراحی سازگار؛
  • CSS3-Productions؛
  • پشتیبانی از دستگاه های حسی؛
  • ساده در راه اندازی.

نسخه ی نمایشی | دانلود

BX Slider جی کوئری.

این یک لغزنده جی کوئری انطباقی رایگان است:

  • به طور کامل انطباق - به هر دستگاه تنظیم می شود؛
  • افقی، تغییر عمودی اسلاید؛
  • اسلایدها ممکن است شامل تصاویر، ویدئو یا HTML -Content باشند؛
  • پشتیبانی گسترده برای دستگاه های حسی؛
  • با استفاده از CSS-Transforms برای انیمیشن اسلاید ( شتاب سخت افزاری);
  • API Callback و روش های کاملا عمومی؛
  • اندازه فایل کوچک؛
  • آسان برای پیاده سازی

نسخه ی نمایشی | دانلود

FlexSlider 2.

بهترین کشویی سازگار. یک نسخه جدید برای افزایش سرعت کار، فشرده سازی، نهایی شد.

نسخه ی نمایشی | دانلود

گالریا - گالری عکس سازگار بر اساس جاوا اسکریپت

Galleria در میلیون ها سایت برای ایجاد یک گالری تصاویر با کیفیت بالا استفاده می شود. تعداد بررسی های مثبت در مورد کار او به سادگی رول:

  • کاملا رایگان؛
  • حالت مشاهده تمام صفحه؛
  • 100٪ انطباقی؛
  • تجربه برنامه نویسی مورد نیاز نیست
  • پشتیبانی از آی فون، اپل و دیگر دستگاه های لمسی؛
  • فلیکر، Vimeo، یوتیوب و خیلی بیشتر؛
  • چندین موضوع

نسخه ی نمایشی | دانلود

زغال اخته - لغزنده تصویر ساده سازگار با جی کوئری

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

4 نوامبر 2019 ضبط به روز شده است

یوری آلمانی

لغزنده در CSS خالص + نوار لغزنده پاداش

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

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

1. نوار لغزنده تصویر CSS3

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

2. Slider مینیاتوری CSS3

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

3. گالری در CSS

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

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

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

5. کشویی سازگار در CSS3

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

*** BONUS SLIDER ***

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

خروجی

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

نقاطی که در مقاله مورد بررسی قرار گرفتند.

سلام همه کشویی بسیار جالب من می خواهم به توجه شما توجه کنم. OOO ... من به شما نگاه می کنم به طور کامل در مورد من فراموش کرده ام. بله، بله، من قبلا رفته بودم، احتمالا به مدت شش ماه یا یک سال بود و من کاملا نمی دانم چگونه هر روز خود را در مقاله قرار داده است (اگر چه کاملا واقعی است). خوب، خوب، نه در مورد این سخنرانی در حال حاضر. نوار لغزنده توسط Tympanus Codrops ارائه شده و در HTML5، CSS3 و Tweenmax.js کار می کند.

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

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

اتصال گالری

اتصال گالری دشوار نخواهد بود

دانلود فایل ها

ابتدا شما فقط باید منابع را از سایت من برای یک لینک مستقیم دانلود کنید. از بایگانی شما باید به ریشه سایت از پوشه IMG، CSS و JS وارد شوید

CSS و فایل های JS را وصل کنید

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

و اسکریپت صفحه را به برچسب بسته بندی می کند

یک نوار لغزنده را به سایت اضافه کنید

اول، ناوبری را به بالای سایت اضافه کنید

و سپس خود کشویی خود را

خاطرات و افکار.
1

اتوماسیون

رومیک
2

ماشین آلات.

کلمات دلخواه
3

همزیستی

تنها راهنمای قلب شماست

رانش خالی از سکنه
4

Bellamio

واگرایی سرگرم کننده
5

مراتع.

امید و آرزوها.
6

تمرکز.

1

اتوماسیون

یک درخت باید دوست شما باشد اگر شما "او را نقاشی کنید

فقط این اتفاق بیافتد ما فقط این جریان را از ذهن ما خارج می کنیم. فقط استراحت کنید و اجازه دهید آن را جریان دهد. این آسان است اجازه دهید برخی از ابرهای کوچک را در دنیای ما قرار دهیم. این یک تصویر بسیار سرد است، ممکن است مجبور باشم کتم بگیرم. این در مورد من به انجماد من است. این یک دریاچه کوچک خوشحال خواهد بود. اجازه دهید در اینجا برویم، و شروع به داشتن برخی از سرگرم کننده ترین کمی کمی می تواند بسیار کمی می تواند انجام دهد. یک چیز را در یک زمان کار کنید. DON "T را انجام ندهید - ما زمان زیادی داریم احساسات خود را به آن، قلب خود را، آن را "جهان خود را قرار دهید. این درختان بسیار سرگرم کننده هستند. من بر روی آنها شروع کردم و زمان سختی را متوقف می کنم.
2

ماشین آلات.

این احتمالا بزرگترین چیزی است که در زندگی من اتفاق می افتد

ما سعی نمی کنیم چیزی را کپی کنیم. ما "فقط در اینجا یک تکنیک را به شما تحویل می دهیم، پس به شما اجازه می دهیم به جهان بشوید. در حال حاضر، ما می خواهیم این ابر را ببندیم. ما هیچ چیز جز درختان را در اینجا نداریم. اجازه دهید این کار را دوباره انجام دهید. از آنچه که می بینید استفاده کنید، آن را برنامه ریزی نکنید. اجازه دهید در اینجا برویم، و شروع به داشتن برخی از سرگرم کننده ترین کمی کمی می تواند بسیار کمی می تواند انجام دهد. یک چیز را در یک زمان کار کنید. DON "T را انجام ندهید - ما زمان زیادی داریم احساسات خود را به آن، قلب خود را، آن را "جهان خود را قرار دهید. این درختان بسیار سرگرم کننده هستند. من بر روی آنها شروع کردم و زمان سختی را متوقف می کنم.
3

همزیستی

تنها راهنمای قلب شماست

اجازه دهید در اینجا برویم، و شروع به داشتن برخی از سرگرم کننده حداقل کمی کمی می تواند بسیار انجام دهد. یک چیز را در یک زمان کار کنید احساسات خود را به آن، قلب خود، آن را دنیای خود قرار دهید. این درختان بسیار سرگرم کننده هستند. من بر روی آنها شروع کردم و زمان سختی را متوقف می کنم، اما ما هنوز وجود نداشت، بنابراین ما نیازی به آن نداریم نگرانی در مورد آن. اکنون اجازه دهید برخی از ابرهای کوچک را در اینجا بگذرانم. شیطان چیست؟ یک رنگ نازک به رنگ ضخیم چسبیده است. من می خواهم یک رنگ کوچک را مخلوط کنم.
4

Bellamio

تنها پیش شرط این است که شما را خوشحال می کند

دیدن. ما گوشه ای از قلم مو را می گیریم و اجازه دهید آن را به عقب و جلو بازی کند. این غیرقابل برنامه ریزی است که واقعا اتفاق می افتد. من "m نوع نرمی، من نمی توانستم Bambi را به جز یک دوربین بچرخانم. من حدس می زنم که من کمی عجیب و غریب هستم. من دوست دارم با درختان و حیوانات صحبت کنم. این همه چیز خوب است؛ من بیشتر از اکثر مردم سرگرم کننده تر هستم ما امروز با ابرها بازی می کنیم. آیا شما نمی دانید که شما قدرت زیادی دارید؟ شما می توانید کوه ها را حرکت دهید. تو میتوانی هر کاری انجام دهی. اجازه دهید در اینجا برویم، و شروع به داشتن برخی از سرگرم کننده حداقل کمی کمی می تواند بسیار انجام دهد. یک چیز را در یک زمان کار کنید احساسات خود را به آن، قلب خود را، آن را "جهان خود را قرار دهید. این درختان بسیار سرگرم کننده هستند. من بر روی آنها شروع کردم و زمان سختی را متوقف می کنم.
5

مراتع.

اجازه دهید در اینجا سرگرم کننده بروید و شروع به داشتن برخی از سرگرم کننده

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

تمرکز.

این غیرقابل برنامه ریزی است که واقعا اتفاق می افتد

اما ما هنوز به آنجا نرسیده ایم، بنابراین ما نیازی به نگرانی در مورد آن نداریم. در حال حاضر اجازه دهید برخی از ابرهای کمی خوشحال در اینجا قرار دهید. شیطان. یک رنگ نازک به یک رنگ ضخیم چسبیده است. من می خواهم یک رنگ کوچک را مخلوط کنم. ما از ون Dyke Brown، Red دائمی و کمی از آبی پروس استفاده خواهیم کرد. اجازه دهید در اینجا برویم، و شروع به داشتن برخی از سرگرم کننده ترین کمی کمی می تواند بسیار کمی می تواند انجام دهد. یک چیز را در یک زمان کار کنید. DON "T را انجام ندهید - ما زمان زیادی داریم احساسات خود را به آن، قلب خود را، آن را "جهان خود را قرار دهید. این درختان بسیار سرگرم کننده هستند. من بر روی آنها شروع کردم و زمان سختی را متوقف می کنم.

این همه است لغزنده آماده است! موفق باشید در کار

تبریک به شما دوباره در وبلاگ من. امروز در CSS، به لطف انتخابگرهای جدید، فرصتی برای ایجاد لغزنده بدون اسکریپت وجود داشت. بنابراین، در این مقاله، من به شما نشان خواهم داد که چگونه یک نوار لغزنده تطبیقی \u200b\u200bرا در CSS3 ایجاد کنم؟

طرح درس

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

علامت گذاری نوار لغزنده

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

هر کدام از شناسه های منحصر به فرد خود را دریافت می کنند و یکی به طور پیش فرض انتخاب شده است.

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

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

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

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

* {
حاشیه: 0؛
Padding: 0؛
-Webkit جعبه اندازه: Border-Box؛
-Moz جعبه اندازه: Border-Box؛
-O-Box Sizing: Border-Box؛
جعبه اندازه: Border-Box؛
}

به هر حال، * - به معنی همه انتخاب کننده ها است. این، چنین انتخابی جهانی و جهانی است.

ما ظرف را تزئین می کنیم. این بلوک خود است که شامل تمام 3 بخش مهم ما - دکمه ها، اسلاید ها و امضا ها است.

بسته بندی کردن (
ارتفاع: 350 پیکسل؛
حاشیه: 0 خودکار؛
موقعیت: نسبی؛
عرض: 600 پیکسل؛
}

عرض و ارتفاع شما می توانید نمایش دهید هر کسیبسته به اینکه چه اندازه عکس های شما برای اسلایدها باشد. من عکس ها را قبل از آن به اندازه 600 در هر 350 پیکسل برداشتم، بنابراین من این ابعاد را مشخص می کنم. حاشیه: 0 خطوط خودکار کانتینر دقیقا در مرکز صفحه، و موقعیت نسبی به شما این امکان را می دهد که بعدا دکمه ها را در ظرف قرار دهید.

ما لغزنده و اسلاید را می کشیم

در ابتدا، در اینجا چنین سبک هایی وجود دارد:

لغزنده (
پس زمینه رنگ: # 999؛
ارتفاع: به ارث برده؛
سرریز: پنهان؛
موقعیت: نسبی؛
عرض: به ارث برده؛
}

ما اشاره می کنیم نوار لغزنده همان عرض و ارتفاع، و همچنین یک ظرف معمولی است. ما همچنین رنگ و موقعیت را مشخص می کنیم، و اموال Overflow: پنهان کردن همه چیز را که به بلوک نمی افتد را کاهش می دهد.

مورد بعدی باید اسلایدها را صادر کند:

اسلایدها (
ارتفاع: به ارث برده؛
Opacity: 0؛
موقعیت: مطلق؛
عرض: به ارث برده؛
z-index: 0؛
}
.auto1 (background-image: url (bmw.jpg)؛)
.auto2 (background-image: url (audi.jpg)؛)
.auto3 (background-image: url (porshe.jpg)؛)

همچنین عرض و ارتفاع را مانند اسلاید نشان می دهد. ارزش ارثی به شما اجازه می دهد تا ارزش بلوک والدین را به ارث برده اید. با استفاده از خواص Z-index و Opacity، ما تصاویر ما را نامرئی می کنیم. در زیر ما به وضوح تصاویر پس زمینه را تجویز می کنیم.

تا کنون ما هیچ چیز را نمی بینیم، فقط یک پس زمینه خاکستری، زیرا تصاویر ما پنهان هستند.

ما دکمه های سوئیچ را تزئین می کنیم

حالا شما باید دکمه های رادیویی استاندارد را حذف کنید و به جای آن، امضا کنید.

بسته بندی\u003e ورودی (
نمایش: هیچکدام؛
}

دکمه های رادیویی را حذف می کنیم.

بسته بندی کنترول (
موقعیت: مطلق؛
حاشیه سمت چپ: -50px؛
چپ: 50٪؛
}

با کمک این سبک ها، بلوک را با دکمه های مرکز مرکز می گذاریم.

برچسب برچسب (
مکان نما: اشاره گر؛
صفحه نمایش: Inline-Block؛
ارتفاع: 25px؛
حاشیه: 10 پیکسل؛
موقعیت: نسبی؛
عرض: 25px؛
مرز: 2px جامد خاکستری؛
شعاع مرزی: 30٪ / 10PX؛
}

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

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

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

# Point1: بررسی ~ .control label: nth-of type (1)
# Point2: بررسی ~ .control label: nth-of-type (2)،
# Point3: بررسی ~ .control label: nth-of-type (3) (
سابقه و هدف: URL (wheel.png) بدون تکرار 50٪ 50٪؛
}

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

مهمترین مرحله این است که سوئیچینگ را مجبور کنید!

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

# Point1: بررسی ~ .slider\u003e .auto1،
# Point2: بررسی ~ .slider\u003e .auto2،
# point3: بررسی ~ .slider\u003e .auto3 (
Opacity: 1؛
z-index: 1؛
}

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

بنابراین، هنگام کلیک کردن بر روی دکمه اول، به ما یک ماشین BMW نشان داده شده است، هنگام کلیک کردن بر روی دوم - آئودی، هنگام کلیک کردن بر روی سوم - Porshe. و تمام این زمان هنگام تعویض، نماد فرمان در آن دکمه ظاهر می شود، اسلاید فعال است.

بنابراین، ما یک لغزنده را ساختیم. این برای انطباق آن باقی می ماند.

ما با مشاهده دستگاه های تلفن همراه، نوار لغزنده را انطباق می دهیم

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

  1. برای بلوک بسته بندی، یعنی کانتینر اصلی عرض نیست، اما حداکثر عرض: 600 پیکسل. این اجازه می دهد ظرف را کاهش دهد اگر پنجره کوچکتر عرض شود.
  2. لغزنده (کشویی) لازم است که عرض را ثبت کنید: 100٪؛
  3. Slidesh (اسلاید) چیزی را تغییر ندهید.

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

بسته بندی کردن (
حداکثر عرض: 600 پیکسل؛
}
.لغزنده (
عرض: 100٪؛
}

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

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

بر این اساس، به عرض 650 پیکسل و کمتر همه چیز به خوبی نمایش داده شد، من چنین تغییری را در سبک ها ارائه می دهم:

media صفحه نمایش و (حداکثر عرض: 650px) (
.بسته بندی کردن (
حداکثر عرض: 480 پیکسل؛
ارتفاع: 280 پیکسل؛
}
.slides (
پس زمینه اندازه: پوشش؛
}
}

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

عالی، حالا شما می توانید بررسی کنید و مطمئن شوید که با عرض کمتر از 650 پیکسل، لغزنده تبدیل شده است و به نظر می رسد خوب، بدون برش تصویر.

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

media صفحه نمایش و (حداکثر عرض: 400px) (
.بسته بندی کردن (
حداکثر عرض: 320 پیکسل؛
ارتفاع: 180 پیکسل؛
}
.slides (
پس زمینه اندازه: پوشش؛
}
}

همه ی یکسان، تنها عرض و ارتفاع ظرف را کاهش می دهند. عالی، حالا لغزنده ما کاملا سازگار است! حتی در تلفن همراه با عرض 320 پیکسل، او عالی خواهد بود. با این حال، برای خودتان ببینید:

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

هنگام انتقال، جلوه های لغزنده را اضافه کنید

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

اسلایدها (
تبدیل: چرخش (50deg)؛
انتقال: 1s؛
}

در حال حاضر یک انتخاب نسبتا انتخابی، که باعث می شود اسلاید قابل مشاهده باشد، برای ثبت نام لغو تحول:

# Point1: بررسی ~ .slider\u003e .auto1 (
تبدیل: هیچکدام؛
}

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

مکمل - چگونگی آن را به طوری که زمانی که شما بر روی اسلاید کلیک کنید، انتقال به لینک اسلاید متصل است؟

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

همانطور که می بینید، من در داخل لینک اسلاید اول و دوم قرار گرفتم. بنابراین، هنگام کلیک کردن بر روی اسلاید اول، گذار به Google هنگام کلیک کردن بر روی دوم - در Yandex رخ می دهد. من می خواهم توجه داشته باشم که لینک در همان پنجره باز می شود، یعنی صفحه فعلی با نوار لغزنده در این مورد ناپدید می شود. اگر شما نیاز به باز کردن لینک از اسلایدها در یک پنجره جدید، هر برچسب شما باید اضافه کنید هدف هدف \u003d "_blank".

اما این همه چیزی نیست که شما باید انجام دهید! در حال حاضر هنوز کار نمی کند به طوری که تصاویر تبدیل شده اند، شما باید به CSS اضافه کنید که آن چیزی است:

اسلایدها a (
نمایش: بلوک؛
عرض: 100٪؛
ارتفاع: 100٪؛
}

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

افزایش توجه شما: همه ما می خواهیم سایت های خود را در میزبانی قابل اعتماد ارسال کنیم. من صدها میزبان را تجزیه و تحلیل کردم و بهترین ها را پیدا کردم hostiq در شبکه صدها بازخورد مثبت در مورد او، میانگین امتیاز کاربر - 4.8 از 5. اجازه دهید سایت های شما خوب باشد.

مقالات مشابه