مجموعه ای از لغزنده های تطبیقی یک نوار لغزنده جالب در پلاگین جی کوئری جی کوئری “Scale Carousel”

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

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

2. پلاگین جی کوئری “Scale Carousel”

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

3. پلاگین جی کوئری “slideJS”

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

4. پلاگین "JSliderNews"

5. نوار لغزنده CSS3 jQuery

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

6. نوار لغزنده زیبای jQuery "Presentation Cycle".

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

7. پلاگین جی کوئری "Parallax Slider"

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

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

در صفحه نمایشی در بخش «نمونه‌ها» می‌توانید پیوندهایی به همه پیدا کنید گزینه های ممکنبا استفاده از این افزونه

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

یک نوار لغزنده شیک jQuery مطمئناً می تواند پروژه شما را تزئین کند.

10. پلاگین نمایش اسلاید جی کوئری "Easy Slides" نسخه 1.1

یک پلاگین jQuery آسان برای ایجاد نمایش اسلاید.

11. پلاگین jQuery Slidy

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

12. گالری jQuery CSS با تغییر خودکار اسلاید

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

13. نوار لغزنده jQuery "Nivo Slider"

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

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

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

15. پلاگین jQuery "Slider²"

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

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

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

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

نوار لغزنده تصویر jQuery CSS با استفاده از پلاگین NivoSlider.

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

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

20. افزونه “Shutter Effect Portfolio”.

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

21. نوار لغزنده سبک جاوا اسکریپت CSS "TinySlider 2"

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

22. لغزنده عالی "Tinycircleslider"

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

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

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

24. گالری با مینیاتور "Slider Kit"

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

25. نوار لغزنده محتوای jQuery "Slider Kit"

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

26. نمایش اسلاید جی کوئری “Slider Kit”

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

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

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

نمایش اسلاید جی کوئری با ریز عکسها.

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

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

30. نمایش اسلاید عالی جی کوئری "Skitter".

پلاگین jQuery Skitter برای ایجاد نمایش اسلاید خیره کننده. این افزونه از 22 (!) نوع جلوه های مختلف انیمیشن هنگام تغییر تصاویر پشتیبانی می کند. می تواند با دو گزینه پیمایش اسلاید کار کند: استفاده از اعداد اسلاید و استفاده از ریز عکسها. حتماً نسخه ی نمایشی را تماشا کنید، یک پیدا با کیفیت بسیار بالا. فن آوری های مورد استفاده: CSS، HTML، jQuery، PHP.

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

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

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

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

34. نوار لغزنده "Flux Slider" با استفاده از jQuery و CSS3

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

35. پلاگین جی کوئری “jSwitch”

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

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

37. نسخه جدید افزونه “SlideDeck 1.2.2”

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

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

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

39. نمایش اسلاید جی کوئری CSS3

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

40. نوار لغزنده jQuery "Flux Slider"

نوار لغزنده با بسیاری از جلوه های تغییر تصویر.

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

نوار لغزنده تصویر شیک با استفاده از jQuery.

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

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

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

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

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

نوع اسلاید

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

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

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

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

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

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

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

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

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

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

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

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

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

• طراحی سرصفحه: می‌توانید طرحی روشن را با پس‌زمینه تیره یا طرح تیره را برای تضاد هدر با پس‌زمینه روشن انتخاب کنید.
• رنگ ناوبری: رنگی را برای فلش های چپ به راست و نقاط پیمایش در پایین نوار لغزنده انتخاب کنید
• پیمایش به یک بخش: فلشی را نشان می دهد که با کلیک کردن، صفحه را به مکان مشخص شده پیمایش می کند. یک نام برای لنگر وارد کنید، به عنوان مثال "#contact"
• Do not show title: اگر نمی خواهید عنوان در این اسلاید نمایش داده شود، این گزینه را فعال کنید.
• سایه عنوان نشان داده نشود: سایه عنوان را برای این اسلاید خاموش کنید.
• انیمیشن گرافیکی: از بین دو افکت انیمیشن برای گرافیک اسلاید خود انتخاب کنید
• انیمیشن محتوا: از بین دو روش متحرک عنوان، زیرنویس، متن و دکمه‌های خود را انتخاب کنید.

تنظیم سبک محتوای اسلاید

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

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

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

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

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

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

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

• متن دکمه
• پیوند
• انیمیشن شناور
• نماد

اسلاید انیمیشن هنگام پیمایش

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

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

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

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

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

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

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

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

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

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

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

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

PgwSlider - نوار لغزنده پاسخگو بر اساس JQuery / Zepto

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

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

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

اسلایدر خبری عمودی Jquery

یک نوار لغزنده انعطاف پذیر و مفید 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 ساده است. این شامل یک منطقه اسلاید در بالا، و یک نوار نوار ناوبری در پایین است. نوار لغزنده عرض و ارتفاع خود را با توجه به ابعاد ظرف اصلی تنظیم می کند.

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

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

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

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

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

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

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

اسلایدر تمام صفحه بر اساس JQuery و CSS3 + آموزش

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اسلایدر BX Jquery

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

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

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

FlexSlider 2

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

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

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

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

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

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

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

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

لطفا به من بگویید، آیا می توان با استفاده از اسلایدر اسلایدر تصویر پس زمینه ساخت؟
گوگل کمکی نمی کند (اسناد می گوید که تصاویر باید در یک بلوک div قرار گیرند. اما در مورد تصاویر پس زمینه چطور؟

@charset utf-8; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, abbr, مخفف, آدرس,big,cite,code,del,dfn, em,font,img,ins,kbd,q,s,samp,small, strike, قوی,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li, مجموعه فیلد، فرم، برچسب، افسانه، جدول، عنوان، tbody،tfoot،thead،tr،th،td(پس‌زمینه: هیچکدام تکرار پیمایش 0 0 شفاف؛ حاشیه: 0 هیچ؛ اندازه فونت: 100%؛ طرح کلی: 0 هیچ. تراز عمودی: خط مبنا؛ حاشیه: 0؛ بالشتک: 0؛) جدول (حاشیه جمع کردن: جمع کردن؛ فاصله مرز: 0؛) آدرس، مقاله، کنار، بوم، جزئیات، عنوان شکل، شکل، پاورقی، سرصفحه، hgroup، nav، بخش، خلاصه (نمایش: بلوک؛) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; انتقال: همه 200 میلی‌ثانیه خطی؛ همه 200 میلی‌ثانیه خطی: نشانگر. 12vw;

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

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

دانلود کنید

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

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

بخش جی کوئری

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

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