> >

سبک های لغزنده

به لطف دکمه ها جای خود را خواهند گرفت موقعیت یابی مطلقنسبت به container.slider-box

Slider-box( موقعیت : نسبی ؛ عرض : 320 پیکسل ؛ ارتفاع : 210 پیکسل ؛ سرریز : پنهان ؛ ) . لغزنده ( موقعیت : نسبی ؛ عرض : 10000 پیکسل ؛ ارتفاع : 210 پیکسل ؛ ) . لغزنده img ( float : چپ . .prev , .slider-box .next( position : absolute ; top : 100px ; display : block , عرض : 29 px , height : 29 px ; cursor : pointer ; ) .slider-box .prev( چپ : 10px ; پس زمینه : . ...

اسکریپت

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

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

$(function () ( var slider = $(.slider" ) , sliderContent = slider.html () , // محتوای اسلایدر slideWidth = $(".slider-box") .outerWidth() , // عرض لغزنده slideCount = $(".slider img") .length, // تعداد اسلاید prev = $(".slider-box .prev") , // دکمه برگشت بعدی = $(".slider-box .next") , // دکمه Forward sliderInterval = 3300 // فاصله زمانی برای تغییر اسلایدها animateTime = 1000 // زمان تغییر اسلایدهادوره = 1 // جهت حرکت لغزنده (1 یا -1)حاشیه = - slideWidth; // افست اولیه اسلایدها$(".slider img:last" ) .clone () .prependTo (."slider" ) ; // یک کپی از آخرین اسلاید در ابتدا قرار داده شده است.$(".slider img") .eq (1) .clone () .appendTo (."slider" ) ; // یک کپی از اسلاید اول در انتها قرار داده شده است.$(.slider" ) .css ("margin-left" , - slideWidth) ; // Container.slider به اندازه عرض یک اسلاید به سمت چپ منتقل می شود.تابع nextSlide() ( // تابع animation() را برای انجام انتقال اسلاید اجرا می کند. interval = window.setInterval (animate, sliderInterval) ; ) تابع animate() (if (margin==- slideCount* slideWidth- slideWidth) ( // اگر نوار لغزنده به پایان رسیده باشد slider.css (( "marginLeft" :- slideWidth) ); // سپس block.slider به موقعیت اولیه خود باز می گردد margin=- slideWidth* 2 ; ) else if (حاشیه== 0 && دوره==- 1 ) ( // اگر نوار لغزنده در ابتدا باشد و دکمه برگشت فشار داده شود slider.css (( "marginLeft" :- slideWidth* slideCount) ; // سپس block.slider به موقعیت نهایی حرکت می کند margin=- slideWidth* slideCount+ slideWidth; ) دیگر ( // در صورت عدم موفقیت شرایط فوق، margin = margin - slideWidth* (course) ; // مقدار حاشیه برای نمایش اسلاید بعدی تنظیم شده است) slider.animate (( "marginLeft" : margin) , animateTime) ; // Block.slider یک اسلاید به سمت چپ حرکت می کند.) تابع SliderStop() ( // تابع توقف نوار لغزنده window.clearInterval(interval); )prev.click(function()( // دکمه برگشت فشار داده شده است var course2 = دوره; دوره = - 1 ; animate() ; // تابع animate() را فراخوانی کنیددوره = course2 ; )) ؛ next.click(function()( // دکمه برگشت فشار داده شده است if (slider.is (":animated" ) ) ( false ; ) // اگر هیچ انیمیشنی رخ نداد var course2 = دوره; // متغیر موقت برای ذخیره مقدار courseدوره = 1 ; // جهت لغزنده را از راست به چپ تنظیم کنید animate() ; // تابع animate() را فراخوانی کنیددوره = course2 ; // متغیر course به مقدار اولیه خود باز می گردد)) ؛ slider.add(next) .add(prev) .hover(function()( // اگر نشانگر ماوس در داخل نوار لغزنده باشد sliderStop(); // تابع ()sliderStop برای مکث کردن نوار لغزنده فراخوانی می شود) ، nextSlide)؛ // هنگامی که مکان نما از نوار لغزنده خارج می شود، انیمیشن از سر گرفته می شود. nextSlide() ; // تابع nextSlide() را فراخوانی کنید } ) ;

چنین لغزنده ای با دکمه های "به جلو" و "پشت" معلوم شد

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

به 20 اسلایدر جی کوئری از Envato Market نگاهی بیندازید و خواهید دید که اسلایدرهایی وجود دارند که چیزی بیش از یک بلوک لغزنده هستند.

1. رویال اسلایدر - گالری تصاویر صفحه لمسی با جی کوئری

اکنون یک نوار لغزنده پاسخگو که با صفحه نمایش لمسی نیز سازگار است، بسیار بیشتر از گذشته است. RoyalSlider هر دو ویژگی را ترکیب می کند: سازگاری و کار با صفحه نمایش لمسی. انتخاب خوبی است زیرا گالری در HTML5 و CSS3 نوشته شده است.

چند ویژگی جالب:

چگونه خودتان یک وب سایت ایجاد کنید؟

بهینه سازی سئو

قابلیت سفارشی سازی بالا

بیش از 10 قالب شروع

یک بازگشت برای انتقال CSS3 وجود دارد

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

2. Slider Revolution پاسخگو پلاگین jQuery

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

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

جلوه اختلاف منظر و انیمیشن سفارشی

لایه ها و اسلایدهای نامحدود با پیوند

آماده برای استفاده، سبک های عمیقا قابل تنظیم

و خیلی بیشتر

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

3. پلاگین کشویی jQuery پاسخگو LayerSlider

عنوان "LayerSlider Responsive jQuery Slider Plugin" واقعاً حق این نوار لغزنده را ندارد.
200+ انتقال اسلاید 2 بعدی و 3 بعدی سر هر کسی را برمی گرداند.

چند ویژگی قابل توجه:

13 پوسته و 3 نوع منو

امکان قرار دادن یک تصویر ثابت در بالای اسلایدر

و jQuery بازگشتی

و خیلی بیشتر

مانند نوار لغزنده قبلی، تقریباً هر محتوایی را می توان اضافه کرد، حتی محتوای چند رسانه ای ساکن HTML5. LayerSlider اسلایدرها را زنده می کند و همچنین بسیار زیبا است.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow یک نوار لغزنده بسیار ساده است که هیچ یک از عملکردهای اصلی را قربانی نمی کند.

توانایی ها:

نکات ابزار، درج متن و غیره

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

تایمر با تاخیر برای یک لغزنده یا برای همه

انتقال های متعدد برای همه اسلایدها یا انتقال های مختلف برای هر یک به صورت جداگانه

jQuery Banner Rotator / Slideshow در مقایسه با سایر اسلایدرهای جی کوئری فقط ویژگی های اساسی دارد، اما نباید آن را فراموش کنید.

5. All In One Slider - پلاگین لغزان پاسخگو jQuery

هر نوار لغزنده ای که در وب ظاهر می شود دید منحصر به فرد خود را دارد و هر مشکلی را در زمینه خود حل می کند. اما این یکی نیست. All In One Slider را می توان "همه شامل" نامید.

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

چرخاننده بنر

پیش نمایش بنر

بنر لیست پخش

لغزنده محتوا

چرخ فلک

همه انواع لغزنده اکثر، اگر نه همه، عملکردهای مورد نیاز اسلایدرهای جی کوئری را پشتیبانی می کنند. آیا All In One Slider همه چیز شما خواهد بود؟

6. UnoSlider - نوار لغزنده صفحه لمسی پاسخگو

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

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

پشتیبانی از تم

12 تم از پیش ساخته شده

40 انتقال

پشتیبانی از IE6+

همه ویژگی ها با تمرکز بر طراحی و سبک، UnoSlider را به یک اسلایدر محتوای عالی با قابلیت اضافه کردن تم تبدیل می کند.

7. Master Slider - لغزنده صفحه لمسی jQuery

به دنبال "یک نوار لغزنده جی کوئری برای کنترل همه آنها" هستید؟ Master Slider – لغزنده صفحه لمسی jQuery را برای اندازه های مختلف صفحه امتحان کنید…

وقتی صحبت از طراحی خوب می شود، این نمونه یکی از بهترین هاست:

بیش از 25 قالب

انتقال شتاب سخت افزاری

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

و خیلی بیشتر

انتقال های تعاملی، لایه های متحرک و هات اسپات قطعا توجه شما را جلب خواهد کرد. Master Slider یک اثر هنری است.

8. TouchCarousel - پیمایش و نوار لغزنده محتوای jQuery

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

اگر نام حاوی کلمه "touch" باشد، می توانید حدس بزنید که نوار لغزنده کاملاً پاسخگو است و از لمس پشتیبانی می کند. ویژگی های دیگر:

بهینه سازی سئو

پخش خودکار هوشمند

انتقال سخت افزار CSS3 تسریع شد

رابط کاربری قابل تنظیم و 4 پوسته برای فتوشاپ

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

9. اسلایدر پیشرفته - لغزنده jQuery XML

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

با نشانه گذاری HTML یا XML، این نوار لغزنده پیشرفته تاثیر ماندگاری ایجاد می کند:

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

100+ انتقال و 150+ ویژگی سفارشی

15 پوسته لغزنده، 7 پوسته اسکرول و پشتیبانی از لایت باکس بومی

ناوبری صفحه کلید، پشتیبانی لمسی و سفارشی سازی کامل

و خیلی بیشتر

با این حال، بیشترین بهترین ویژگیاین اسلایدر پیشرفته - jQuery XML Slider API است که اسلایدر را به انتخاب عالی برای برنامه وب شما تبدیل می کند.

10. jQuery Slider Zoom In/Out Effect کاملاً پاسخگو

یکی از آن اسلایدرهای جی کوئری است که قبل از شروع خواندن در مورد ویژگی های آن، شما را به تماشای یک نسخه نمایشی وادار می کند. شما فقط می خواهید بفهمید که این "اثر بزرگنمایی/کوچک کردن" به چه معناست.

جلوه زوم نسبتاً ضعیف است، اما حس کنترل و لمس واقعی را به تصویر اضافه می کند در حالی که بقیه نوار لغزنده ثابت است. ویژگی های اسلایدر:

انتقال لایه CSS3

گزینه پایان انیمیشن برای لایه ها

گزینه های پهنای ثابت، تمام صفحه و پهنای کامل

متن متحرک با قالب بندی HTML و CSS

اکثر اسلایدرها سعی می‌کنند تا حد امکان افکت‌ها را در خود جای دهند، و jQuery Slider Zoom In/Out Effect Fully Responsive فقط دارای افکت Ken Burns است، اما به خوبی پیاده‌سازی شده است.

11. jQuery Carousel Evolution

مانند اسلایدر پیشرفته فوق - jQuery XML Slider، jQuery Carousel Evolution دارای API مخصوص به خود است که می تواند برای بهبود عملکرد یا ادغام اسلایدر در پروژه دیگری استفاده شود.

چگونه خودتان یک وب سایت ایجاد کنید؟

چه فناوری ها و دانشی امروزه برای ایجاد وب سایت به تنهایی مورد نیاز است؟ فشرده یاد بگیرید!

با تصاویر، نشانه گذاری HTML، ویدیوهای YouTube و Vimeo، همچنین می توانید:

بهینه سازی سئو

9 سبک چرخ فلک

جلوه های سایه و بازتاب

اندازه تصویر را می توان در جلو و عقب تنظیم کرد

jQuery Carousel Evolution یک چرخ فلک ساده با کاربردهای فراوان است.

12 لغزنده سکسی

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

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

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

شرح تصاویر

پخش مداوم اسلاید

6 افکت انتقال

Sexy Slider منتظر شماست تا قدرت کامل خود را باز کنید و پتانسیل آن را آزاد کنید.

13. jQuery Image & Content Scroler w/ Lightbox

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

jQuery Image & Content Scroller w/ Lightbox از ورودی صفحه کلید و چرخ ماوس در میان سایر ویژگی ها پشتیبانی می کند:

جهت افقی و عمودی

زیرنویس متن در داخل یا خارج از نوار لغزنده

امکان تنظیم تعداد معینی از اسلایدهای قابل مشاهده در یک زمان

تصاویر درون خطی، فلش، آی فریم، آژاکس و محتوای درون خطی

این نوار لغزنده دارای یک لایت باکس داخلی نیز می باشد. در صورت اختیاری، در jQuery Image & Content Scroller w/ Lightbox، نمی‌توانید خود نوار لغزنده را راه‌اندازی کنید، اما لایت باکس را جداگانه اجرا کنید.

14. شفاف - روتاتور / لغزنده بنر پاسخگو

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

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

6 سبک های متفاوت

4 افکت انتقال

2 انتقال کش رفتن

دکمه ها و برچسب های قابل تنظیم

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

15. FSS - پلاگین وب سایت کشویی تمام صفحه

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

در واقع با کمک jQuery داده شده استایجاد یک سایت کشویی تمام صفحه بسیار آسان است. توانایی ها:

پشتیبانی از AJAX

نوارچرخ

پشتیبانی از فناوری پیوند عمیق

2 افکت انتقال مختلف

توجه به پشتیبانی از صفحه کلید و راهنمای 11 صفحه ای نیز ارزش دارد. با این حال، تصور واقعی وزن FSS است، تنها 5 کیلوبایت.

16. Zozo Accordion - لغزنده صفحه لمسی پاسخگو

نمونه دیگری از نوار لغزنده jQuery متمرکز بر سبک که کار را به خوبی انجام می دهد. آکاردئون Zozo برای هر کسی که به دنبال یک لغزنده آکاردئونی خوب با قابلیت تغییر سبک است، ضروری است.

این زیبایی انیمیشن CSS3 همچنین دارای طیف گسترده ای از ویژگی ها است:

آکاردئون افقی و عمودی

HTML5 معنایی و بهینه سازی سئو

پشتیبانی از لمس، صفحه کلید و WAI-ARIA

بیش از 10 پوسته و 6 طرح بندی

و خیلی بیشتر

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

17.jQuery پلاگین کشویی OneByOne پاسخگو

jQuery Responsive OneByOne Slider Plugin بیشتر شبیه است انیمیشن ساده، روی نوار لغزنده نیست. به جای نمایش یک اسلاید در یک زمان، این نمونه به صورت تدریجی صفحه را با اسلایدها پر می کند تا جایی که قبل از رفتن به اسلاید بعدی جایی در آن منطقه باقی نماند.

انیمیشن CSS3 از داخل Animate.css کار می کند، سبک وزن است، چندین لایه دارد و سازگار با موبایل است. ویژگی های متعدد:

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

18. آکاردئونزا - پلاگین جی کوئری

هیچ اسلایدر جی کوئری ساده تر از این وجود ندارد. برای کار کردن فقط 3 کیلوبایت نوار لغزنده نیاز دارد و آکاردئونزا را به سبک ترین لغزنده نوع آکاردئونی تبدیل می کند.

اگر سه گزینه سبک را دوست ندارید، می توانید HTML و CSS را خودتان تغییر دهید. توانایی ها:

ناوبری صفحه کلید

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

تکنیک بهبود پیشرو - بدون جاوا اسکریپت کار می کند

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

19. mightySlider - لغزنده چند منظوره پاسخگو

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

در زیر کاپوت گزینه های زیادی پیدا خواهید کرد:

پشتیبانی از صفحه کلید، ماوس و لمسی

انتقال سخت افزار CSS3 تسریع شد

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

اسلایدهای نامحدود، لایه‌های زیرنویس و افکت‌ها

API بسیار قدرتمند و سازگار با برنامه‌نویس است که باز می‌شود راه های مختلفاستفاده از آن MightySlider یک نوار لغزنده پیشرونده جی کوئری با کدهای تمیز و خوب است.

20. Parallax Slider - پلاگین پاسخگو jQuery

Parallax Slider مانند jQuery Responsive OneByOne Slider Plugin کار می کند و به شما امکان می دهد هر لایه را به طور جداگانه در همان اسلاید متحرک کنید. با افزودن انیمیشن اختلاف منظر می توانید تمام اسلایدها یا حتی یک اسلاید را متحرک کنید.

همراه با 4 نوار لغزنده انواع متفاوت، همه با اثر اختلاف منظر. مانند سایر اسلایدرهای jQuery دارای:

قابلیت شخصی سازی کامل

پشتیبانی را لمس کنید

لایه های کاملاً پاسخگو و نامحدود

پخش خودکار، حلقه زدن، تنظیم ارتفاع و عرض و تایمر

لایه های متحرک فقط متن یا تصویر نیستند. همچنین می توانید ویدیوهای YouTube، Vimeo و HTML5 را اضافه کنید. Parallax Slider - یکی دیگر مثال خوبچگونه می توانید جلوه های فلش را حتی بهتر از خود فلش که در همه دستگاه ها نیز پشتیبانی می شود شبیه سازی کنید.

نتیجه

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

اگر هیچ یک از اسلایدرهای این لیست را دوست ندارید، همیشه می توانید آموزش کد jQuery را در Envato دنبال کنید و چیزی کاملا جدید و منحصر به فرد ایجاد کنید.

یا سایر لغزنده های موجود در بازار Envato را برای انتخاب بررسی کنید. اسلایدر jQuery مورد علاقه شما چیست و چرا؟