اگر نیاز دارید یک اسلایدر تصویر جی کوئری با کیفیت بالا به سایت خود اضافه کنید، در این مقاله توضیحاتی در مورد پلاگین های لازم را خواهید یافت. با وجود اینکه JQuery کار با جاوا اسکریپت را بسیار آسان کرده است، ما همچنان به پلاگین هایی برای سرعت بخشیدن به فرآیند طراحی وب نیاز داریم.
ما می توانیم در برخی از این افزونه ها تغییراتی ایجاد کنیم و اسلایدرهای جدیدی ایجاد کنیم که برای اهداف سایت ما بسیار مناسب تر هستند.
برای سایر لغزنده ها، شما به سادگی عناوین، تصاویر را اضافه کرده و افکت های انتقال اسلاید را که همراه با نوار لغزنده ارائه می شود، انتخاب کنید. همه این افزونه ها با مستندات دقیق همراه هستند، بنابراین افزودن افکت ها یا عملکردهای جدید به آنها کار سختی نخواهد بود. اگر برنامه نویس باتجربه ای در JQuery هستید، حتی می توانید محرک های مبتنی بر رویداد را تغییر دهید.
آخرین روندها مانند طراحی ریسپانسیو برای پروژه های وب بسیار مهم هستند، چه در حال پیاده سازی یک پلاگین یا یک اسکریپت باشید. همه این عناصر هر یک از این افزونه ها را بسیار انعطاف پذیر می کند. هر چیزی که در سال 2014 منتشر شد در این لیست گنجانده شده است.
لغزنده های تصویر JQuery Jssor Slider پاسخگومن اخیراً با این اسلایدر قدرتمند جی کوئری روبرو شدم و توانستم از نزدیک ببینم که کار خود را به خوبی انجام می دهد. این شامل امکانات بی حد و حصری است که می تواند از طریق کد منبع باز اسلایدر گسترش یابد:
- طراحی تطبیقی؛
- بیش از 15 گزینه سفارشی سازی؛
- بیش از 15 افکت تغییر تصویر.
- گالری تصاویر، چرخ فلک، پشتیبانی از اندازه تمام صفحه؛
- چرخاننده بنر عمودی، لیست اسلایدها.
- پشتیبانی ویدیویی
نسخه ی نمایشی | دانلود
PgwSlider - نوار لغزنده پاسخگو بر اساس JQuery / Zeptoتنها وظیفه این افزونه نمایش اسلاید تصاویر است. این بسیار فشرده است، زیرا فایل های JQuery تنها 2.5 کیلوبایت حجم دارند که به آن اجازه می دهد تا خیلی سریع بارگیری شود:
- طرح تطبیقی؛
- بهینه سازی سئو؛
- پشتیبانی از مرورگرهای مختلف؛
- انتقال تصویر ساده؛
- حجم آرشیو فقط 2.5 کیلوبایت است.
نسخه ی نمایشی | دانلود
یک نوار لغزنده انعطاف پذیر و مفید JQuery که برای منابع خبری با لیستی از انتشارات در سمت چپ و یک تصویر نمایش داده شده در سمت راست طراحی شده است:
- طراحی تطبیقی؛
- ستون عمودی برای تغییر اخبار؛
- هدرهای گسترش یافته
نسخه ی نمایشی | دانلود
این اسلایدر حاوی jQuery نیست، اما می‌خواهم آن را ارائه کنم زیرا بسیار فشرده است و می‌تواند زمان بارگذاری صفحه را به میزان قابل توجهی کاهش دهد. اگر دوست دارید به من اطلاع دهید:
- طرح تطبیقی؛
- طراحی ساده؛
- گزینه های مختلف تغییر اسلاید؛
- حداقل کد جاوا اسکریپت؛
- حجم فقط 3 کیلوبایت
نسخه ی نمایشی | دانلود
یک گالری به سبک اسناد پراکنده روی میز با چیدمان انعطاف پذیر و طراحی زیبا باید مورد توجه بسیاری از شما باشد. مناسب تر برای تبلت ها و نمایشگرهای بزرگ:
- نوار لغزنده تطبیقی؛
- طراحی تخت؛
- تغییر تصادفی اسلاید؛
- دسترسی کامل به کد منبع
نسخه ی نمایشی | دانلود
نسخه ی نمایشی | دانلود
HiSlider پلاگین اسلایدر jQuery رایگان جدیدی را معرفی کرده است که با آن می توانید گالری های عکس متنوعی با انتقال های خارق العاده ایجاد کنید:
- نوار لغزنده تطبیقی؛
- به دانش برنامه نویسی نیاز ندارد؛
- چندین قالب و پوسته شگفت انگیز.
- جلوه های انتقال زیبا؛
- پشتیبانی از پلتفرم های مختلف؛
- سازگار با وردپرس، جوملا، دروپال.
- امکان نمایش انواع مختلف محتوا: تصاویر، ویدیوهای یوتیوب و ویدیوهای Vimeo.
- راه اندازی انعطاف پذیر؛
- ویژگی های اضافی مفید؛
- تعداد نامحدودی از محتوا نمایش داده می شود.
نسخه ی نمایشی |دانلود
WOW Slider یک اسلایدر عکس جی کوئری پاسخگو با جلوه های بصری شگفت انگیز (دومینو، چرخش، تاری، فلیپ و فلاش، پرواز به بیرون، پرده) و قالب های حرفه ای است.
WOW Slider دارای یک جادوگر نصب است که به شما امکان می دهد بدون نیاز به درک کد یا ویرایش تصاویر، اسلایدرهای خارق العاده را در چند ثانیه ایجاد کنید. نسخه های این افزونه برای جوملا و وردپرس نیز برای دانلود موجود است:
- کاملا پاسخگو؛
- پشتیبانی از همه مرورگرها و انواع دستگاه ها؛
- پشتیبانی از دستگاه های لمسی؛
- نصب آسان در وردپرس؛
- انعطاف پذیری در پیکربندی؛
- سئو بهینه شده است.
نسخه ی نمایشی |دانلود
Nivo Slider در سراسر جهان به عنوان زیباترین و آسان ترین اسلایدر تصویر شناخته شده است. پلاگین Nivo Slider رایگان است و تحت مجوز MIT منتشر شده است:
- به JQuery 1.7 و بالاتر نیاز دارد.
- جلوه های انتقال زیبا؛
- ساده و انعطاف پذیر برای پیکربندی؛
- فشرده و سازگار؛
- متن باز؛
- قدرتمند و ساده؛
- چندین قالب مختلف؛
- برش خودکار تصویر
نسخه ی نمایشی |دانلود
این ایده از لغزنده های اپل الهام گرفته شده است که در آن چندین عنصر کوچک می توانند با جلوه های انیمیشن متفاوت به بیرون پرواز کنند. توسعه دهندگان سعی کردند این مفهوم را با در نظر گرفتن حداقل الزامات برای ایجاد یک طراحی فروشگاه آنلاین ساده اجرا کنند، که در آن عناصر "پرواز" دسته های مختلفی را نشان می دهند:
- طرح تطبیقی؛
- طراحی مینیمالیستی؛
- افکت های مختلف حذف و تغییر اسلاید.
نسخه ی نمایشی |دانلود
یک نوار لغزنده بسیار ساده که 100٪ عرض صفحه را اشغال می کند و با اندازه صفحه نمایش دستگاه های تلفن همراه سازگار است. با انتقال CSS کار می کند و تصاویر به همراه لنگرها "انباشته" می شوند. اگر نمی‌خواهید پیوندی به تصویر ضمیمه کنید، لنگر می‌تواند جایگزین یا حذف شود.
پس از نصب، نوار لغزنده تا 100٪ عرض صفحه گسترش می یابد. همچنین می تواند به طور خودکار اندازه تصاویر اسلاید را کاهش دهد:
- نوار لغزنده تطبیقی JQuery.
- اندازه کامل؛
- طراحی مینیمالیستی.
نسخه ی نمایشی |دانلود
Elastic Content Slider به طور خودکار عرض و ارتفاع را بر اساس ابعاد عنصر اصلی تنظیم می کند. این یک نوار لغزنده jQuery ساده است. این شامل یک منطقه اسلاید در بالا، و یک نوار نوار ناوبری در پایین است. نوار لغزنده عرض و ارتفاع خود را با توجه به ابعاد ظرف اصلی تنظیم می کند.
هنگامی که در صفحه های کوچک مورب مشاهده می شود، برگه های ناوبری به نمادهای کوچک تبدیل می شوند:
- طراحی تطبیقی؛
- پیمایش کلیک ماوس
نسخه ی نمایشی |دانلود
یک نوار لغزنده آزمایشی که تصاویر را به صورت سه بعدی پیمایش می کند. این دو پشته شبیه به پشته‌های کاغذ هستند که هنگام پیمایش، تصاویر در مرکز نوار لغزنده نمایش داده می‌شوند:
- طراحی تطبیقی؛
- تلنگر - انتقال؛
- جلوه های سه بعدی
نسخه ی نمایشی |دانلود
این آموزش به شما نشان می‌دهد که چگونه یک نوار لغزنده با چرخش ایجاد کنید: ایده این است که اسلاید فعلی را با باز کردن تصویر بعدی یا قبلی "برش" و نمایش دهید. با استفاده از انیمیشن‌های JQuery و CSS، می‌توانیم افکت‌های انتقال منحصربه‌فردی ایجاد کنیم:
- طراحی تطبیقی؛
- انتقال تقسیم؛
- نوار لغزنده تمام صفحه
نسخه ی نمایشی |دانلود
بدون زنگ و سوت غیر ضروری، با حجم کمتر از 3 کیلوبایت. از هر کد HTML برای اسلایدهای خود استفاده کنید، آن را با CSS گسترش دهید. همه چیز مربوط به Unslider در GitHub میزبانی می شود:
- پشتیبانی از مرورگرهای مختلف؛
- پشتیبانی از صفحه کلید؛
- تنظیم ارتفاع؛
- طراحی تطبیقی؛
- پشتیبانی از ورودی لمسی
نسخه ی نمایشی | دانلود
یک پلاگین ساده و جمع و جور (فقط 1 کیلوبایت اندازه) که با استفاده از عناصر داخل یک ظرف، یک نوار لغزنده پاسخگو ایجاد می کند. ResponsiveSLides.js با طیف وسیعی از مرورگرها کار می کند، از جمله تمام نسخه های IE از IE6 و بالاتر:
- کاملا پاسخگو؛
- حجم 1 کیلوبایت;
- انتقال CSS3 با قابلیت اجرا از طریق جاوا اسکریپت.
- نشانه گذاری ساده با استفاده از لیست های گلوله ای.
- امکان سفارشی کردن جلوه های انتقال و مدت زمان مشاهده یک اسلاید.
- پشتیبانی از توانایی ایجاد چندین نمایش اسلاید.
- اسکرول خودکار و دستی.
نسخه ی نمایشی |دانلود
دوربین یک پلاگین با جلوه‌های انتقالی زیاد و طرح‌بندی واکنشگرا است. راه اندازی آسان، پشتیبانی شده توسط دستگاه های تلفن همراه:
- طراحی کاملا واکنشگرا؛
- امضاها؛
- امکان افزودن فیلم؛
- 33 آیکون رنگی مختلف
نسخه ی نمایشی |دانلود
SlidesJS یک پلاگین پاسخگو برای JQuery (1.7.1 و بالاتر) با پشتیبانی از دستگاه های لمسی و انتقال CSS3 است. با آن آزمایش کنید، چند مثال آماده را امتحان کنید که به شما کمک می کند تا نحوه اضافه کردن SlidesJS را به پروژه خود بیابید:
- طراحی تطبیقی؛
- انتقال CSS3.
- پشتیبانی از دستگاه های لمسی؛
- راه اندازی آسان.
نسخه ی نمایشی | دانلود
این یک نوار لغزنده jQuery پاسخگو است:
- کاملاً پاسخگو - با هر دستگاهی سازگار است.
- تغییر اسلاید افقی، عمودی؛
- اسلایدها می توانند حاوی تصاویر، ویدئوها یا محتوای HTML باشند.
- پشتیبانی گسترده از دستگاه های لمسی؛
- استفاده از انتقال CSS برای انیمیشن اسلاید (شتاب سخت افزاری).
- Callback API و روش‌های کاملاً عمومی.
- اندازه فایل کوچک؛
- پیاده سازی آسان.
نسخه ی نمایشی |دانلود
بهترین اسلایدر پاسخگو. نسخه جدید برای افزایش سرعت و فشرده سازی بهبود یافته است.
نسخه ی نمایشی | دانلود
Galleria در میلیون ها وب سایت برای ایجاد گالری تصاویر با کیفیت بالا استفاده می شود. تعداد نظرات مثبت در مورد کار او به سادگی خارج از نمودار است:
- کاملا رایگان؛
- حالت مشاهده تمام صفحه؛
- 100٪ تطبیقی؛
- بدون نیاز به تجربه برنامه نویسی؛
- پشتیبانی از آیفون، آی پد و سایر دستگاه های لمسی؛
- Flickr، Vimeo، YouTube و موارد دیگر؛
- چندین موضوع.
نسخه ی نمایشی | دانلود
من یک اسلایدر تصویر jQuery را به شما ارائه می کنم که به طور خاص برای طراحی وب واکنش گرا نوشته شده است. Blueberry یک پلاگین لغزنده تصویر منبع باز تجربی است که به طور خاص برای کار با قالب های واکنش گرا نوشته شده است:
- طراحی مینیمال؛
- طرح تطبیقی؛
- ارائه ها
نسخه ی نمایشی | دانلود
عناصر استاندارد نسخه اول برنامه استفاده می شود: نوار لغزنده به سمت چپ پنهان می شود و به سمت راست ظاهر می شود. همان عناصر ناوبری و شرح‌هایی که روی ماوس ظاهر می‌شوند:
- طراحی تطبیقی؛
- پشتیبانی از امضا؛
- حالت نمایش اسلاید.
نسخه ی نمایشی | دانلود
1. نمایش اسلاید جی کوئری عالییک نمایش اسلاید بزرگ و دیدنی با استفاده از فناوری های جی کوئری.
2. پلاگین جی کوئری “Scale Carousel”
نمایش اسلاید مقیاس پذیر با استفاده از jQuery. شما می توانید اندازه های نمایش اسلاید را تنظیم کنید که به بهترین وجه برای شما مناسب است.
3. پلاگین جی کوئری “slideJS”
نوار لغزنده تصویر با توضیحات متنی.
4. پلاگین "JSliderNews"
هنگامی که ماوس را روی فلش های پیمایش نگه می دارید، یک تصویر کوچک دایره ای از اسلاید بعدی ظاهر می شود.
6. نوار لغزنده زیبای jQuery "Presentation Cycle".
نوار لغزنده جی کوئری با نشانگر بارگذاری تصویر. تغییر خودکار اسلاید ارائه شده است.
7. پلاگین جی کوئری "Parallax Slider"
نوار لغزنده با جلوه پس زمینه حجمی. نکته برجسته این اسلایدر حرکت پس زمینه است که از چندین لایه تشکیل شده است که هر کدام با سرعت متفاوتی اسکرول می شوند. نتیجه تقلید از اثر حجمی است. خیلی زیبا به نظر می رسد، خودتان می توانید ببینید. این افکت در مرورگرهایی مانند اپرا، گوگل کروم، اینترنت اکسپلورر راحت تر نمایش داده می شود.
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.
42. نمایش اسلاید جی کوئری "Craftyslide".
نمایش اسلاید جی کوئری HTML5 که در تمام عرض صفحه همراه با صدا پخش می شود.
یک نمایش اسلاید ساده جی کوئری.
زمان نمی ایستد و با آن پیشرفت می کند. این موضوع روی اینترنت هم تاثیر گذاشت. شما می توانید ببینید که چگونه ظاهر وب سایت ها در حال تغییر است؛ طراحی تطبیقی بسیار محبوب است. و در این راستا، تعداد زیادی اسلایدر، گالری، چرخ فلک یا پلاگین های مشابه جی کوئری تطبیقی جدید ظاهر شده اند.
1. اسلایدر پست افقی پاسخگو
چرخ فلک افقی تطبیقی با دستورالعمل نصب دقیق. این به سبک ساده ساخته شده است، اما شما می توانید آن را متناسب با خود سبک کنید.
2. اسلایدر در Glide.js
این اسلایدر برای هر وب سایتی مناسب است. از Glide.js منبع باز استفاده می کند. رنگ های لغزنده را می توان به راحتی تغییر داد.
3. نمایش اسلاید محتوا کج شده
نوار لغزنده محتوای پاسخگو. نکته برجسته این اسلایدر افکت سه بعدی تصاویر و همچنین انیمیشن های مختلف ظاهر تصادفی است.
4. اسلایدر با استفاده از بوم HTML5
اسلایدر بسیار زیبا و چشمگیر با ذرات تعاملی. با استفاده از بوم HTML5 ساخته شده است،
5. لغزنده شکل‌گیری تصویر
لغزنده با جلوه شکل‌گیری (تبدیل صاف از یک شی به شی دیگر). در این مثال، نوار لغزنده به خوبی برای نمونه کارها یک توسعه دهنده وب یا استودیو وب در قالب یک نمونه کار مناسب است.
6. نوار لغزنده دایره ای
اسلایدر به شکل دایره با افکت چرخاندن تصویر.
7. لغزنده با پس زمینه تار
نوار لغزنده تطبیقی با تعویض و تاری پس زمینه.
8. نوار لغزنده مد پاسخگو
نوار لغزنده وب سایت ساده، سبک و واکنش گرا.
9. Slicebox - لغزنده تصویر سه بعدی jQuery (به روز شده)
نسخه به روز شده نوار لغزنده Slicebox با اصلاحات و ویژگی های جدید.
10. شبکه تصویر پاسخگو متحرک رایگان
پلاگین JQuery برای ایجاد یک شبکه تصویر انعطاف پذیر که عکس ها را با استفاده از انیمیشن ها و زمان بندی های مختلف تغییر می دهد. این می‌تواند به‌عنوان پس‌زمینه یا عنصر تزئینی در یک وب‌سایت خوب به نظر برسد، زیرا می‌توانیم به‌طور انتخابی تصاویر جدید و انتقال‌های آنها را نمایش دهیم. این افزونه در چندین نسخه ارائه می شود.
11. لغزنده فلکس
یک افزونه رایگان جهانی برای وب سایت شما. این افزونه در چندین گزینه اسلایدر و چرخ فلک ارائه می شود.
12. قاب عکس
Fotorama یک افزونه جهانی است. تنظیمات زیادی دارد، همه چیز سریع و آسان کار می کند و می توانید اسلایدها را به صورت تمام صفحه مشاهده کنید. نوار لغزنده را می توان در اندازه ثابت و تطبیقی، با یا بدون ریز عکسها، با یا بدون اسکرول دایره ای و موارد دیگر استفاده کرد.
P.S. اسلایدر را چندین بار نصب کردم و به نظرم یکی از بهترین هاست
13. گالری کشویی سه بعدی رایگان و سازگار با تصاویر کوچک.
گالری اسلایدر تجربی 3DPanelLayout با شبکه و جلوه های انیمیشن جالب.
14. اسلایدر در css3
نوار لغزنده تطبیقی با استفاده از css3 با ظاهر صاف محتوا و انیمیشن سبک ساخته شده است.
15. لغزنده WOW
WOW Slider یک نوار لغزنده تصویر با جلوه های بصری شگفت انگیز است.
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
یک نوار لغزنده با قابلیت مشاهده تصاویر تمام صفحه با یک انتقال زیبا.
یکی از بزرگترین چالش هایی که در حال حاضر تمدن غرب با آن مواجه است، نحوه نمایش حجم زیادی از محتوا در یک فضای کوچک است.
یکی از راه حل های موثر، مرتب کردن محتوا در بلوک های متوالی، با استفاده از آنچه در صنعت (و در جامعه آنلاین) شناخته شده است به عنوان یک نوار لغزنده محتوا است. شما ممکن است در مورد آن نشنیده باشید، اما من حاضرم شرط ببندم که حتما آن را دیده اید.
برای تازه کردن حافظه خود و ارائه ایده ای از آنچه که ما ایجاد خواهیم کرد، در زیر نمونه ای از اسلایدر محتوا آورده شده است:
در این مقاله، من به شما نشان خواهم داد که چگونه اسلایدر محتوای زیبای خود را ایجاد کنید که بسیار شبیه به این اسلایدر است. فراتر از ایجاد یک اسلایدر محتوا، چیزهای زیادی در مورد نحوه تعامل HTML، CSS و جاوا اسکریپت برای ایجاد یک نوار لغزنده محتوا یاد خواهید گرفت. به طور کلی، چیزهای زیادی برای انتظار وجود دارد، بنابراین بیایید شروع کنیم.
بررسی کنید که چگونه کار می کندقبل از اینکه ابتدا وارد HTML، CSS و جاوا اسکریپت شویم که برای کار کردن همه آنها مورد نیاز است، بیایید یک گام سریع به عقب برداریم و عناصر تشکیل دهنده لغزنده محتوای ما را درک کنیم.
ابتدا محتوایی را داریم که می خواهیم در اسلایدر قرار دهیم:
محتوا می تواند هر چیزی باشد. این می تواند تصاویر، محتوای استاندارد HTML، ترکیبی از چندین نوع محتوا و غیره باشد. واقعاً مهم نیست. اگر بتوان محتوای ما را درون عناصر DIV قرار داد، مشکلی نیست. فقط باید مطمئن شوید که هر بلوک محتوا دارای عرض و ارتفاع یکسان است.
هنگام مشاهده یک نوار لغزنده، هر بار فقط یک بلوک محتوا را مشاهده می کنید. اگر اقدامات اضافی انجام نشود، محتوایی که به طور همزمان در اندازه اصلی خود نمایش داده می شود می تواند لغزنده را به چیزی بسیار غیرجذاب بصری تبدیل کند.
در دو مرحله این مشکل را برطرف خواهیم کرد. ابتدا محتوا را در ظرفی به اندازه یکی از بلوک های محتوا قرار می دهیم:
هنگامی که محتوا را در یک ظرف پیچیده کردیم، همه عناصر را در اطراف بلوک محتوا کوتاه می کنیم تا اطمینان حاصل کنیم که هر بار فقط یک بلوک خروجی دارد:
مرحله بعدی امکان مشاهده بقیه مطالب است. این را می توان به روش های مختلف انجام داد. در این مقاله از مجموعه ای از پیوندهای دایره ای استفاده می کنیم که می توانید روی آنها کلیک کنید:
آخرین کاری که برای کارکرد اسلایدر باید انجام دهید این است که هر پیوند را قابل کلیک کنید. این کار به چند ترفند CSS به همراه مقداری جاوا اسکریپت نیاز دارد، اما هیچ چیز خیلی پیچیده نیست. و این، دوستان و دشمنان عزیز من، یک نمای کلی مختصر از آنچه یک اسلایدر محتوا تشکیل شده است است.
در چند بخش بعدی، کدهای HTML، CSS و جاوا اسکریپت واقعی را که اسلایدر ما را نیرو می‌دهند، بررسی خواهیم کرد.
محتوابیایید همان مراحلی را که در نمای کلی توضیح دادیم دنبال کنیم و با ... محتوا شروع کنیم. ابتدا باید یک نقطه شروع ایجاد کنیم. بیایید یک سند HTML خالی ایجاد کنیم و کد زیر را از قالب شروع HTML5 به آن اضافه کنیم:
این نشانه گذاری کاری جز تعریف ساختار سند انجام نمی دهد، اما این اولین قدمی است که به ما امکان می دهد محتوای خود را بیشتر اضافه کنیم. بیایید این کار را در بخش بعدی انجام دهیم.
محتوا (این بار واقعی)داخل عنصر body، کد HTML زیر را اضافه کنید:
بین تگ های سبک، قوانین سبک زیر را اضافه کنید که شکل و رنگ محتوای ما را مشخص می کند:
#wrapper ( عرض: 2200 پیکسل؛ موقعیت: نسبی؛ سمت چپ: 0 پیکسل؛ ) .content ( شناور: سمت چپ؛ عرض: 550 پیکسل؛ ارتفاع: 350 پیکسل؛ فضای سفید: عادی؛ پس‌زمینه تکرار: بدون تکرار؛ ) #itemOne ( پس‌زمینه -color: #ADFF2F; background-image: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo (background-color: #FF7F50; background-image: url("http ://www.kirupa.com/images/yellowSquare.png")؛ ) #itemThree ( پس‌زمینه رنگ: #1E90FF؛ پس‌زمینه-تصویر: url("http://www.kirupa.com/images/pinkSquare.png ")؛ ) #itemFour (رنگ پس‌زمینه: #DC143C؛ تصویر پس‌زمینه: url ("http://www.kirupa.com/images/graySquare.png")؛ )
اکنون وقتی صفحه را مشاهده می کنید چیزی شبیه به آنچه در تصویر نشان داده شده است خواهید دید:
چهار بلوک مستطیلی بزرگ را خواهید دید که به طور مرتب در کنار هم قرار گرفته اند. بسته به وضوح صفحه و اندازه پنجره مرورگر، ممکن است لازم باشد کمی به راست یا چپ پیمایش کنید تا همه مستطیل ها را ببینید.
حالا کمی توجه کنید و سعی کنید بفهمید چرا چیزی را که می بینید می بینید. نشانه گذاری HTML را مرور کنید و عناصر موجود در سندتان را درک کنید.
به مقادیر کلاس و id استفاده شده در آن توجه کنید زیرا از قوانین سبکی که اضافه کرده اید پیروی می کنند. به قوانین سبک و چگونگی تأثیر تجسم آنها بر نتیجه نگاه کنید. حالا بیایید همه چیز را خلاصه کنیم.
چه کرده ایمدر نشانه گذاری HTML ما، محتوایی که مشاهده می کنید از چهار عنصر div تشکیل شده است که هر کدام حاوی یک مقدار کلاس محتوا است. این مقدار کلاس از قانون .content style می آید که اندازه هر بلوک را مشخص می کند: عرض 550 پیکسل در ارتفاع 350 پیکسل:
محتوا ( شناور: چپ؛ عرض: 550 پیکسل؛ ارتفاع: 350 پیکسل؛ فضای سفید: عادی؛ پس‌زمینه تکرار: بدون تکرار؛ )
قانون سبک محتوای . همچنین مقدار شناور باقی مانده را مشخص می کند. در نتیجه، عناصر div در یک ردیف قرار می گیرند. آخرین چیزی که این قانون سبک اعلام می کند ویژگی فضای سفید است. این ویژگی تعیین می کند که متن در یک پاراگراف چگونه پیچیده شود.
من از این ملک فقط برای راحتی استفاده کردم. اگر تصمیم دارید از محدوده این مقاله فراتر بروید و محتوا را به هر یک از عناصر div اضافه کنید، از من تشکر خواهید کرد زیرا متن شما به درستی بسته بندی می شود، یا اگر این کار را نکنید، این ویژگی را حذف کنید (یا روی مقدار دیگری تنظیم کنید). نمی خواهم او را ببینم
در این مرحله، عنصر div ما به درستی مناسب و ردیف شده است. حیف که او کاملاً نامرئی است:
برای حل این مشکل، به هر div یک شناسه منحصر به فرد از طریق مقادیر id اختصاص می دهیم: itemOne، itemTwo، itemThree، anditemFour. در بخش سبک‌ها، چهار قانون سبک داریم که با این مقادیر شناسه مطابقت دارند:
#itemOne ( پس‌زمینه-رنگ: #0099CC؛ تصویر پس‌زمینه: آدرس اینترنتی ("http://www.kirupa.com/images/blueSquare.png")؛ ) #itemTwo (رنگ پس‌زمینه: #FFCC00؛ تصویر پس‌زمینه: url("http://www.kirupa.com/images/yellowSquare.png"); ) #itemThree ( پس زمینه رنگ: #FF6666; پس زمینه تصویر: url("http://www.kirupa.com/images /pinkSquare.png")؛ ) #itemFour ( پس‌زمینه رنگ: #E8E8E8؛ تصویر پس‌زمینه: url ("http://www.kirupa.com/images/graySquare.png")؛ )
همانطور که می بینید، این قوانین سبک فقط رنگ پس زمینه و تصویر پس زمینه را برای محتوای ما تعریف می کنند. از این به بعد، دیوها دیگر نامرئی نیستند. آنها به صورت مستطیل هایی با رنگ های مختلف با ابعاد 550 در 350 پیکسل نمایش داده می شوند.
ما تقریباً تمام شده ایم. آخرین چیزی که ما به آن نگاه خواهیم کرد، div مرموز است که حاوی id wrapper است:
این عنصر تمام محتوای ما را در یک ظرف پیچیده می کند. وقتی در مورد قطع کردن تمام محتوای اطراف بلوک‌های محتوا صحبت کردم، این ظرفی نیست که در بررسی در نظر داشتم.
این ظرف برای چیزی کمی متفاوت طراحی شده است. به معنای واقعی کلمه فقط محتوا را جمع می کند تا بتوانیم همه آن را مشاهده کنیم.
قانون مربوط به #wrapper style این کار را انجام می دهد:
#wrapper (عرض: 2200 پیکسل؛ موقعیت: نسبی؛ سمت چپ: 0 پیکسل؛ )
این قانون سبک ابتدا عرض عنصر wrapper را 2200 پیکسل تعریف می کند. یعنی کل عرض مطالب ما... که با ضرب 4 (در تعداد عناصر div) در 550 پیکسل به دست می آورید.
ویژگی position و left برای تنظیم قابلیت انتقال کانتینر به هر مکانی که می خواهیم در نظر گرفته شده است. با تنظیم ویژگی position روی relative، عنصر را از ساختار سند استاندارد حذف می کنیم و امکان قرار دادن آن را در هر مکانی با استفاده از مقادیر پیکسل نسبت به جایی که در حال حاضر قرار دارد، می کنیم.
از آنجایی که بلوک های محتوای div ما فرزندان این div هستند، به جایی کشیده می شوند که div والد قرار می گیرد. همانطور که می توانید تصور کنید، این بسیار راحت است!
برش محتوادر قسمت قبل، به دریافت بلوک های محتوایی که خروجی خواهند شد، پرداختیم. کار بعدی که می‌خواهیم انجام دهیم این است که محتوای خود را به گونه‌ای برش دهیم که در هر زمان فقط یک بلوک لغزنده قابل مشاهده باشد.
اینجاست که به ظرف اصلی نیاز داریم. تمام عناصر div کد HTML خود را با شناسه contentContainer در یک div قرار دهید:
فقط دو خط جدید و در صورت تمایل، تورفتگی های خط اضافه کنید، که صرفاً به منظور چیدمان مناسب کد HTML است.
حالا، اگر به محتوای بسته بندی شده (دوباره) ما نگاه کنید، چیز جدیدی نخواهید دید. صرفاً بسته‌بندی عناصر در یک div دیگر هیچ چیز معنی‌داری را انجام نمی‌دهد، حتی کمتر کاری که می‌خواهیم برای برش محتوا انجام دهیم.
برای افزودن این عمل معنادار، قانون #contentContainer style زیر را ایجاد کنید:
#contentContainer (عرض: 550 پیکسل؛ ارتفاع: 350 پیکسل؛ حاشیه: 5 پیکسل سیاه و سفید؛ سرریز: پنهان؛ )
توجه داشته باشید که اندازه عنصر contentContainer را روی 550 پیکسل در 350 پیکسل تنظیم می کنید. یعنی دقیقاً به اندازه هر یک از بلوک های محتوا. برای اینکه لغزنده کمی برجسته شود، یک قاب سیاه به عرض 5 پیکسل تنظیم می کنیم.
آخرین کاری که انجام می‌دهیم این است که با تنظیم ویژگی overflow روی hidden، محتوا را برش دهیم. این برای پنهان کردن همه چیز خارج از عنصر contentContainer است.
همه با هم تصویر زیر را در مرورگر به ما می دهد:
لطفاً توجه داشته باشید که اکنون فقط محتوای بلوک اول شما قابل مشاهده است. بقیه محتوا هنوز وجود دارد، به دلیل بریده شدن ما از طریق مقدار پنهان برای ویژگی سرریز، اکنون پنهان شده است.
لینک های ناوبریبنابراین به آنها رسیدیم! ما به داشتن یک نوار لغزنده کاملاً کارآمد نزدیک می شویم. در این بخش، ما بر پیوندهای پیمایش تمرکز خواهیم کرد - عناصری که برای دیدن سایر بلوک‌های محتوا کلیک می‌کنید.
این پیوندها هیچ ارتباطی با ContentContainer ما یا هر قطعه HTML دیگری که قبلاً داریم ندارند. شما باید خطوط برجسته شده را به کد HTML که قبلاً داریم (اما بالای تگ اسکریپت) اضافه کنید:
بیایید نگاهی گذرا به کد HTML که به تازگی اضافه کرده اید بیندازیم. اول، ما یک div با شناسه navLinks داریم که لیست نامرتب را توصیف می کند. خود پیوندها به عنوان موارد فهرست ارائه می شوند.
هر عنصر لیست حاوی یک مقدار کلاس آیتمLinks و همچنین یک ویژگی سفارشی data-* به نام data-pos است. ما کمی بعد به این ویژگی باز خواهیم گشت، اما در حال حاضر فقط به وجود آن توجه کنید.
ما باید به کد HTML که اضافه کرده‌ایم استایل بدهیم. در بخش سبک ها، قوانین زیر را اضافه کنید:
#navLinks (تراز متن: مرکز؛ عرض: 550 پیکسل؛ ) #navLinks ul ( حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ صفحه نمایش: بلوک درون خطی؛ حاشیه بالا: 6 پیکسل؛ ) #navLinks ul li ( شناور: چپ؛ متن- تراز: مرکز؛ حاشیه: 10 پیکسل؛ سبک فهرست: هیچکدام؛ مکان‌نما: نشانگر؛ رنگ پس‌زمینه: #CCCCCC؛ بالشتک: 5 پیکسل؛ حاشیه: 50 درصد؛ حاشیه: سیاه 5 پیکسل؛ ) #navLinks ul li:hover ( پس‌زمینه رنگ: #FFFF00; ) #navLinks ul li.active ( پس‌زمینه رنگ: #333333؛ رنگ: #FFFFFF؛ عرض طرح: 7 پیکسل؛ ) #navLinks ul li.active:hover ( پس‌زمینه رنگ: #484848; رنگ: #FFFFFF؛ )
عجب CSS زیادی. با وجود اینکه کدهای زیادی وجود دارد، هیچ چیز واقعا منحصر به فرد یا جالبی در آن وجود ندارد. بخشی از کد CSS یک منوی افقی با پیوندهای نمایش داده شده در کنار یکدیگر ایجاد می کند.
بقیه کد ظاهر هر پیوند و همچنین برجسته شدن متناظر آن را در هنگام نگه داشتن ماوس روی آن تعیین می کند.
هنوز هم ارزش دارد که با جزئیات بیشتر در مورد یک نکته صحبت کنیم.
این به دلیل دو قانون سبک است که برای کلاس فعال اعمال می شود:
#navLinks ul li.active ( رنگ پس‌زمینه: #333333؛ رنگ: #FFFFFF؛ عرض طرح: 7 پیکسل؛ ) #navLinks ul li.active:hover (رنگ پس‌زمینه: #484848؛ رنگ: #FFFFFF؛ )
اگر به خاطر داشته باشید، هیچ عنصری در کد HTML ما وجود نداشت که دارای مقدار کلاس فعال باشد. صرف نظر از این، این قوانین استایل همچنان اعمال خواهند شد زیرا کلاس فعال به صورت پویا به یکی از پیوندهای ما اضافه می شود.
اگر در حال حاضر در فهمیدن همه اینها مشکل دارید، نگران نباشید، ما به زودی جزئیات آن را بررسی خواهیم کرد.
در حال حاضر اسلایدر ما به این شکل است:
اگر نوار لغزنده شما درست به نظر نمی رسد، احتمال زیادی وجود دارد که اشتباه تایپی داشته باشید... یا چیز دیگری. آیا این اتفاق افتاده است؟
ایجاد خود اسلایدربسیار خوب، در حال حاضر ما چیزی داریم که بسیار شبیه به یک نوار لغزنده در حال کار است. با این حال، وقتی روی هر یک از پیوندها کلیک می کنید، مطلقاً هیچ اتفاقی نمی افتد.
بیایید اکنون یک نوار لغزنده ایجاد کنیم، اما ابتدا مقداری جاوا اسکریپت و برخی عناصر جالب را اضافه می کنیم... یعنی چند انتقال خوب CSS.
افزودن جاوا اسکریپتدر داخل تگ اسکریپت، خطوط زیر از کد جاوا اسکریپت را اضافه کنید:
// فقط درخواست DOM... مثل اینکه از رئیس اجازه می خواهیم! var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper"); // activeLink یک برچسب برای عنصر فعال ارائه می دهد var activeLink = 0; // ردیابی رویداد را برای (var i = 0؛ i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }
تنها کاری که باید انجام دهیم این است که به جای تغییر ناگهانی اسلاید، یک انتقال صاف را تضمین کنیم.
اضافه کردن یک انتقالما در حال حاضر یک نوار لغزنده محتوا داریم که هنوز محتوا را به آرامی پیمایش نمی کند. در عوض، اسلایدها به طور ناگهانی از یکی به دیگری می پرند. برای اینکه محتوا به راحتی حرکت کند، اجازه دهید از یک انتقال CSS استفاده کنیم. بیایید یکی از انتقال های ممکن را به اسلایدر خود اضافه کنیم.
قانون #wrapper style را پیدا کنید و یک خط به آن اضافه کنید:
خطی که اضافه کردید انتقال را مشخص می کند. ویژگی مشخص شده در آن مشخص می کند که انتقال باید زمانی رخ دهد که ویژگی سمت چپ تغییر کند. انتقال ما بیش از 0.5 ثانیه انجام می شود و از تابع زمان بندی آسان در خروج برای سرعت بخشیدن به فرآیند در ابتدای انتقال و کاهش سرعت در پایان استفاده می کند.
از آنجایی که ویژگی transition هنوز در حال تغییر در W3C است، برای اطمینان از اینکه هر مرورگر مدرنی می‌تواند انتقال را اعمال کند، باید از پیشوندها استفاده کنید. اگر نمی‌خواهید با این موضوع مقابله کنید، اسکریپت زیر را درست قبل از تگ اسکریپت اضافه کنید:
نه، این اسکریپت کار مخربی انجام نمی دهد. این یک نسخه میزبانی شده از کتابخانه بدون پیشوند Leah Veru است. به جای اینکه نیاز به یادگیری زیادی در مورد نحوه کار اسلایدرها داشته باشید، همچنین می توانید اسکریپت او را دانلود کنید، آن را در سرور خود آپلود کنید و به نسخه خود پیوند دهید.
به هر حال، اگر اکنون سند را مشاهده می کنید، باید یک نوار لغزنده محتوای فعال داشته باشید که با کلیک بر روی هر یک از پیوندهای پیمایش، محتوا را به آرامی نمایش می دهد. این باید با آنچه در مثال ارسال شده در ابتدای این مقاله مشاهده کردید یکسان باشد.
سرانجام!!!
تجزیه کد (و هر چیز دیگری!)اکنون که یک نوار لغزنده محتوای فعال داریم، بیایید سعی کنیم از همان ابتدا بفهمیم که کد چگونه همه آن ها را به هم مرتبط می کند.
واقعا چه اتفاقی می افتدپس از بارگیری نوار لغزنده محتوا، اولین بلوک محتوا ظاهر می شود. بقیه محتوا برش داده شده و از دید پنهان می شود:
با کلیک بر روی هر پیوند، بلوک محتوای مربوطه نمایش داده می شود. به لطف رابطه نزدیک بین هر پیوند ناوبری و موقعیت پیکسل هر بلوک محتوا، نوار لغزنده می‌داند چه مقدار محتوا در ناحیه قابل مشاهده نمایش داده می‌شود.
بیایید سعی کنیم این ارتباط را درک کنیم. چند چیز هست که ما می دانیم. ما می دانیم که هر بلوک محتوای ما 550 پیکسل عرض دارد. همچنین می دانیم که اولین بلوک محتوای ما به صورت افقی روی 0 پیکسل تنظیم شده است.
چگونه این را بدانیم؟ همه بلوک‌های محتوای ما در داخل یک عنصر wrapper پیچیده شده‌اند که تمام محتوای ما را در بر می‌گیرد، و لبه سمت چپ عنصر wrapper دارای موقعیت 0 پیکسل است:
این در قانون #wrapper style اعلام شده است. از این قانون سبک، ما همچنین می دانیم که تمام بلوک های محتوا به سمت چپ افست شده و در یک ردیف در کنار یکدیگر قرار می گیرند.
با دانستن این موضوع، می‌توانیم موقعیت‌های همه بلوک‌های محتوا را به صورت زیر محاسبه کنیم:
بلوک اول در 0 پیکسل قرار دارد. عرض بلوک محتوای اول موقعیت بلوک دوم است. یعنی 550 پیکسل. هر بلوک بعدی دارای موقعیتی 550 پیکسل بزرگتر از بلوک قبلی است.
از آنجایی که ما موقعیت پیکسل دقیق هر بلوک محتوا را می دانیم، می توانیم از این اطلاعات برای دستور دادن به نوار لغزنده محتوا استفاده کنیم تا عنصر wrapper را به محل مورد نظر منتقل کند تا محتوای مورد نظر ما قابل مشاهده باشد.
ویژگی data-pos!عالی است، اکنون ما موقعیت همه بلوک های محتوا را می دانیم. چیزی که ما هنوز به آن نگاه نکرده ایم این است که چگونه دانستن موقعیت پیکسل یک بلوک محتوا به ما کمک می کند بلوک مورد نظر را در پنجره کشویی نمایش دهیم.
چگونه می توانیم مشخص کنیم که وقتی روی یک لینک کلیک می شود، یک بلوک خاص از محتوا نمایش داده شود؟ فقط هر پیوند حاوی موقعیت دقیق (بر حسب پیکسل) بلوک محتوایی است که با آن مطابقت دارد:
توجه داشته باشید که ویژگی data-pos به هر یک از پیوندها اشاره می کند، مقدار هر یک از ویژگی های data-pos. آنها برابر با مقدار منفی موقعیت افقی اصلی هر یک از بلوک های محتوا هستند.
وقتی روی یک پیوند کلیک می کنیم، جاوا اسکریپت استفاده می شود که ویژگی data-pos مرتبط با آن پیوند را می خواند و سپس مقدار موقعیت پیکسل عنصر wrapper ما را به مقداری که از ویژگی خوانده شده است تغییر می دهد.
به عنوان مثال، این چیزی است که پس از کلیک بر روی پیوند سوم اتفاق می افتد:
لینک سوم دارای مقدار داده pos 1100 پیکسل است. این مربوط به تعداد پیکسل هایی است که پوسته کانتینر باید جابجا شود تا بلاک سوم محتوا در ناحیه قابل مشاهده نمایش داده شود. با کلیک بر روی هر پیوند دیگری، ویژگی عنصر پوسته به مقدار موجود در ویژگی data-pos آن پیوند تنظیم می شود.
بسیار خوب، بنابراین ما ارتباط بین پیوندها و موقعیت یابی محتوا را که قبلاً در مورد آن صحبت کردم، پوشش دادیم. اکنون تنها کاری که باید انجام دهیم این است که به جاوا اسکریپت نگاه کنیم، که همه چیزهایی را که در این بخش نوشتم به چیزی تبدیل می کند که مرورگر بتواند آن را درک کند.
همه چیز در مورد جاوا اسکریپت استاز آنجایی که اکنون درک مفهومی از نحوه عملکرد همه چیز در نوار لغزنده محتوای ما دارید، بیایید به جاوا اسکریپت نگاه کنیم، که هر آنچه را که می‌دانید پیاده‌سازی می‌کند. همانطور که در تمام مقاله هایم انجام می دهم، بیایید هر خط جاوا اسکریپت را تجزیه کنیم و ببینیم که چه کاری برای اسلایدر ما انجام می دهد.
بیایید از همان بالا شروع کنیم:
var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper");
متغیر links مجموعه تمام عناصر سند ما را می گیرد که دارای مقدار کلاس itemLinks هستند. این عناصر آیتم های فهرستی هستند که به عنوان پیوندهای ناوبری عمل می کنند. متغیر wrapper بسیار شبیه پیوندها است. نشانگر یک عنصر با پوشش شناسه را می پذیرد.
querySelector و querySelectorAllتوجه کنید که چگونه از DOM پرس و جو می کنم. به جای استفاده از چیزی مانند getElementsByClassName یا getElementById، از توابع جدید querySelectorAll و querySelector استفاده می کنم.
خواهید دید که بعداً از هر دوی این متغیرها استفاده خواهیم کرد، پس آنها را در نظر داشته باشید.
var activeLink = 0;
متغیر activeLink برای ذخیره موقعیت محتوایی که در حال حاضر نمایش داده می شود استفاده می شود. وقتی کمی بعداً آن را در عمل توضیح دهم، معنای این متغیر را بهتر متوجه خواهید شد.
مجموعه خطوط بعدی یک حلقه for است:
// تنظیم ردیابی رویداد برای (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }
در اینجا ما روی هر عنصر از متغیرهای پیوندها تکرار می کنیم و یک ردیابی رویداد را به آن اختصاص می دهیم. این عنصر ردیابی رویداد، تابع setClickedItem را هنگامی که یک رویداد کلیک ضبط شده است، فراخوانی می کند.
خط زیر باعث ایجاد تعدادی تغییر می شود:
// تنظیم عنصر اول به عنوان فعال links.classList.add("active");
ما مقدار کلاس فعال را به اولین عنصر پیوند ناوبری اضافه می کنیم. این کار با ارسال مقدار activeLink به آرایه پیوندها انجام می شود. از آنجایی که activeLink 0 است، آرایه معمولاً اولین عنصر را می گیرد و با استفاده از classList API، مقدار کلاس فعال را اضافه می کند.
پس از اجرای این خط کد، به یاد دارید چه زمانی به قوانین سبک زیر توجه کردیم؟
خوب، اکنون این قوانین سبک وارد عمل شده و به تمایز پیوند ناوبری فعال از لیست سایر پیوندهای غیرفعال کمک می کند. کمی بعد به این قوانین سبک باز خواهیم گشت و آنها را با جزئیات بیشتری بررسی خواهیم کرد.
مورد بعدی که ما به آن نگاه خواهیم کرد، کنترل کننده رویداد setClickedItem است که با کلیک روی هر یک از پیوندها فراخوانی می شود:
تابع setClickedItem(e) ( removeActiveLinks(؛ var clickedLink = e.target؛ activeLink = clickedLink.itemID؛ changePosition(clickedLink)؛ )
این تابع ابتدا با استفاده از تماس removeActiveLinks وضعیت همه پیوندهای شما را به غیر فعال تغییر می دهد. کمی بعد به این ویژگی خواهیم پرداخت.
کار مهم دیگری که این تابع انجام می دهد این است که مقدار ویژگی itemID آیتم انتخاب شده را به activeLink تغییر می دهد. این تضمین می کند که activeLink همیشه به عددی اشاره می کند که مربوط به بلوک محتوای نمایش داده شده در نوار لغزنده است.
پس از انجام این دو مرحله (به نسبت خسته کننده)، این تابع یک مرجع به عنصر انتخاب شده به تابع changePosition ارسال می کند. که به نوبه خود چند کار شگفت انگیز انجام می دهد که در پاراگراف بعدی در مورد آنها صحبت خواهم کرد.
اینجاست که تغییرات جالب اتفاق می افتد! بیایید کمی جلوتر بپریم و به تابع changePosition نگاه کنیم:
// پس از اینکه ما متقاعد شدیم که پیوندی که ما نیاز داریم به عنوان فعال تعیین شده است، کنترل کننده موقعیت اسلایدر را تغییر می دهد. تابع changePosition(link) (link.classList.add("فعال")؛ var position = link.getAttribute("data-pos")؛ wrapper.style.left = موقعیت؛ )
این تابع دو کار را انجام می دهد:
من. نمایش بصری پیوند انتخاب شده را تغییر می دهد تا نشان دهد که در حال حاضر فعال است.
II. موقعیت عنصر پوسته را تنظیم می کند.
بیایید این دو مورد را با جزئیات بیشتری بررسی کنیم.
نمایش بصری پیوند انتخاب شده/فعال را تغییر دهیدبرای اینکه آنچه قبلاً در مورد آن صحبت کردم برای شما واضح تر شود، پیوندهای ناوبری شما می توانند در یکی از دو حالت باشند. این حالت‌ها برای اینکه به کاربر اجازه دهند ببیند کدام بلوک محتوا در حال حاضر فعال است، در نظر گرفته شده است:
در این شکل بلافاصله می توانید مشخص کنید که بلوک محتوای مربوط به لینک چهارم در حال حاضر فعال است و سه لینک اول غیرفعال هستند.
این تغییر بصری با افزودن و حذف کلاس های CSS انجام می شود. کلاس فعال به لینک فعال اضافه می شود. تمام پیوندهایی که فعال نیستند دارای مقدار کلاس فعال نیستند. وقتی به تابع removeActiveLinks نگاه می کنیم، متوجه خواهید شد که چگونه این کار می کند.
در هر صورت، به یاد دارید که قبلاً دو قانون سبک زیر را فراخوانی کردیم:
#navLinks ul li.active ( رنگ پس‌زمینه: #333333؛ رنگ: #FFFFFF؛ عرض طرح: 7 پیکسل؛ ) #navLinks ul li.active:hover (رنگ پس‌زمینه: #484848؛ رنگ: #FFFFFF؛ )
در تابع setClickedItem ما (همچنین به عنوان تابعی که با کلیک روی یک پیوند فراخوانی می شود نیز شناخته می شود)، ابتدا removeActiveLinks را فراخوانی می کنیم:
تابع setClickedItem(e) ( removeActiveLinks(؛ var clickedLink = e.target؛ activeLink = clickedLink.itemID؛ changePosition(clickedLink)؛ )
این تابع مسئول حذف کلاس فعال برای همه پیوندهای ناوبری است:
تابع removeActiveLinks() ( برای (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
می توانید آن را به عنوان یک دکمه تنظیم مجدد جهانی در نظر بگیرید. از طریق پیوندهای ناوبری که در متغیر پیوندها ذخیره شده اند، تکرار می شود و با استفاده از classList.remove() مقدار کلاس فعال را حذف می کند. فقط به خاطر داشته باشید که اگر هر یک از پیوندهای ناوبری دارای یک مقدار کلاس فعال بود، خوب... دیگر چیزی از آن وجود نخواهد داشت.
بنابراین، ما نحوه حذف کلاس فعال را از تمام پیوندهای خود بررسی کردیم. افزودن یک کلاس به یک نوبت بسیار ساده است:
تابع removeActiveLinks() ( برای (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }
همان ClassList که قبلاً برای حذف مقدار کلاس فعال استفاده کردیم، برای اضافه کردن مقادیر کلاس فعال به پیوند انتخاب شده استفاده می کنیم. این پیوند انتخاب شده آرگومان پیوندی را دریافت می کند که به آن ارسال می شود.
تنظیم موقعیت پوستهما تقریباً تمام شده ایم! پس از تمام این مراحل، در نهایت به تابع changePosition می رسیم که در واقع موقعیت عنصر پوشش لغزنده را تعیین می کند و بلوک محتوای مربوط به لینکی را که انتخاب می کنید نمایش می دهد.
بیایید به قطعه زیر نگاه کنیم:
تابع changePosition(link) (link.classList.add("فعال")؛ var position = link.getAttribute("data-pos")؛ wrapper.style.left = موقعیت؛ )
متغیر position مقدار ویژگی data-pos پیوندی را که روی آن کلیک کردیم را ذخیره می کند. هنگامی که مقدار ویژگی data-pos را بدست آوردیم، ویژگی چپ CSS عنصر wrapper را به همان مقدار تنظیم می کنیم.
این چه ارتباطی با اجرای یک افکت اسلایدر دارد؟ یادتان هست چند وقت پیش یک قانون به استایل #wrapper اضافه کردیم؟
#wrapper (عرض: 2200px؛ موقعیت: نسبی؛ سمت چپ: 0px؛ انتقال: سمت چپ 0.5s ease-in-out؛ )
توجه داشته باشید که ما انتقال را تعریف کرده ایم تا زمانی که ویژگی سمت چپ تغییر می کند، اعمال شود. حدس بزنید جاوا اسکریپت ما چه می کند؟ ویژگی سمت چپ را تنظیم می کند! انتقال CSS این تغییر را تشخیص می دهد و محتوا را به حرکت در می آورد. تنها چیزی که برای این کار نیاز دارید اضافه کردن یک خط جاوا اسکریپت است.
من شما را نمی دانم، اما برای من شگفت انگیز است. این چیزی است که ما نمی‌توانستیم چند سال پیش تصور کنیم، زمانی که مجبور بودیم تلاش زیادی کنیم و کد بنویسیم تا بتوانیم جلوه لغزنده را مدیریت کنیم. این چیزی است که اسلایدر محتوای ما را زیبا می کند.
درست مانند آن، ما فقط یک نوار لغزنده محتوا را از ابتدا ایجاد کردیم و (مهمتر از آن) نحوه عملکرد آن را یاد گرفتیم.
بهبود لغزنده محتوانوار لغزنده محتوایی که ایجاد کردیم بسیار جالب است، اما می‌توانیم آن را حتی خنک‌تر کنیم. در این بخش، دو پیشرفت را بررسی خواهیم کرد که ممکن است برای شما بسیار مفید باشد. در طول راه، چند ترفند جدید جاوا اسکریپت و CSS را یاد خواهیم گرفت. همانطور که جوانان اکنون می گویند این خواهد شد: "من گریه می کنم!"
اسکرول با تبدیل translate3dدر حال حاضر، اسلایدهای ما با تغییر مقدار ویژگی سمت چپ CSS که به عنصر wrapper div اعمال می‌شود، پیمایش می‌شوند. با استفاده از خاصیت چپ، اسلایدر را کار می کنیم، اما این روش دارای اشکالات جدی است. شما نمی توانید از شتاب سخت افزاری برای اطمینان از انتقال صاف اسلاید استفاده کنید.
این امر به ویژه برای دستگاه های تلفن همراهی که اغلب از سخت افزار با سرعت اتصال به اینترنت کم استفاده می کنند صادق است و در اینجا تغییرات اسلاید متناوب و پرش می تواند به ویژه قابل توجه باشد.
این را می توان با استفاده از تابع تبدیل translate3d برطرف کرد، که باعث می شود اسلایدها به آرامی حرکت کنند. این تابع مقادیر x، y و z را به عنوان آرگومان می گیرد و تغییر هر یک از این مقادیر موقعیت عنصر هدف را تغییر می دهد.
ویژگی خاص این عملکرد این است که در نتیجه استفاده از آن، سخت افزار مرورگر تغییر موقعیت را تسریع می کند. ما منتظر چی هستیم؟
اولین کاری که باید انجام دهیم این است که قانون #wrapper style را تغییر دهیم. اعلان موقعیت و خواص سمت چپ را با کد زیر جایگزین کنید:
بنابراین، تبدیل موقعیت اولیه عنصر پوسته را تعیین می کند.
مرحله اول: افزودن عناصر کمکیدر مرحله اول، کد کمکی زیر را در زیر کد اصلی که در حال حاضر داریم اضافه می کنیم:
// // استفاده از تبدیل ها // var transforms = ["تبدیل"، "msTransform"، "webkitTransform"، "mozTransform"، "oTransform"]; var transformProperty = getSupportedPropertyName(transforms); // مدیریت پیشوندهای فروشنده تابع getSupportedPropertyName(properties) ( برای (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }
این کد به ما کمک می کند تا ویژگی transform را با استفاده از پیشوندهای فروشنده تنظیم کنیم تا تا حد امکان توسط مرورگرهای بیشتری پشتیبانی شود.
در این مقاله من این خطوط را توضیح نمی دهم. تنها چیزی که باید بدانید این است که همه این کدها به تنظیم Property برای تبدیل، msTransform، mozTransform یا oTransform کمک می کند. بسته به سن مرورگری که استفاده می کنید، یکی از این مقادیر استفاده می شود.
مرحله دوم: معرفی Ahoy!در تابع changePosition، خطوط کد زیر را پیدا کنید:
تابع changePosition(link) ( var position = link.getAttribute ("data-pos"); wrapper.style.left = position; link.classList.add ("فعال")؛ )
آنها را با کد زیر جایگزین کنید:
تابع changePosition(link) ( var position = link.getAttribute ("data-pos"); var translateValue = "translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}
این کد کارهای بسیار ساده ای انجام می دهد. متغیر translateValue یک نمایش مبتنی بر رشته از تابع translate3d ایجاد می کند که در آن قسمت X با مقدار متغیر موقعیت پر می شود. هنگامی که این رشته ایجاد شد، تنها کاری که باید انجام دهیم این است که آن را به شی استایل عنصر wrapper ارسال کنیم.
توجه داشته باشید که تعریف ویژگی style مربوطه توسط متغیر transformProperty انجام می شود که کمی قبل به آن نگاه کردیم.
اگر اکنون سند را مشاهده کنید، خواهید دید که بلوک های محتوا در نوار لغزنده از یک مکان به مکان دیگر می پرند.
بدیهی است که این چیزی نیست که انتظار داشتید ببینید. حرکت صاف چه شد؟ پاسخ این است که ما یک تغییر دیگر را از دست داده ایم. خوشبختانه، این به راحتی قابل تعمیر است. اگر به قانون #wrapper style برگردیم، متوجه خواهیم شد که اعلان انتقال به این شکل است:
#wrapper (عرض: 2200 پیکسل؛ تبدیل: translate3d(0، 0، 0؛ انتقال: سمت چپ 0.5s ease-in-out؛ )
تغییرات ما به سمت چپ تغییر می کند. ما دیگر از این ویژگی استفاده نمی کنیم، بنابراین انتقال ما نمی تواند شروع به کار کند. برای اصلاح این بی عدالتی وحشتناک، کلمه کلیدی ویژگی سمت چپ در اعلان انتقال را با کلمه کلیدی ویژگی transform جایگزین کنید:
#wrapper (عرض: 2200 پیکسل؛ تبدیل: translate3d(0، 0، 0؛ انتقال: تبدیل .5s ease-in-out؛ )
هنگامی که این تغییرات را انجام دادید، نوار لغزنده ما دوباره به همان روش قبلی کار خواهد کرد.
تنها تفاوت این است که تغییر اسلایدها اکنون از شتاب سخت افزاری استفاده می کند و اکنون راحت تر اتفاق می افتد و در دستگاه های بیشتری پشتیبانی می شود.
تغییر خودکار اسلاید در فواصل چند ثانیه ایدر حال حاضر، اسلایدهای ما تنها زمانی تغییر می کنند که روی یکی از پیوندهای پیمایش کلیک کنیم. اما این تنها راهی نیست که اسلایدر کار می کند. بسیاری از اسلایدرهای محتوا هر چند ثانیه به طور خودکار در محتوا پیمایش می کنند، و همچنین گزینه ای برای پرش به یک بخش خاص با استفاده از پیوندهای ناوبری وجود دارد.
می توانید نمونه ای از اسلایدر محتوا را در زیر مشاهده کنید:
بله، این نوار لغزنده قدیمی ما با برخی تغییرات جزئی است تا به محتوا اجازه می دهد به طور خودکار در ظرف حرکت کند. حدس بزنید در ادامه چه خواهیم کرد؟
بیایید اسلایدها را به صورت خودکار اسکرول کنیم!تابع setInterval در این مورد به ما کمک می کند. وظیفه اصلی این تابع اطمینان از اجرای کد در فواصل زمانی منظم است:
window.setInterval(functionToCall، تاخیر)؛
هر چند ثانیه (یا هر چیزی که به عنوان مقدار بازه تنظیم می کنید)، تابع setInterval به نوار لغزنده ما می گوید که به بلوک بعدی محتوا منتقل شود.
وقتی محتوا تمام شد، نوار لغزنده از یک حلقه به ابتدای محتوا می رود و دوباره شروع می شود. این کار به راحتی انجام می شود. تنها کاری که باید انجام دهید این است که چند ترفند را بدانید و درک روشنی از نحوه کار اسلایدر محتوای خود داشته باشید.
اولین تغییری که باید انجام دهیم اضافه کردن کد اضافی مورد نیاز برای انجام کار است. در انتهای کدی که از قبل دارید، خطوط زیر را اضافه کنید:
// // کد برای تغییر خودکار اسلایدها // var timeoutID; تابع startTimer() ( // 2 ثانیه صبر کنید قبل از فراخوانی goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); تابع goToNextItem() ( removeActiveLinks()؛ if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }
به زودی معنی همه این کدها را بررسی خواهیم کرد. حالا همه را اضافه کنید. پس از انجام این کار، نوار لغزنده محتوا را در مرورگر خود مشاهده کنید. مشاهده خواهید کرد که اسلایدهای محتوا هر دو ثانیه در ظرف تغییر می کنند.
تنها یک تغییر قابل توجه برای ما باقی مانده است. در حال حاضر، اسلایدها هر دو ثانیه یکبار می چرخند، صرف نظر از اینکه روی پیوند پیمایش کلیک می کنید یا خیر.
روش صحیح انجام این کار این است که وقتی یکی از پیوندها کلیک می شود تایمر را به 0 بازنشانی کنید. برای ایجاد این تغییر، خط کد زیر را به کنترل کننده رویداد setClickedItem اضافه کنید:
هنگامی که شما مداخله می کنید و روی پیوند پیمایش کلیک می کنید، نوار لغزنده محتوا همانطور که انتظار می رود رفتار می کند. هورا!
توضیح تغییر خودکار اسلایدبنابراین، ما فقط یک چیز برای کشف کردن باقی مانده است. بیایید نگاهی گذرا به کدی که به تازگی اضافه کرده‌ایم بیندازیم و بفهمیم که چرا این کد را انجام می‌دهد.
بیایید با تابع goToNextItem/span> شروع کنیم:
تابع goToNextItem() ( removeActiveLinks()؛ if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}
این ویژگی مسئول پیگیری محتوایی است که در حال حاضر نمایش داده می شود و آنچه که به دنبال آن خواهد آمد. برای درک بهتر آنچه در جریان است، به تصویر زیر نگاه کنید:
متغیر activeLink به موقعیت بلوک محتوای نمایش داده شده در حال حاضر اشاره می کند. هر بخش از اطلاعات با یک عنصر مربوطه در آرایه پیوندها مرتبط است.
تعداد کل عناصر داخل آرایه پیوندها را می توان از طریق ویژگی length تنظیم کرد. حالا بیایید به کد خود برگردیم.
دستور if تابع goToNextItem به سادگی بررسی می کند که آیا هنوز محتوا باقی مانده است یا اینکه آیا نوار لغزنده باید به ابتدا بازگردد:
اگر (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; }
اگر به نمودار و کد دقت کنید، منطق را متوجه خواهید شد. اساساً، هنگامی که مقدار صحیح ActiveLink را داشته باشیم، هر چیز دیگری در نوار لغزنده ما مانند جادو عمل می کند.
خود جادو با استفاده از دو خط زیر ارائه شده توسط تابع changePosition انجام می شود که به نوبه خود با اشاره گر به بلوک محتوای بعدی برای خروجی فراخوانی می شود:
var newLink = پیوندها; تغییر موقعیت (پیوند جدید)؛
در این مرحله، نحوه پردازش کد ما با نحوه پردازش آن در هنگام کلیک دستی روی پیوند تفاوتی ندارد.
بنابراین... ما به کد موجود در تابع goToNextItem نگاه کردیم تا به محتوای بعدی برویم. برای فراخوانی این اسلاید از خطوط زیر به صورت خودکار استفاده می شود:
var timeoutID; تابع startTimer() ( // 2 ثانیه صبر کنید قبل از فراخوانی goInactive timeoutID = window.setInterval(goToNextItem, 2000); ) startTimer(); تابع resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
برای شروع، از تابع startTimer استفاده می شود. این تابع شامل یک فراخوانی setInterval است که تضمین می کند که تابع goToNextItem هر 2 ثانیه (یا 2000 میلی ثانیه) فراخوانی می شود.
به سادگی افزودن این تابع (و فراخوانی آن) باعث می شود که نوار لغزنده محتوای شما به صورت خودکار شروع به اسکرول بلوک های محتوا کند.
تنها چیزی که برای فهمیدن باقی می ماند این است که چگونه تایمر (که من آن را setInterval نامیدم) تنظیم مجدد می شود زمانی که شما به صورت دستی روی پیوند کلیک می کنید. برای مقابله با این، از کد باقی مانده ای که در اختیار داریم استفاده می شود.
روشی که توسط آن تایمر تنظیم مجدد می شود، با توقف تابع setInterval و سپس شروع مجدد آن است. اینکه چگونه این کار انجام می شود می تواند کمی دشوار باشد.
شناسه تابع setInterval در حال فراخوانی را ذخیره می‌کنیم و سپس از همان شناسه استفاده می‌کنیم تا بعداً فراخوانی همان تابع setInterval را متوقف کنیم. اجازه بدهید روشن کنم.
ما این شناسه را در متغیر timeoutID ذخیره می کنیم و در فراخوانی startTimer مقداردهی اولیه می کنیم و استفاده از همین شناسه در داخل تابع resetTimer راحت است:
تابع resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
تابع clearInterval شناسه (از طریق timeoutID ) تابع setInterval را می گیرد که می خواهیم متوقف شود.
پس از اینکه تایمر را در تابع resetTimer متوقف کردیم، startTimer را فراخوانی کرده و دوباره آن را شروع می کنیم:
تابع resetTimer() ( window.clearInterval(timeoutID); startTimer(); )
منطق ساده است. زمانی که به صورت دستی انتخاب می کنید کدام بلوک محتوا در نوار لغزنده نمایش داده شود، تایمر متوقف می شود:
تابع setClickedItem(e) ( removeActiveLinks()؛ resetTimer()؛ var clickedLink = e.target؛ activeLink = clickedLink.itemID؛ changePosition(clickedLink)؛ )
هنگامی که یک بلوک جدید از محتوا را انتخاب می کنید، نوار لغزنده به مدت دو ثانیه قبل از رفتن به بلوک بعدی مکث می کند. توابع startTimer و resetTimer همه اینها را پیگیری می کنند.
نتیجهتمام است، ما به نحوه ایجاد یک نوار لغزنده محتوای زیبا نگاه کرده ایم
HTML CSSو جاوا اسکریپت همچنین یاد گرفتید که چگونه برخی تغییرات را برای بهبود عملکرد و فعال کردن تغییرات خودکار بلوک محتوا تنظیم کنید.
در حالی که خود اسلایدر با کدهای زیادی تعریف نشده است، درک مفاهیم پشت آن احتمالا مدتی طول خواهد کشید. من پیوندهایی را در مقاله به منابع دیگری قرار داده ام که موضوعاتی را پوشش می دهد که من فقط به صورت سطحی به آنها اشاره کرده ام. وقتی برای این کار وقت دارید می توانید آنها را بخوانید.
نوار لغزنده محتوا در اشکال و اندازه های مختلف وجود دارد. برخی از چندین سطح تشکیل شده‌اند که در آن محتوا را می‌توان به صورت عمودی و افقی تغییر داد.
برخی از لغزنده ها حاوی محتوای تراز عمودی با بلوک هایی هستند که روی هم چیده شده اند. اگر کاملا فعال هستید و می خواهید به جای انتقال از CSS استفاده کنید
اجازه دهید با گفتن این نکته شروع کنم که این مقاله برای صحبت در مورد نحوه ایجاد اسلایدر اسکرول تصویر برای صفحات وب نوشته شده است. این مقاله به هیچ وجه ماهیت آموزشی ندارد، بلکه تنها به عنوان نمونه ای از نحوه اجرای موضوع مورد توجه ما عمل می کند. شما می توانید از کد ارائه شده در این مقاله به عنوان نوعی الگو برای پیشرفت های مشابه استفاده کنید؛ امیدوارم بتوانم اصل مطالبی را که نوشته ام با جزئیات کافی و در دسترس به خواننده منتقل کنم.
و اکنون به این نکته، چندی پیش نیاز به نصب یک نوار لغزنده در یک سایت داشتم، اما پس از جستجوی اینترنت برای اسکریپت های آماده، چیز مفیدی پیدا نکردم، زیرا برخی آنطور که من نیاز داشتم کار نمی کردند، در حالی که برخی دیگر اصلاً بدون خطا در کنسول شروع به کار نکردند. به نظر من استفاده از پلاگین های jQuery برای نوار لغزنده خیلی غیر جالب به نظر می رسید، زیرا ... اگرچه این مشکل را حل می کند، اما من هیچ درکی از نحوه عملکرد این مکانیسم نخواهم داشت و استفاده از یک پلاگین فقط برای یک اسلایدر چندان بهینه نیست. من همچنین واقعاً حوصله درک اسکریپت‌های کج را نداشتم، بنابراین تصمیم گرفتم اسکریپت خودم را برای نوار لغزنده بنویسم، که در صورت نیاز آن را علامت‌گذاری کنم.
ابتدا باید در مورد منطق خود اسلایدر تصمیم بگیریم و سپس به پیاده سازی بپردازیم.در این مرحله درک روشن از عملکرد این مکانیزم بسیار مهم است، زیرا بدون آن نمی توانیم کدی بنویسیم که دقیقاً به روشی که ما کار می کنیم کار کند. خواستن
شی اصلی ما viewport خواهد بود، یعنی بلوکی که در آن می‌بینیم که تصاویرمان چگونه می‌چرخند، در آن یک اسلایدراپر خواهیم داشت، این بلوک ما خواهد بود که شامل تمام تصاویر ردیف‌شده در یک خط است و تغییر می‌کند. موقعیت آن در داخل خود درگاه نمایش 
در مرحله بعد، در طرفین داخل ویوپورت، به صورت عمودی در وسط، دکمه‌های برگشت و جلو وجود دارد، با کلیک کردن، ما نیز موقعیت اسلاید را نسبت به ویوپورت تغییر می‌دهیم و در نتیجه باعث ایجاد اثر اسکرول در میان تصاویر می‌شویم. و در نهایت، آخرین شی، دکمه های ناوبری ما خواهد بود که در پایین پنجره نمایش قرار دارد. 
وقتی روی آنها کلیک می کنیم، به سادگی به شماره سریال این دکمه نگاه می کنیم و دوباره با جابجایی Slidewrapper آن را به اسلاید مورد نیاز خود منتقل می کنیم (تغییر با تغییر خاصیت transform css انجام می شود که مقدار آن برابر خواهد شد. مدام محاسبه می شود).
من فکر می کنم منطق نحوه کار این کل بعد از آنچه در بالا گفتم باید واضح باشد، اما اگر هنوز در جایی سوء تفاهم ایجاد شد، در کد زیر همه چیز واضح تر می شود، فقط به کمی صبر نیاز دارید.
حالا بیایید بنویسیم! اول از همه، بیایید فایل فهرست خود را باز کنیم و نشانه گذاری مورد نیاز خود را در آنجا بنویسیم:
همانطور که می بینید، هیچ چیز پیچیده ای وجود ندارد، block-for-slider فقط به عنوان بلوکی عمل می کند که لغزنده ما در آن قرار می گیرد، داخل آن خود پنجره نمایش است، که اسلایدوراپ ما در آن قرار دارد، همچنین یک لیست تودرتو، در اینجا به شرح زیر است. اسلایدها و img تصاویر داخل آنها هستند. لطفاً به این نکته توجه کنید که همه تصاویر باید یک اندازه یا حداقل نسبت داشته باشند، در غیر این صورت لغزنده کج به نظر می رسد، زیرا ابعاد آن به طور مستقیم به نسبت تصویر بستگی دارد.
اکنون باید به کل این موضوع را سبک سازی کنیم؛ معمولاً درباره سبک ها اظهار نظر خاصی نمی شود، اما تصمیم گرفتم همچنان توجه را به این موضوع جلب کنم تا در آینده سوءتفاهم پیش نیاید.
بدنه ( حاشیه: 0؛ بالشتک: 0؛ ) #block-for-slider (عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ حاشیه بالا: 100 پیکسل؛ ) #نمایش (عرض: 100%؛ نمایشگر: جدول؛ موقعیت: نسبی؛ سرریز: پنهان؛ -webkit-user-select: هیچ؛ -moz-user-select: هیچ؛ -ms-user-select: هیچ؛ -o-user-select: هیچ؛ کاربر-انتخاب: هیچ؛ ) #slidewrapper ( موقعیت: نسبی؛ عرض: محاسبه (100% * 4)؛ بالا: 0؛ سمت چپ: 0؛ حاشیه: 0؛ بالشتک: 0؛ -webkit-transition: 1s؛ -o-transition: 1s؛ انتقال: 1s؛ -webkit -عملکرد-زمان-انتقال: ease-in-out؛ -o-transition-timing-function: ease-in-out؛ transition-timing-function: ease-in-out؛ ) #slidewrapper ul, #slidewrapper li ( حاشیه : 0؛ padding: 0; ) #slidewrapper li ( عرض: calc(100%/4)؛ لیست سبک: هیچکدام؛ نمایشگر: درون خطی؛ شناور: سمت چپ؛ .slide-img (عرض: 100%؛ )
بیایید با block-for-slider شروع کنیم، این، دوباره، بلوک ما در صفحه است، که ما آن را به نوار لغزنده اختصاص می دهیم، ارتفاع آن به عرض آن و به نسبت تصویر ما بستگی دارد، زیرا Viewport کل عرض بلوک برای لغزنده را اشغال می کند ، سپس خود اسلاید همان عرض را دارد و بر این اساس ، تصویر داخل آن بسته به عرض ارتفاع خود را تغییر می دهد (نسبت ها حفظ می شوند). من این عنصر را در صفحه خود به صورت افقی در وسط قرار دادم، با 100 پیکسل تورفتگی از بالا، که موقعیت آن را برای مثال راحت تر می کند.
عنصر viewport، همانطور که قبلا ذکر شد، کل عرض block-for-slider ما را اشغال می کند، دارای ویژگی overflow:hidden است، این به ما امکان می دهد فید تصویر خود را پنهان کنیم، که فراتر از viewport گسترش می یابد. 
ویژگی CSS بعدی user-select:none است که به شما این امکان را می‌دهد تا با چند بار کلیک کردن روی دکمه‌ها از شر برجسته آبی عناصر لغزنده خلاص شوید.
با حرکت به سمت نوار لغزنده، چرا موقعیت: نسبی و نه مطلق؟ همه چیز بسیار ساده است، زیرا ... اگر گزینه دوم را انتخاب کنیم، با ویژگی viewport overflow:hidden، مطلقا چیزی برای ما ظاهر نمی شود، زیرا خود درگاه نمایش با ارتفاع نوار لغزنده تنظیم نمی شود، به همین دلیل ارتفاع: 0 خواهد داشت. چرا عرض اهمیت دارد و اصلاً چرا آن را تنظیم می کنیم؟ نکته این است که پهنای اسلایدهای ما برابر با 100% نمای پورت خواهد بود و برای ردیف کردن آنها به مکانی نیاز داریم که در آن قرار گیرند، بنابراین عرض اسلایدوراپر باید برابر با 100% عرض دید باشد. ضرب در تعداد اسلایدها (در مورد من، 4). در مورد transition و transition-timing-function، در اینجا 1s به این معنی است که تغییر موقعیت اسلایدور در عرض 1 ثانیه اتفاق می افتد و ما آن را مشاهده می کنیم، و ease-in-out نوعی انیمیشن است که ابتدا به آرامی پیش می رود و تا وسط سرعت می گیرد و سپس دوباره کاهش می یابد، در اینجا می توانید مقادیر را به صلاحدید خود تنظیم کنید.
بلوک بعدی از ویژگی ها، نوار لغزنده و فرزندانش را به صورت صفر تنظیم می کند، در اینجا نیازی به نظر نیست.
در مرحله بعد به اسلایدهای خود استایل می زنیم، عرض آنها باید برابر با عرض ویوپورت باشد، اما چون... آنها در یک نوار لغزنده هستند که عرض آن برابر است با عرض نمای در تعداد اسلایدها ضرب می شود، سپس برای به دست آوردن مجدد عرض نمای، باید 100٪ عرض اسلاید را بر تعداد اسلایدها تقسیم کنیم (در مورد من، دوباره، توسط 4). سپس آنها را با استفاده از display:inline به عناصر درون خطی تبدیل می کنیم و با افزودن ویژگی float:left، float را در سمت چپ قرار می دهیم. درباره list-style:none می‌توانم بگویم که از آن برای حذف نشانگر پیش‌فرض از li استفاده می‌کنم، در بیشتر موارد این یک نوع استاندارد است.
با slide-img همه چیز ساده است، تصویر تمام عرض اسلاید را اشغال می کند، اسلاید با ارتفاع آن تنظیم می شود، اسلایدوراف با ارتفاع اسلاید تنظیم می شود، و ارتفاع نما به نوبه خود مقدار ارتفاع را می گیرد. از نوار لغزنده، بنابراین ارتفاع نوار لغزنده ما به نسبت تصویر و اندازه بلوک ارائه شده برای نوار لغزنده بستگی دارد که قبلاً در مورد آن در بالا نوشتم.
فکر می‌کنم در این مرحله سبک‌ها را مشخص کرده‌ایم، بیایید فعلاً یک نمایش اسلاید ساده بدون دکمه درست کنیم، و بعد از اینکه مطمئن شدیم که به درستی کار می‌کند، آنها را اضافه و استایل می‌کنیم.
بیایید فایل js خود را که حاوی کد لغزنده است باز کنیم، فراموش نکنید که jQuery را متصل کنید، زیرا با استفاده از این فریم ورک خواهیم نوشت. ضمنا در زمان نگارش این مقاله از jQuery نسخه 3.1.0 استفاده می کنم. فایل با خود اسکریپت باید در انتهای تگ بدنه قرار گیرد، زیرا ما با عناصر DOM کار خواهیم کرد که ابتدا باید مقداردهی اولیه شوند.
در حال حاضر، ما باید چند متغیر را تعریف کنیم، یکی تعداد اسلایدهایی را که در یک نقطه زمانی خاص می بینیم در viewport ذخیره می کند، من آن را slideNow نامیدم، و دومی تعداد همین اسلایدها را ذخیره می کند. این تعداد اسلاید است.
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
متغیر slideNow باید روی مقدار اولیه 1 تنظیم شود زیرا هنگامی که صفحه بارگذاری می شود، بر اساس نشانه گذاری ما، اولین اسلاید را در ویوپورت خواهیم دید.
در slideCount تعداد عناصر فرزند slidewrapper را قرار می دهیم، همه چیز در اینجا منطقی است.
در مرحله بعد، شما باید یک تابع ایجاد کنید که مسئول تعویض اسلایدها از راست به چپ باشد، اجازه دهید آن را اعلام کنیم:
تابع nextSlide() ()
ما آن را در بلوک اصلی کد خود فراخوانی خواهیم کرد، که بعداً به آن خواهیم رسید، اما در حال حاضر به عملکرد خود خواهیم گفت که چه کاری باید انجام دهد:
تابع nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ($("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) other (translateWidth = -$("#viewport").width() * (slideNow)؛ $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)"، "-webkit- transform": "translate(" + translateWidth + "px, 0)"، "-ms-transform": "translate(" + translateWidth + "px, 0)"، )); slideNow++; ) )
ابتدا بررسی می کنیم که آیا در حال حاضر در آخرین اسلاید فید خود هستیم؟ برای انجام این کار، تعداد تمام اسلایدهای خود را با استفاده از $("#slidewrapper").children().length می گیریم و آن را با تعداد اسلاید خود بررسی می کنیم، اگر مساوی باشند، این بدان معناست که باید شروع به نشان دادن کنیم. فید دوباره، از 1 اسلاید، به این معنی که ما ویژگی تبدیل CSS اسلایدورپر را به translate(0, 0) تغییر می دهیم، بنابراین آن را به موقعیت اصلی خود منتقل می کنیم تا اولین اسلاید در میدان دید ما باشد، فراموش نکنیم در مورد –webkit و –ms برای نمایش مناسب بین مرورگرها (به مرجع خواص css. مراجعه کنید). پس از این، فراموش نکنید که مقدار متغیر slideNow را به روز کنید و به آن بگویید که اسلاید شماره 1 در نظر است: slideNow = 1;
همین شرط شامل بررسی این است که تعداد اسلایدی که می بینیم در تعداد اسلایدهای ما باشد، اما اگر به نحوی این مورد برآورده نشد، دوباره به اسلاید اول برمی گردیم.
اگر شرط اول برآورده نشد، پس این بدان معناست که ما در حال حاضر نه در آخرین اسلاید هستیم و نه در اسلاید ناموجود، یعنی باید به اسلاید بعدی سوئیچ کنیم، این کار را با جابجایی لغزنده به سمت چپ انجام خواهیم داد. با مقدار برابر با عرض viewport، تغییر مجدد از طریق ویژگی translate آشنا اتفاق می‌افتد، مقدار آن برابر با "translate(" + translateWidth + "px, 0)" است، که translateWidth فاصله‌ای است که توسط آن نوار لغزنده جابجا شده است. به هر حال، بیایید این متغیر را در ابتدای کد خود اعلام کنیم:
var translateWidth = 0;
پس از انتقال به اسلاید بعدی، اجازه دهید به slideNow خود بگوییم که اسلاید بعدی را می بینیم: slideNow++;
در این مرحله، برخی از خوانندگان ممکن است تعجب کنند: چرا $("#viewport").width() را با متغیری مانند slideWidth جایگزین نکردیم تا همیشه عرض اسلاید خود را در اختیار داشته باشیم؟ پاسخ بسیار ساده است، اگر سایت ما تطبیقی باشد، بر این اساس، بلوک اختصاص داده شده برای نوار لغزنده نیز تطبیقی است، بر این اساس می توانیم بفهمیم که هنگام تغییر اندازه عرض پنجره بدون بارگیری مجدد صفحه (به عنوان مثال، روشن کردن تلفن سمت آن)، عرض درگاه دید تغییر خواهد کرد، و بر این اساس، عرض یک اسلاید تغییر خواهد کرد. در این حالت، نوار لغزنده ما به مقدار عرضی که در ابتدا بود منتقل می‌شود، به این معنی که تصاویر به صورت قسمتی نمایش داده می‌شوند یا اصلاً در ویوپورت نمایش داده نمی‌شوند. با نوشتن $("#viewport").width() به‌جای slideWidth در تابع خود، آن را مجبور می‌کنیم تا هر بار که اسلایدها را تغییر می‌دهیم، عرض نمای درگاه را محاسبه کند، در نتیجه اطمینان حاصل می‌کنیم که وقتی عرض صفحه به شدت تغییر می‌کند، به سمت صفحه حرکت می‌کند. اسلاید مورد نیاز ما
با این حال، ما یک تابع نوشته ایم، اکنون باید آن را پس از یک بازه زمانی مشخص فراخوانی کنیم، همچنین می توانیم فاصله را در یک متغیر ذخیره کنیم تا اگر بخواهیم آن را تغییر دهیم، فقط یک مقدار را در کد تغییر دهیم:
var slideInterval = 2000;
زمان در js بر حسب میلی ثانیه نشان داده شده است.
حالا بیایید ساختار زیر را بنویسیم:
$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));
همه چیز در اینجا نمی تواند ساده تر باشد؛ از طریق ساختار $(document).ready(function () ()) می گوییم که اقدامات زیر باید پس از بارگیری کامل سند انجام شوند. بعد، ما به سادگی تابع nextSlide را با فاصله ای برابر با slideInterval با استفاده از تابع setInterval داخلی فراخوانی می کنیم.
پس از تمام مراحلی که در بالا انجام دادیم، نوار لغزنده ما باید به خوبی بچرخد، اما اگر مشکلی پیش بیاید، ممکن است مشکل یا در نسخه jQuery یا اتصال نادرست هر فایلی باشد. همچنین نیازی به حذف این موضوع نیست که ممکن است در جایی از کد خطا کرده باشید، بنابراین من فقط می توانم به شما توصیه کنم که همه چیز را دوباره بررسی کنید. 
در ضمن، بیایید جلو برویم، تابعی مانند توقف اسکرول هنگام نگه داشتن مکان نما به نوار لغزنده خود اضافه کنیم. برای این کار باید مورد زیر را در بلوک اصلی کد (داخل $(document).ready( بنویسیم. ساختار تابع () ()):
$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
برای شروع تجزیه و تحلیل این کد، باید بدانیم switchInterval چیست. اولاً، این متغیری است که فراخوانی دوره ای را به تابع nextSlide ذخیره می کند، به زبان ساده، ما این خط کد را داریم: setInterval(nextSlide, slideInterval); ، به این تبدیل شد: switchInterval = setInterval(nextSlide, slideInterval); . پس از این دستکاری ها، بلوک اصلی کد ما به شکل زیر درآمد:
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval)؛ $("#viewport").hover(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval); )); ));
در اینجا من از رویداد شناور استفاده می‌کنم که به معنای «در شناور» است، این رویداد به من امکان می‌دهد لحظه‌ای را که مکان‌نما را روی یک شی، در این مورد، درگاه دید، ردیابی کنم.
بعد از ماوس کردن، بازه‌ای را که در پرانتز نشان می‌دهم پاک می‌کنم (این switchInterval ما است)، سپس، با کاما از هم جدا شده، می‌نویسم وقتی مکان‌نما را به عقب برمی‌گردانم، چه کاری انجام خواهم داد، در این بلوک دوباره switchInterval خود را به یک دوره‌ای اختصاص می‌دهم. تابع nextSlide را فراخوانی کنید.
حالا، اگر تست کنیم، می‌توانیم ببینیم که لغزنده ما به شناور شدن چگونه واکنش نشان می‌دهد و از تغییر اسلاید جلوگیری می‌کند.
اکنون زمان اضافه کردن دکمه ها به نوار لغزنده است، بیایید با دکمه های جلو و عقب شروع کنیم.
اول از همه، بیایید آنها را علامت گذاری کنیم:
در ابتدا، این نشانه گذاری ممکن است نامفهوم باشد، بلافاصله می گویم که من این دو دکمه را در یک div با کلاس prev-next-btns فقط برای راحتی شما پیچیده کردم، لازم نیست این کار را انجام دهید، نتیجه نمی شود تغییر دهید، اکنون سبک هایی را به آنها اضافه می کنیم و همه چیز درست می شود، واضح است:
#prev-btn، #next-btn ( موقعیت: مطلق؛ عرض: 50 پیکسل؛ ارتفاع: 50 پیکسل؛ رنگ پس‌زمینه: #fff؛ شعاع حاشیه: 50%؛ بالا: calc(50% - 25 پیکسل؛ ) #قبلی- btn:hover، #next-btn:hover ( مکان نما: اشاره گر؛ ) #prev-btn ( چپ: 20 پیکسل؛ ) #next-btn ( راست: 20 پیکسل؛ )
ابتدا دکمه‌های خود را با استفاده از position:absolute قرار می‌دهیم، بدین ترتیب موقعیت آنها را آزادانه در نمای خود کنترل می‌کنیم، سپس اندازه‌های این دکمه‌ها را مشخص می‌کنیم و با استفاده از مرز-رادیوس گوشه‌ها را گرد می‌کنیم تا این دکمه‌ها به دایره تبدیل شوند. رنگ آنها سفید خواهد بود، یعنی #fff، و آفست آنها از لبه بالایی نمای پورت برابر با نیمی از ارتفاع این دریچه منهای نیمی از ارتفاع خود دکمه (در مورد من 25 پیکسل) خواهد بود، بنابراین ما می توانیم آنها را به صورت عمودی در مرکز قرار دهید. در مرحله بعد، مشخص می کنیم که وقتی ماوس را روی آنها می گذاریم، مکان نما ما به یک اشاره گر تغییر می کند و در نهایت به دکمه های خود به صورت جداگانه می گوییم که باید 20 پیکسل از لبه های خود فاصله داشته باشند تا بتوانیم آنها را به شکلی که مناسب خودمان است ببینیم. .
مجدداً، می‌توانید عناصر صفحه را به روشی که می‌خواهید استایل دهید، من فقط نمونه‌ای از سبک‌هایی را که تصمیم گرفتم استفاده کنم، می‌آورم.
پس از یک ظاهر طراحی، نوار لغزنده ما باید چیزی شبیه به این باشد: 
در مرحله بعد، دوباره به فایل js خود بروید، جایی که عملکرد دکمه های خود را شرح خواهیم داد. خوب، بیایید یک تابع دیگر اضافه کنیم، اسلاید قبلی را به ما نشان می دهد:
تابع prevSlide() ( if (slideNow == 1 || slideNow slideCount) (translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + translateWidth + "px, 0)"، "-webkit-transform": "translate(" + translateWidth + "px, 0)"، "-ms-transform": "translate(" + translateWidth + "px, 0)"، ))؛ slideNow = slideCount؛ ) else (translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + translateWidth + "px, 0)"، "-webkit-transform": "translate(" + translateWidth + "px, 0)"، "-ms-transform": "translate( " + translateWidth + "px, 0)"، )); slideNow--; ))
این prevSlide نامیده می شود و تنها زمانی فراخوانی می شود که prev-btn کلیک شود. ابتدا بررسی می کنیم که آیا در اسلاید اول هستیم یا خیر، در اینجا همچنین بررسی می کنیم که آیا slideNow ما از محدوده واقعی اسلایدهای ما فراتر رفته است یا خیر و اگر هر یک از شرایط درست باشد، با حرکت دادن اسلاید به اسلاید آخر حرکت می کنیم. به ارزشی که نیاز داریم ما این مقدار را با استفاده از فرمول محاسبه می کنیم: (عرض یک اسلاید) * (تعداد اسلایدها - 1)، همه اینها را با علامت منفی می گیریم، زیرا ما آن را به سمت چپ منتقل می کنیم، معلوم می شود که Viewport اکنون آخرین اسلاید را به ما نشان می دهد. در انتهای این بلوک نیز باید به متغیر slideNow بگوییم که آخرین اسلاید اکنون در دید ما است.
اگر در اسلاید اول نباشیم، باید 1 به عقب برگردیم، برای این کار مجدداً ویژگی transform slidewrapper را تغییر می دهیم. فرمول این است: (عرض یک اسلاید) * (تعداد اسلاید فعلی - 2) ، دوباره همه اینها را با علامت منفی می گیریم. اما چرا -2 و نه -1، باید فقط 1 اسلاید به عقب برگردیم؟ واقعیت این است که اگر مثلاً در اسلاید دوم قرار داشته باشیم، متغیر x از ویژگی transform:translate(x,0) اسلاید راپر ما از قبل برابر با عرض یک اسلاید است، اگر به آن بگوییم که نیاز داریم. برای کم کردن 1 از تعداد اسلاید فعلی، سپس دوباره یک اسلاید دریافت می کنیم که با آن اسلاید ورپیپر قبلاً جابجا شده است، بنابراین باید همان عرض های دید را با 0 تغییر دهیم، که به معنای در slideNow - 2 است.
اکنون فقط باید این خطوط را به بلوک اصلی کد اضافه کنیم:
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
در اینجا ما به سادگی پیگیری می کنیم که آیا دکمه های ما کلیک شده اند یا خیر، و در این مورد ما توابع مورد نیاز خود را فراخوانی می کنیم، همه چیز ساده و منطقی است.
حالا بیایید دکمه های پیمایش اسلاید را اضافه کنیم و دوباره به نشانه گذاری برگردیم:
همانطور که می بینید، یک لیست تودرتو در داخل viewport ظاهر شده است، بیایید به آن شناسه nav-btns بدهیم، داخل آن دکمه های ناوبری ما هستند، کلاس slide-nav-btn را به آنها اختصاص می دهیم، با این حال، می توانیم با نشانه گذاری، بیایید به سبک ها برویم:
#nav-btns ( موقعیت: مطلق؛ عرض: 100%؛ پایین: 20 پیکسل؛ بالشتک: 0؛ حاشیه: 0؛ تراز متن: مرکز؛ ) .slide-nav-btn ( موقعیت: نسبی؛ نمایشگر: بلوک درون خطی؛ فهرست سبک: هیچکدام؛ عرض: 20 پیکسل؛ ارتفاع: 20 پیکسل؛ رنگ پس‌زمینه: #fff؛ شعاع حاشیه: 50 درصد؛ حاشیه: 3 پیکسل؛ .slide-nav-btn:hover ( مکان‌نما: اشاره‌گر؛ )
ما به بلوک nav-btns که دکمه‌های ما در آن قرار دارند، ویژگی موقعیت:absolute را می‌دهیم تا نما را از نظر ارتفاع کشیده نشود، زیرا slidewrapper دارای ویژگی position:relative است، عرض را روی 100% تنظیم می کنیم تا دکمه ها را به صورت افقی نسبت به viewport با استفاده از text-align:center در مرکز قرار دهیم، سپس با استفاده از ویژگی پایین به بلوک خود اطلاع می دهیم که باید در فاصله باشد. 20 پیکسل از لبه پایین.
با دکمه ها همان کار را با اسلایدها انجام می دهیم، اما اکنون به آنها display:inline-block می دهیم، زیرا با display:inline به عرض و ارتفاع پاسخ نمی دهند زیرا در یک بلوک کاملاً موقعیت قرار دارند. بیایید آنها را سفید کنیم و با استفاده از شعاع مرزی آشنا، شکل یک دایره به آنها بدهیم. هنگامی که ماوس را روی آنها می گذاریم، ظاهر مکان نما را برای نمایش معمول تغییر می دهیم.
حالا بیایید به قسمت jQuery برسیم:
ابتدا یک متغیر navBtnId را اعلام می کنیم که فهرست دکمه ای را که کلیک کردیم ذخیره می کند:
var navBtnId = 0;
$(".slide-nav-btn"). روی (function() ( navBtnId = $(this).index() کلیک کنید، اگر (navBtnId + 1 != slideNow) (translateWidth = -$("#viewport"). width() * (navBtnId)؛ $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)"، "-webkit-transform": "translate(" + translateWidth + "px, 0)"، "-ms-transform": "translate(" + translateWidth + "px, 0)"، )); slideNow = navBtnId + 1; ) );
در اینجا، وقتی روی slide-nav-btn خود کلیک می کنیم، تابعی را فراخوانی می کنیم که اول از همه به متغیر navBtnId شاخص دکمه کلیک شده، یعنی شماره سریال آن را اختصاص می دهد، زیرا شمارش معکوس از صفر شروع می شود، پس اگر روی دکمه دوم کلیک کنید، سپس به navBtnId مقدار 1 نوشته می شود. در مرحله بعد، یک بررسی را انجام می دهیم که در آن یک عدد را به شماره سریال دکمه اضافه می کنیم تا عددی به دست آوریم که انگار شمارش معکوس نه از 0، بلکه از 1 شروع شده است. این عدد را با تعداد اسلاید فعلی مقایسه کنید، اگر مطابقت داشته باشند، هیچ اقدام عملی انجام نمی دهیم، زیرا اسلاید مورد نظر از قبل در ویوپورت است.
اگر اسلاید مورد نیاز ما در قسمت viewport نباشد، فاصله ای را که باید اسلاید راپر را به سمت چپ حرکت دهیم محاسبه می کنیم، سپس مقدار خاصیت تبدیل CSS را برای ترجمه تغییر می دهیم (همان فاصله در پیکسل، 0). ). ما قبلاً این کار را بیش از یک بار انجام داده ایم، بنابراین نباید سؤالی وجود داشته باشد. در پایان، مجدداً مقدار اسلاید فعلی را در متغیر slideNow ذخیره می کنیم؛ این مقدار را می توان با افزودن یک به شاخص دکمه کلیک شده محاسبه کرد.
این همه است، در واقع، اگر چیزی واضح نیست، من یک پیوند به jsfiddle می گذارم، جایی که تمام کدهای نوشته شده در مطالب ارائه می شود.
با تشکر از توجه شما!
برچسب ها:
- اسلایدر جی کوئری
- css
- انیمیشن css3
- html
