لطفا به من بگویید که آیا امکان ساخت اسلایدر وجود دارد تصویر پس زمینهبا استفاده از نوار لغزنده نرم و صاف؟
گوگل کمکی نمی کند (اسناد می گوید که تصاویر باید در یک بلوک 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; ) a, a:sover, button, button:hover, .anime ( -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; -webkit- F_COL_C-START_I-CENTER (نمایشگر: flex؛ flex-flo w: ستون نوآپ. justify-content: flex-start; align-اقلام: مرکز; ) .F_ROW_C-START_I-CENTER (نمایش: انعطاف‌پذیر؛ جریان انعطاف‌پذیر: ردیف جدید؛ توجیه محتوای: flex-start؛ تراز کردن آیتم‌ها: مرکز؛ ) .F_ROW_C-S-B_I-F-S (نمایش: انعطاف‌پذیر؛ فلکس جریان : ردیف نواپ؛ justify-content: space-been; align-اقلام: flex-start؛ ).F_ROW_C-START_I-STRETCH (نمایش: flex; flex-flow: row nowrap; justify-content: flex-start; align-اقلام : stretch؛ ) بدنه (پس زمینه-رنگ: #fff; رنگ: #413d4b؛ فونت-خانواده:"Roboto"، sans-serif؛ اندازه قلم: 0.87vmax؛ ارتفاع خط: 1.37vmax؛ ) .wrap (عرض: 58.75vw؛ حاشیه: 0 خودکار؛ موقعیت: نسبی؛ ) هدر (عرض: 100٪؛ ارتفاع: 100 ولت؛ تصویر پس‌زمینه: خطی-gradient (45 درجه، rgba (9، 5، 47، 0.85) 0٪، rgba( 49, 29, 94, 0.85)), url(../img/bg_header.jpg)؛ پس‌زمینه-تکرار: بدون تکرار؛ اندازه پس‌زمینه: پوشش؛ موقعیت پس‌زمینه: مرکز؛ سرریز: پنهان؛ ) #top_header (نمایش: flex؛ flex-flow: row nowrap؛ justify-content: space-between؛ align-اقلام: مرکز؛ margin-top: 3.2vh؛ ) #logo svg( height: 3vw; ) #top_header nav ul (نمایش: flex; flex-flow: row nowrap; ) nav li (لیست-سبک: هیچ، تبدیل متن: بزرگ، رنگ: #fff؛ فونت-خانواده: "Roboto Black"، sans-serif; حاشیه سمت چپ: 1.25vw; ) nav a (تزیین متن: هیچکدام ؛ وزن فونت: پررنگ؛ رنگ: #fff؛ ) a:hover (رنگ: #00e0d0; ) #هدر_محتوا (حاشیه بالای: 24.4 ولت ساعت؛ ) #هدر_محتوای h2(فونت-خانواده: "Playfair Display", سریف؛ رنگ : #fff؛ اندازه قلم: 2vw؛ تراز متن: مرکز؛ ) hr (حاشیه: هیچ؛ عرض: 3. 12vw; ارتفاع: 1px; پس زمینه رنگ: #00e0d0; رنگ: #00e0d0; margin-top: 3.8vh; ) #header_content p (عرض: 48.6vw؛ رنگ: #fff؛ ارتفاع خط: 3.5vh؛ تراز متن: مرکز؛ حاشیه بالا: 4.17vh؛ ) .btn ( padding: 0.8vw 1.5vw؛ font-family: "Hammersmith One"، sans-serif؛ اندازه قلم: 1vw؛ رنگ: #00e0d0؛ تبدیل متن: بزرگ؛ حاشیه: 1px جامد #00e0d0؛ رنگ پس‌زمینه: شفاف؛ شعاع حاشیه: 2px؛ حاشیه بالا: 7.3 vh; ) .btn:hover ( رنگ: #fff؛ حاشیه: 1px جامد #fff؛ ) #dot_nav(عرض: 3.43vw؛ نمایش: flex؛ flex-flow: row nowrap؛ justify-content: space-between; align- موارد: flex-start؛ margin-top: 18.9vh;) .circle_nav (عرض: 0.62vw؛ ارتفاع: 0.62vw؛ حاشیه: 2px جامد #bab9bc؛ پس‌زمینه رنگ: شفاف؛ حاشیه-شعاع: 0.62vw؛ ) .circle_nav :hover (حاشیه: 2px جامد #00e0d0؛ پس‌زمینه رنگ: #00e0d0؛ ) <a href="https://bar812.ru/fa/gotovye-shablony-landing-page-deti-shablony-landing-page-curbitcy-elementor-wordpress.html">صفحه فرود</a>

ما آژانس خلاق عالی هستیم

این نسخه فتوشاپ Lorem Ipsum است. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin، lorem quis bibendum auctor، nisi elit consequat ipsum، nec sagittis sem nibh id elit. Morbi accumsan ipsum velit.

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

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

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

روندهای اخیر مانند طراحی تطبیقی، برای پروژه های وب بسیار مهم هستند، چه در حال پیاده سازی یک پلاگین یا یک اسکریپت باشید. همه این عناصر هر یک از این افزونه ها را بسیار انعطاف پذیر می کند. هر چیزی که در سال 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 برای انیمیشن اسلاید ( شتاب سخت افزاری);
  • API پاسخ به تماس هاو روش های کاملا عمومی
  • اندازه فایل کوچک؛
  • آسان برای پیاده سازی.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. پلاگین "JSliderNews"

5. لغزنده جی کوئری CSS3

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

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

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

7. jQuery Parallax Slider Plugin

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

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

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

9. jQuery Image Slider Plugin "slideJS"

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

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

آسان به با استفاده از jQueryافزونه نمایش اسلاید.

11. پلاگین "jQuery Slides"

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

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

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

13. jQuery Nivo Slider

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

14. jQuery Mobile Slider

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

15. پلاگین jQuery Slider²

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

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

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

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

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

19. jQuery "jShowOff" لغزنده

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

20. افزونه نمونه کارها اثر شاتر

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

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

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

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

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

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

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

24. گالری تصاویر کوچک کیت اسلایدر

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

25. jQuery Content Slider “Slider Kit”

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

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

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

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

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

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

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

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

30. jQuery Skitter Slideshow عالی

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

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

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

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

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

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

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

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

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

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

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

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

38. jQuery Sudo Slider

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

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

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

40. jQuery Flux Slider

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

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

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

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

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

2. اسلایدر در Glide.js

این اسلایدر برای هر سایتی مناسب است. از Glide.js منبع باز استفاده می کند. رنگ های لغزنده را می توان به راحتی تغییر داد.

3. نمایش اسلاید محتوا کج شده

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

4. اسلایدر با استفاده از بوم HTML5

نوار لغزنده بسیار زیبا و چشمگیر با ذرات تعاملی. ساخته شده با بوم HTML5

5. لغزنده شکل‌گیری تصویر

لغزنده با جلوه شکل‌گیری (تغییر صاف از یک شی به شی دیگر). AT این مثالنوار لغزنده برای نمونه کارها یک توسعه دهنده وب یا یک استودیوی وب در قالب یک نمونه کار مناسب است.

6. لغزنده دایره ای

اسلایدر به شکل دایره با افکت چرخاندن تصویر.

7. نوار لغزنده پس زمینه تار

نوار لغزنده پاسخگو با سوئیچینگ و تاری پس زمینه.

8. نوار لغزنده مد پاسخگو

نوار لغزنده وب سایت ساده، سبک و واکنش گرا.

9. Slicebox - لغزنده تصویر سه بعدی jQuery(به روز شده)

نسخه به روز شده نوار لغزنده Slicebox با اصلاحات و ویژگی های جدید.

10. شبکه تصویر پاسخگو متحرک رایگان

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

11. لغزنده فلکس

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

12. قاب عکس

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

P.S.اسلایدر رو چندین بار گذاشتم و فکر می کنم یکی از بهترین هاست

13. نوار لغزنده گالری تصاویر بند انگشتی سه بعدی رایگان و پاسخگو.

گالری اسلایدر تجربی 3DPanelLayoutبا مش و جلوه های جالبتصاوير متحرك.

14. اسلایدر در css3

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

15. لغزنده WOW

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

17. الاستیک

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

18. شکاف

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

19. گالری عکس واکنشگرا به علاوه

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

20. نوار لغزنده پاسخگو برای وردپرس

نوار لغزنده رایگان پاسخگو برای WP.

21. لغزنده محتوای Parallax

اسلایدر با افکت اختلاف منظر و کنترل هر عنصر با CSS3.

22. لغزنده با صحافی موسیقی

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

23. اسلایدر با jmpress.js

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

24. نمایش اسلاید شناور سریع

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

25. آکاردئون تصویر با CSS3

آکاردئون تصویر با css3.

26. یک پلاگین گالری بهینه شده با لمس

این یک گالری پاسخگو است که برای دستگاه های لمسی بهینه شده است.

27. گالری سه بعدی

گالری دیواری سه بعدی- ایجاد شده برای مرورگر سافاری، که در آن افکت سه بعدی قابل مشاهده خواهد بود. هنگامی که در یک مرورگر دیگر مشاهده می شود، عملکرد خوب خواهد بود، اما جلوه سه بعدی قابل مشاهده نخواهد بود.

28. لغزنده با صفحه بندی

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

29. Image Montage با jQuery

چیدمان خودکار تصاویر بسته به عرض صفحه. یک چیز بسیار مفید هنگام توسعه یک سایت نمونه کارها.

30. گالری سه بعدی

یک نوار لغزنده دایره ای سه بعدی ساده در css3 و jQuery.

31. حالت تمام صفحهبا افکت سه بعدی روی css3 و jQuery

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

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

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

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

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

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

نوع اسلاید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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