نوار لغزنده پس زمینه جی کوئری. اسلایدر جالب جی کوئری. پلاگین jQuery Slider²

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

ما می‌توانیم در برخی از این افزونه‌ها تغییراتی ایجاد کنیم و اسلایدرهای جدیدی ایجاد کنیم که بسیار مناسب‌تر با نیازهای سایت ما هستند.

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

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

اسلایدرهای تصویر جی کوئری

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

من اخیراً با این نوار لغزنده jQuery کاربردی برخورد کردم و توانستم خودم ببینم که این کار را به خوبی انجام می دهد. این شامل امکانات بی حد و حصر است که می تواند با کد منبع باز اسلایدر گسترش یابد:

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

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

PgwSlider - لغزنده پاسخگو مبتنی بر jQuery / Zepto

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

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

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

اسلایدر خبری عمودی جی کوئری

یک نوار لغزنده jQuery منعطف و مفید که برای منابع خبری با لیستی از انتشارات در سمت چپ و نمایش تصویر در سمت راست طراحی شده است:

طراحی تطبیقی؛
اخبار تغییر ستون عمودی;
هدرهای توسعه یافته

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

Wallop Slider

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

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

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

گالری پولاروید به سبک تخت

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

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

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

A-Slider

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

HiSlider - لغزنده تصویر HTML5، jQuery و WordPress

HiSlider پلاگین اسلایدر jQuery رایگان جدیدی را معرفی کرده است که با آن می توانید گالری های عکس متنوعی با انتقال های خارق العاده ایجاد کنید:

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

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

وای لغزنده

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

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

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

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

Nivo Slider - پلاگین رایگان jQuery

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

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

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

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

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

طرح پاسخگو؛
طراحی مینیمالیستی؛
اثرات مختلف ترک تحصیل و انتقال اسلاید.

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

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

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

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

نوار لغزنده jQuery پاسخگو
اندازه کامل؛
طراحی مینیمالیستی

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

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

Elastic Content Slider به طور خودکار عرض و ارتفاع را بر اساس ابعاد عنصر اصلی تنظیم می کند. این یک نوار لغزنده jQuery ساده است. این شامل یک منطقه اسلاید در بالا، و یک نوار نوار ناوبری در پایین است. نوار لغزنده عرض و ارتفاع خود را با توجه به اندازه ظرف اصلی خود تنظیم می کند.

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

طراحی تطبیقی؛
پیمایش کلیک ماوس

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

اسلایدر پشته سه بعدی رایگان

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

طراحی تطبیقی؛
تلنگر - انتقال؛
جلوه های سه بعدی

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

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

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

طراحی تطبیقی؛
انتقال تقسیم؛
نوار لغزنده تمام صفحه

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

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

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

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

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

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

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

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

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

دوربین - نوار لغزنده jQuery رایگان

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

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

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

SlidesJS، پلاگین پاسخگو jQuery

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

طراحی تطبیقی؛
انتقال CSS3.
پشتیبانی از دستگاه های لمسی؛
راه اندازی آسان.

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

اسلایدر BX Jquery

این یک نوار لغزنده jQuery پاسخگو است:

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

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

فلکس اسلایدر 2

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

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

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

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

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

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

زغال اخته - پاسخگو ساده jQuery تصویر لغزنده

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

Temdo Slider یک ابزار قدرتمند و آسان برای مدیریت برای ایجاد اسلایدرهای زیبا برای سایت شما است. ویژگی های اصلی اسلایدر:

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

اگر نیاز به ایجاد یک نوار لغزنده کلاسیک زیبا دارید (پس‌زمینه، حداکثر دو لایه گرافیکی اضافی، عنوان، زیرنویس، متن و بیش از دو دکمه در هر اسلاید)، Temdo Slider توصیه می‌شود، به خصوص اگر به اسلایدرهای تمام صفحه نیاز دارید. و ویدیو پس زمینه

ایجاد یک اسلایدر

برای ایجاد یک اسلایدر جدید، در منوی سمت چپ داشبورد وردپرس، را انتخاب کنید لغزنده > اضافه کردن اسلاید جدید:

نوع اسلاید

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

پس زمینه اسلاید

یک تصویر پس زمینه برای اسلاید انتخاب کنید. به خاطر داشته باشید که تصویر پس زمینه تا تمام عرض صفحه کشیده می شود (با حفظ نسبت تصویر). بنابراین، تصاویر با وضوح Full HD (1920 در 1080 پیکسل) توصیه می شود. اگر می خواهید لغزنده کل صفحه را در ارتفاع نگیرد، باید ارتفاع را در تنظیمات لغزنده تنظیم کنید.

تصویر همپوشانی

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

انیمیشن پس زمینه

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

بزرگنمایی مرکزی (پیش‌فرض)
از گوشه سمت چپ بالا بزرگنمایی کنید
از گوشه سمت راست بالا بزرگنمایی کنید
از گوشه سمت چپ پایین بزرگنمایی کنید
از گوشه سمت راست پایین بزرگنمایی کنید

ویدیو پس زمینه

نوار لغزنده Temdo از فرمت های ویدیویی webm، mp4 و ogg پشتیبانی می کند.

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

ویژگی های اسلاید

این بخش پارامترهای اصلی اسلاید را تنظیم می کند:

طراحی سرصفحه: می‌توانید طرحی روشن را برای استفاده در کنار پس‌زمینه تیره یا طرح تیره برای نمایش تیتر در مقابل پس‌زمینه روشن انتخاب کنید.
رنگ ناوبری: رنگی را برای فلش های راست چپ و نقاط پیمایش در پایین نوار لغزنده انتخاب کنید.
اسکرول به بخش: فلشی را نشان می دهد که با کلیک روی آن، صفحه به مکان مشخص شده حرکت می کند. نام لنگر را وارد کنید، به عنوان مثال '#contact'
Don't Show Title: اگر نمی خواهید عنوان در این اسلاید نشان داده شود، این گزینه را علامت بزنید.
سایه عنوان نشان داده نشود: نمایش سایه عنوان را برای این اسلاید غیرفعال کنید
انیمیشن گرافیکی: از بین دو افکت انیمیشن برای گرافیک اسلاید انتخاب کنید
انیمیشن محتوا: از بین دو روش متحرک عنوان، زیرنویس، متن و دکمه‌ها را انتخاب کنید.

سفارشی کردن سبک محتوای اسلاید

تنظیمات سبک محتوای متن اسلاید (عنوان، زیرنویس و متن) در گروه‌های تنظیمات مربوطه تنظیم می‌شوند:

عنوان اسلاید
زیرنویس اسلاید
متن اسلاید

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

گرافیک و گرافیک SVG

در اینجا می توانید یک عنصر گرافیکی اضافی () و همچنین گرافیک های برداری را با فرمت SVG بارگیری کنید. برای هر یک از این عناصر می توانید پیوندی تنظیم کنید که با کلیک بر روی عنصر باز شود.

دکمه های روی اسلاید

در این بخش می توانید پارامترهای یک یا دو دکمه را تنظیم کنید:

متن دکمه
ارتباط دادن
انیمیشن در حالت شناور
آیکون

اسلاید انیمیشن در اسکرول

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

ذخیره یک اسلاید

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

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

یک مثال واقعی در اینجا قابل مشاهده است:

دانلود

بخش HTML - لغزنده جالب جی کوئری

ظرف با کلاس اصلیبرای نمایش پس زمینه استفاده خواهد شد. و سپس در داخل بلوک با شناسه immersive_slider، می توانید اسلایدهای مورد نیاز خود را اضافه کنید. اگر به دکمه‌های پیمایش اسلاید نیاز ندارید، می‌توانید آن‌ها را حذف کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

بخش جی کوئری

1 2 3 4 5 6 7 8

$("#immersive_slider" ) .immersive_slider (( انیمیشن: "fade" , slideSelector: ".slide" , container: ".main" , cssBlur: false , pagination: true , autoStart: 5000 ) ;

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

انیمیشن- مقداری که نحوه تغییر اسلایدها را تعیین می کند. مقادیر "fade"، "slide" یا "bounce" را می پذیرد. و برای ایجاد تغییر عمودی اسلایدها، باید "slideUp" یا "bounceUp" را ثبت کنید.
اسلاید انتخابگر- یک انتخابگر که توسط آن بلوک های دارای اسلاید را انتخاب می کنیم.
ظرف— این ویژگی محفظه اصلی را که پس‌زمینه آن تغییر خواهد کرد، تعریف می‌کند.
cssblurیک تابع آزمایشی است. اگر نمی‌خواهید blur را تنظیم کنید، این ویژگی را تنظیم نکنید.
صفحه بندی- ناوبری را فعال می کند.
شروع خودکار- شروع خودکار نمایش اسلاید.

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

نشانه گذاری HTML

همه چیز در اینجا بسیار ساده است، فقط باید لیست UL را درست بعد از برچسب به همان ابتدا اضافه کنید بدن.

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

سبک های CSS

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

Body_slides(list-style:none; margin:0; padding:0; z-index:-2; background:#000;) .body_slides، .body_slides:after( موقعیت: ثابت؛ عرض:100%؛ ارتفاع:100% ; top:0px; left:0px;) .body_slides:after ( محتوا: ""؛ پس زمینه: url شفاف (images/pattern.png) تکرار بالا سمت چپ؛) .body_slides li( عرض:100%؛ ارتفاع:100%; موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ اندازه پس‌زمینه: جلد؛ پس‌زمینه-تکرار: هیچ؛ کدورت: 0؛ -webkit-انیمیشن: anim_slides 18s خطی بی‌نهایت 0s؛ -moz-animation: anim_slides 18s خطی بی‌نهایت 0s. -o-انیمیشن: anim_slides 18s خطی بی نهایت 0s؛ -ms-animation: anim_slides 18s خطی بی نهایت 0s؛ انیمیشن: anim_slides 18s خطی بی نهایت 0s; ) .body_slides li:nth-child(1)(background-images) 1.jpg) .body_slides li:nth-child(2)( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2.jpg) ) . body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) ) @-webkit-keyframes anim_slides ( 0% (تاری: 0;) 6% (تاری: 1;) 24% (تأت: 1;) 30% (تاری: 0;) 100% (تاری: 0;) ) @-moz-keyframes anim_slides ( 0% (Openity:0;) 6% (Openity:1;) 24% (Openity:1;) 30% (Openity:0;) 100% (Openity:0;) )

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

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

بعد ما یک عنصر شبه داریم - :بعد از، که یک لایه اضافی و الگوی نقاطی را مشخص می کند که در بالای پس زمینه قرار گرفته اند. این کار با استفاده از تصویری که مسیر آن مشخص شده است انجام می شود. images/pattern.png. اگر مسیر دیگری دارید، آن را به درستی مشخص کنید.

.body_slides li:nth-child(1)- این اولین اسلاید به ترتیب است و یک تصویر پس زمینه به آن اختصاص داده شده است. بعد فرزند nام (2) می آید، علاوه بر تصویر، زمان نیز به آن داده می شود و برابر با 6 ثانیه است. یعنی 6 ثانیه بعد از اولین اسلاید ظاهر می شود. بعد، nth-child(3)، در شش ثانیه دیگر ظاهر می شود، بنابراین زمان آن 12 ثانیه است. اگر نیاز به اضافه کردن اسلاید چهارم دارید، سپس nth-child(4) را اضافه کنید و زمان آن باید 18 ثانیه باشد. من فکر می کنم این واضح است.

بعد، باید کل زمان انیمیشن را مشخص کنید، اکنون تنظیم شده است body_slides liو برابر با 18 ثانیه اگر 4 اسلاید اضافه کنید برابر با 24 و به همین ترتیب می شود. اگر با ریاضیات دوست هستید، باید کنار بیایید، نکته اصلی این است که اشتباه نکنید، زیرا لغزنده دقیقاً کار نخواهد کرد. در صورت تمایل می توانید با تجویز زمان مناسب سرعت خود را افزایش یا کاهش دهید.

فریم های کلیدی anim_slidesظهور و ناپدید شدن اسلاید است. در ابتدا، اسلاید شفاف است و شرط روی آن تنظیم می شود - کدورت: 0;. وقتی نوبت هر یک از اسلایدها می رسد ابتدا ظاهر می شود و سپس دوباره شروع به شفاف شدن می کند و کاملاً ناپدید می شود و یک اسلاید جدید به جای آن ظاهر می شود. اگر می خواهید سرعت ظاهر یا ناپدید شدن را تغییر دهید، درصد را تغییر دهید - این درصد کل زمان است.

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

همین، از توجه شما متشکرم. 🙂