نوار لغزنده پاسخگو Html5. چگونه یک اسلایدر css3 واکنش گرا بسازیم؟ از جمله فایل های css و js

4 نوامبر 2019 ورودی به روز شده است

یوری نمتس

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

در اینجا چیزی است که من در یک وب سایت در مورد لغزنده پیدا کردم:

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

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

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

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

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

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

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

موارد پوشش داده شده در مقاله

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

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

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

افزودن گالری آسان است

برای شروع، فقط باید کد منبع را از طریق لینک مستقیم از سایت من دانلود کنید. از آرشیو، باید پوشه های img، css و js را در ریشه سایت آپلود کنید.

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

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

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

arrow drop arrow long navarrow

و سپس خود اسلایدر

خاطرات و افکار 1 اتوماسیون پرسه تصادفی 2 ماشین کلمات خودسرانه 3 همزیستی تنها راهنما قلب شماست رانش خالی از سکنه 4 بلامیو سرگرمی واگرایی 5 مراتع امیدها و رویاها 6 تمرکز 1 اتوماسیون درخت باید دوست شما باشد اگر می خواهید او را نقاشی کنید فقط اجازه دهید این اتفاق بیفتد. ما فقط اجازه می دهیم این جریان مستقیماً از ذهن ما خارج شود. فقط استراحت کنید و بگذارید جریان یابد. به همین راحتی. بیایید چند ابر کوچک شاد را در دنیای خود قرار دهیم. این یک عکس بسیار سرد است، ممکن است مجبور باشم بروم کتم را بیاورم. نزدیک است که من را یخ بزند. می تواند بسیار انجام دهد. در یک زمان روی یک چیز کار کنید. "فریب نشوید - ما زمان زیادی داریم. احساسات خود را در آن قرار دهید، قلبتان، این دنیای شماست". این درختان بسیار سرگرم کننده هستند. من با آنها شروع می کنم و به سختی متوقف می شوم. 2 ماشین‌ها این احتمالاً بزرگ‌ترین اتفاقی است که در زندگی من رخ می‌دهد، ما سعی نمی‌کنیم چیزی را به شما یاد بدهیم که کپی کنید. ما فقط اینجا هستیم تا تکنیکی را به شما آموزش دهیم، سپس به شما اجازه دهیم در دنیا رها شوید. حالا این ابر را پر می کنیم، ما اینجا جز درختان شاد نداریم. اجازه دهید دوباره این کار را انجام دهیم. از آنچه می بینید استفاده کنید، برنامه ریزی نکنید. بیایید "اینجا بالا برویم، و شروع کنیم به تفریح ​​کردن، کمترین مقدار می تواند خیلی کارها را انجام دهد. هر بار روی یک چیز کار کنید. فریفته نشوید - ما زمان زیادی داریم. احساساتت را در آن بگذار، قلبت، این دنیای توست. این درختان بسیار سرگرم کننده هستند. من با آنها شروع می کنم و به سختی متوقف می شوم. کمی تفریح در یک زمان روی یک چیز کار کنید. "فریب نشوید - ما زمان زیادی داریم. احساسات خود را در آن قرار دهید، قلبتان، این دنیای شماست". این درختان بسیار سرگرم کننده هستند. من با آنها شروع می کنم و به سختی متوقف می شوم. اما ما "هنوز آنجا نیستیم، بنابراین لازم نیست نگران آن باشیم. حالا بیایید چند ابر کوچک شاد را اینجا قرار دهیم. چه شیطان. یک رنگ نازک به یک رنگ غلیظ می چسبد. من می خواهم کمی رنگ را با هم مخلوط کنم. 4 Bellamio تنها پیش نیاز این است که شما را خوشحال می کند ببینید. گوشه براش را می گیریم و می گذاریم پشت و رو بازی کند. این برنامه ریزی نشده است، واقعاً اتفاق می افتد. من یک جور نرمی هستم، نمی‌توانستم بامبی را جز با دوربین عکاسی کنم. حدس می‌زنم من "کمی عجیب و غریب هستم. دوست دارم با درختان و حیوانات صحبت کنم. "اشکالی ندارد؛ من از بسیاری از مردم بیشتر سرگرم هستم. امروز با ابرها بازی خواهیم کرد. آیا نمی دانستی که اینقدر قدرت دارید؟ می توانید کوه ها را جابجا کنید. شما می توانید هر کاری انجام دهید. بیایید اینجا برویم و شروع به تفریح ​​کنیم. در یک زمان روی یک چیز کار کنید. "فریب نشوید - ما زمان زیادی داریم. احساسات خود را در آن قرار دهید، قلبتان، این دنیای شماست". این درختان بسیار سرگرم کننده هستند. من با آنها شروع می کنم و به سختی متوقف می شوم. 5 مراتع بیایید اینجا بالا برویم و شروع به تفریح ​​کنیم بنابراین اغلب از آب جاری اجتناب می کنیم و آب روان بسیار سرگرم کننده است. یک درخت بزرگ و قوی نیاز به ریشه های قوی قوی دارد. استیو بازتاب می‌خواهد، پس بیایید به او بازتاب دهیم. لازم نیست متعهد باشیم. ما فقط اینجا بازی می کنیم. ساختن تمام آن کرکی های کوچکی که در ابرها زندگی می کنند. بیایید "اینجا بالا برویم، و شروع کنیم به تفریح ​​کردن، کمترین مقدار می تواند خیلی کارها را انجام دهد. هر بار روی یک چیز کار کنید. فریفته نشوید - ما زمان زیادی داریم. احساسات خود را در آن قرار دهید، قلبتان، این دنیای شماست. این درختان بسیار سرگرم کننده هستند. من با آنها شروع به کار کردم و متوقف کردن آن برایم سخت است. حالا بیایید چند ابر کوچک شاد را در اینجا قرار دهیم. چه شیطان. یک رنگ نازک به رنگ غلیظ می چسبد. من "قرار دارم کمی رنگ را با هم ترکیب کنم. ما از Van Dyke Brown، Permanent Red، و کمی آبی پروس استفاده خواهیم کرد. بیایید به اینجا برویم و شروع به سرگرمی کنیم. کمترین مقدار می تواند این کار را انجام دهد. بسیار در یک زمان روی یک چیز کار کنید. "فریب نشوید - ما زمان زیادی داریم. احساسات خود را در آن قرار دهید، قلبتان، این دنیای شماست". این درختان بسیار سرگرم کننده هستند. من با آنها شروع می کنم و به سختی متوقف می شوم.

همین. لغزنده آماده است! موفق باشید در کار

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WOW Slider یک نوار لغزنده عکس جی کوئری پاسخگو با جلوه های بصری شگفت انگیز (Domino, Rotate, Blur, Flip & Flash, Flyout, Blinds) و قالب های حرفه ای است.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TimeView - نمایش زمان

RadioBut - دکمه های زیر اسلاید برای پیمایش سریع. مقدار پیش فرض درست است، اگر از false استفاده کنید، دکمه ها ناپدید می شوند.

حالا بیایید شروع کنیم! بیایید فایل index.htm را ایجاد و باز کنیم

در کد ارائه شده، همانطور که می بینیم، هیچ چیز پیچیده ای وجود ندارد، slider-wrap موقعیت کلی را تعیین می کند و نوار لغزنده را تا وسط صفحه تراز می کند. پارامتر Active-slide اندازه و ارتفاع تصویر را با توجه به طول آن تنظیم می کند. و نوار لغزنده فقط تصویر فعال را نشان می دهد.

حالا بیایید فایل style.css را ایجاد و باز کنیم و نشانه گذاری مورد نیاز خود را در آنجا بنویسیم:

آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); بدنه ( رنگ: #4f4f5a؛ فونت-خانواده: "Roboto"، sans-serif; اندازه قلم: 16 پیکسل؛ بالشتک: 0؛ حاشیه: 0؛ ) #slider-wrap( حداکثر عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ margin-top: 80px; ) #active-slide ( عرض: 100%؛ نمایش: جدول؛ موقعیت: نسبی؛ سرریز: پنهان؛ -webkit-user-select: هیچ؛ -moz-user-select: هیچ؛ -ms- user-select: هیچ؛ -o-user-select: هیچ؛ کاربر-انتخاب: هیچ، ؛ padding: 0؛ -webkit-transition: 1s؛ -o-transition: 1s؛ transition: 1s؛ -webkit-transition-timing-function: ease-in-out؛ -o-transition-timing-function: ease-in -out؛ انتقال-زمان-عملکرد: ease-in-out؛) .slide( عرض: calc(100%/4)؛ لیست سبک: هیچکدام؛ نمایش: درون خطی؛ شناور: سمت چپ؛ .slide img (عرض: 100%؛ ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( حاشیه:2px;نمایش:inline-block;عرض:16px؛ ارتفاع:16px؛ سرریز :hidden;text-indent:-9999px;background:url(radioBg.png) مرکز پایین بدون تکرار; ) .Radio-But .ctrl-select:sover ( مکان نما:نشانگر؛ موقعیت پس زمینه: مرکز مرکز؛ ) .Radio-But .ctrl-select.active (پس زمینه-موقعیت:مرکز بالا؛ ) #پیش-دکمه، #دکمه بعدی (نمایش :block؛ عرض: 40 پیکسل؛ ارتفاع: 100 درصد؛ موقعیت: مطلق؛ بالا: 0؛ سرریز: پنهان؛ تورفتگی متن: -999 پیکسل؛ پس‌زمینه: url ("arrowBg.png") مرکز چپ بدون تکرار؛ کدورت: 0.5 ; z-index:3; outline:none !important; ) #prewbutton ( چپ:10px; ) #nextbutton (راست:10px؛ پس‌زمینه:url(arrowBg.png) مرکز راست بدون تکرار؛ ) #prewbutton:hover, # nextbutton:hover ( opacity:1; )

در ویژگی Slider-wrap style، عرض را روی حداکثر طول تصاویر خود تنظیم کنید.

در ویژگی style #slider ( width: calc(100% * 4); ) و .slide ( width: calc(100%/4); ) تعداد تصاویر را در نوار لغزنده خود مشخص کنید. در مثال ما 4 مورد وجود دارد.

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

حالا بیایید فایل slider.js خود را ایجاد و باز کنیم که حاوی کد اسلایدر است. فراموش نکنید که کتابخانه jQuery را نیز اضافه کنید.

$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = تابع (پیکان) (clearTimeout(slideTime)؛ if(فلش == "بعدی")( if(slideNum == تعداد اسلاید) (slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) other if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider". ) * (slideNum -1)؛ $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" .removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("") .prependTo ("#active-slide"); $("#nextbutton").click(function()( animSlide("next"); return false; )) $("#prewbutton").click(function()( animSlide("prew"); return false; ) ) var adderSpan = ""; $(".slide").each(function(index) (adderSpan += "" + index + ""; )); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function()( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); varpause = نادرست; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide("next"))، TimeView);) ) $("#slider-wrap").hover(function()( clearTimeout(slideTime)؛ pause = true;), function()(pause = false; rotator(); )); varclick = false; varprevX; $(".slide").mousedown(function(e)( کلیک کردن = true; prevX = e.clientX; )); $(".slide").mouseup(function() ( کلیک کردن = false; )); $(document).mouseup(function()( کلیک کردن = false; )); $(".slide").mousemove(function(e)( if(با کلیک == true) (if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew")؛ clearTimeout(slideTime); ) کلیک کردن = false; )))) $(".slide").hover().css("مکان نما"، "اشاره گر"); rotator(); ))؛

تابع animSlide سه نوع مقدار را می پذیرد: next، prew، یک مقدار عددی. پارامتر بعدی اسلاید بعدی را تغییر می دهد، prew اسلاید قبلی را برمی گرداند و مقدار عددی اسلاید خاصی است که از طریق دکمه رادیویی زیر اسلاید انتخاب شده است.

نوار لغزنده ارائه شده از تصاویری از منبع وب https://pixabay.com/ استفاده می کند.

مجموعه ای از نمونه های کد لغزنده HTML و CSS رایگان: کارت، مقایسه، تمام صفحه، پاسخگو، ساده، و غیره. به روز رسانی مجموعه ژوئن 2018. 7 مورد جدید.

مجموعه‌ای از صفحه‌های ورودی در HTML/CSS/JS. یک آزمایش شخصی با لایه‌بندی آیکون‌های PNG، انتقال‌های CSS3 و flexbox.

اسلایدر کارت اطلاعات HTML، CSS و جاوا اسکریپت.
ساخته اندی ترن
23 نوامبر 2015

نوار لغزنده عکس در مرورگرهای دسکتاپ و موبایل کار می کند.
ساخته شده توسط Taron
29 سپتامبر 2014

یک نوار لغزنده مقایسه تصویر ساده و تمیز، کاملاً پاسخگو و آماده لمسی که با CSS و jQuery ساخته شده است.

اسلایدر قبل و بعد فقط با html و css.

وانیل JS، مینیمال، زیبا به نظر می رسد.
ساخته شده توسط Huw
3 جولای 2017

یک عنصر اسلایدر "Split-screen" با جاوا اسکریپت.

یک آزمایش کوچک برای یک نوار لغزنده قبل و بعد همه در داخل یک SVG. پوشاندن آن را بسیار ساده می کند. از آنجایی که همه آن SVG است، تصاویر و زیرنویس ها به خوبی در کنار هم قرار می گیرند. پلاگین های Draggable و ThrowProps GreenSock برای کنترل لغزنده استفاده شد.
ساخته شده توسط کریگ روبلوسکی
17 آوریل 2017

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

نوار لغزنده مقایسه تصویر پاسخگو با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط Ege Gorgulu
3 آگوست 2016

نوار لغزنده مقایسه قبل و بعد ویدیوی HTML5، CSS3 و جاوا اسکریپت.
ساخته دادلی استوری
24 آوریل 2016

یک نوار لغزنده قابل کشیدن برای مقایسه سریع 2 تصویر با CSS3 و jQuery.
ساخته شده توسط CodyHouse
15 سپتامبر 2014

نوار لغزنده ساده بر اساس ورودی های رادیویی. 100٪ HTML + CSS خالص. با کلیدهای جهت نما نیز کار می کند.

پاسخگو: بله

وابستگی ها: -

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

نوار لغزنده منظر افقی با Swiper.js.

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

نوار لغزنده تصویر قهرمان تمام صفحه (موضوع پانل های کش رفتن) با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط Tobias Bogliolo
25 ژوئن 2017

یک چیز تعامل اسلایدر با استفاده از جلوه های سرعت و سرعت (بسته UI) برای بهبود انیمیشن. انیمیشن از طریق کلیدهای جهت‌نما، کلیک ناوبری یا جک اسکرول فعال می‌شود. این نسخه شامل مرزها به عنوان بخشی از تعامل است.
ساخته استفن اسکاف
11 مه 2017

نوار لغزنده ساده در سبک مینیمال برای نشان دادن تصاویر. بخشی از تصویر در هر اسلاید ظاهر می شود.
ساخته ناتان تیلور
22 ژانویه 2017

این چیز بسیار آسان قابل تنظیم است. می توانید با خیال راحت فونت، اندازه فونت، رنگ فونت، سرعت انیمیشن را تغییر دهید. اولین حرف یک رشته جدید در آرایه در JS در یک اسلاید جدید ظاهر می شود. آسان برای ایجاد (یا حذف) یک اسلاید جدید: 1. اضافه کردن شهر جدید در آرایه در JS. 2. تعداد متغیر اسلایدها را تغییر دهید و یک تصویر جدید در لیست scss در CSS قرار دهید.
ساخته روسلان پیوواروف
8 اکتبر 2016

این لغزنده اریب با پیمایش بر اساس JS خالص و CSS (بدون کتابخانه).
ساخته ویکتور بلوزیوروف
3 سپتامبر 2016

یک انیمیشن اسلایدر با طراحی پوکمون.
ساخته شده توسط Pham Mikun
18 آگوست 2016

نوار لغزنده HTML، CSS و جاوا اسکریپ با انیمیشن پیچیده و متن زاویه دار نیمه رنگ.
ساخته روسلان پیوواروف
13 جولای 2016

افکت اختلاف منظر اسلایدر با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط مانوئل مادیرا
28 ژوئن 2016

نوار لغزنده HTML، CSS و جاوا اسکریپت با افکت ریپل.
ساخته پدرو کاسترو
21 مه 2016

نوار لغزنده آشکار کننده مسیر کلیپ با HTML، CSS و جاوا اسکریپت.
ساخته نیکولای تالانوف
16 مه 2016

GSAP + نوار لغزنده با پیش نمایش اسلایدهای قبلی/ بعدی.
ساخته کارلو ویدک
27 آوریل 2016

نوار لغزنده تمام صفحه HTML، CSS و جاوا اسکریپت.
ساخته جوزف مارتوچی
28 فوریه 2016

نمونه اولیه اسلایدر کامل با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط Gluber Sampaio
6 ژانویه 2016

یک نمایش اسلاید تمام صفحه، نوعی واکنش‌گرا و متحرک با Greensocks TweenLite/Tweenmax.
ساخته شده توسط Arden
12 دسامبر 2015

نوار لغزنده تمام صفحه (GSAP Timeline) شماره 1 با HTML، CSS و جاوا اسکریپت.
ساخته دیاکو م.لطف اللهی
23 نوامبر 2015

نوار لغزنده HTML و CSS با جلوه های سفارشی.
ساخته نیکولای تالانوف
12 نوامبر 2015

نوار لغزنده تمام صفحه با اختلاف منظر با HTML، CSS و جاوا اسکریپت.
ساخته نیکولای تالانوف
12 نوامبر 2015

اثبات مفهوم لغزنده چرخان. از مسیر کلیپ و مقدار زیادی ریاضی استفاده می کند.
ساخته شده توسط تایلر جانسون
16 آوریل 2015

یک نوار لغزنده تمام صفحه CSS و jQuery با استفاده از translateX و نرمی translate3d!
ساخته جوزف
19 آگوست 2014

نوار لغزنده کدورت تصویر در HTML و CSS.

مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

پاسخگو: بله

وابستگی ها: -

این مثال نحوه ایجاد طرح بندی از اسلایدهایی که روی هم چیده شده اند را نشان می دهد (مخصوصاً برای انتقال محو ورود/خروج مفید است). بدون تنظیم ارتفاع و اجتناب از موقعیت: مطلق به دست می آید؛ بنابراین کاملاً انعطاف پذیر هستند و به راحتی در جریان عادی صفحه نگهداری می شوند.

مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

پاسخگو: بله

وابستگی ها: -

اسلایدر پاسخگو متحرک در HTML، CSS و جاوا اسکریپت.

مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

پاسخگو: بله

وابستگی ها: animate.css

فقط نوار لغزنده CSS با متن پوشانده شده.

مرورگرهای سازگار: کروم، اج (جزئی)، فایرفاکس، اپرا، سافاری

پاسخگو: بله

وابستگی ها: -

تصویر و محتوا با افکت اختلاف منظر.

گالری اسلاید فقط CSS.

مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

پاسخگو: بله

وابستگی ها: -

نوار لغزنده HTML/CSS خالص با نوار پیشرفت SVG دایره ای.

مرورگرهای سازگار: کروم، اج (جزئی)، فایرفاکس (جزئی)، اپرا، سافاری

پاسخگو: بله

وابستگی ها: font-wesome.css

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

یک نوار لغزنده / چرخ فلک تصویر Flexbox ساده که با جاوا اسکریپت وانیلی ساخته شده است.

این آزمایشی است که هر بار که یک اسلاید تغییر می‌کند، یک اثر تاری حرکت را شبیه‌سازی می‌کند. از فیلتر SVG Gaussian Blur و برخی از انیمیشن های فریم های کلیدی CSS بهره می برد. اگرچه این افکت برای درست کار کردن به جاوا اسکریپت نیاز ندارد، در این مثال جاوا اسکریپت فقط برای عملکرد لغزنده استفاده می شود.

اسلایدر انیمیشن جالب با JS.

این آزمایشی است که نشان می‌دهد چگونه الگوهای SVG می‌توانند به ما در ایجاد تصاویر ماسک‌مانند برای یک نوار لغزنده فقط CSS کمک کنند.

بررسی برخی از انتقال های لغزنده. نوار لغزنده با گزینه اختلاف منظر فعال است. بازی با فیلترهای CSS بیشتر اینجاست.
ساخته میرکو زوریچ
12 ژوئن 2017

نوار لغزنده ساده GSAP با چند انیمیشن ظریف.
ساخته شده توسط Goran Vrban
9 ژوئن 2017

رابط کاربری اسلایدر با HTML، CSS و جاوا اسکریپت.
ساخته مرگیم اوجکانی
6 ژوئن 2017

اسلایدر GSAP نسخه 2.
ساخته شده توسط Em An
4 مه 2017

یک نوار لغزنده گذار کوچک با استفاده از یک معامله کلاس اضافه ساده. باید زمان‌بندی‌ها را کمی صاف کنید و در مورد بهترین رویکرد برای تلفن همراه تصمیم بگیرید (فقط روی هم قرار دهید، رویدادهای لمسی را اضافه کنید، تصاویر را کامل بسازید، و غیره. از چرخ اسکرول (جک کردن اسکرول)، دکمه‌های ناوبری و کلیدهای پیکان پشتیبانی می‌کند. همچنین می‌تواند بسته‌بندی محتوا را افزایش دهد. تا تصاویر در حالت غیر متحرک پر شوند و این نیز بسیار جالب است.
ساخته استفن اسکاف
3 ژانویه 2017

از CSS حاشیه تصویر و مسیر کلیپ برای ایجاد افکت انیمیشن کشویی استفاده کنید.
ساخته امیلی هیمن
31 دسامبر 2016

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

اسلایدر بوم HTML، CSS.
ساخته شده توسط Nvagelis
29 اکتبر 2016

نوار لغزنده سه بعدی HTML، CSS و جاوا اسکریپت.
ساخته ادواردو آلگرینی
19 اکتبر 2016

اسلایدر کیک کوچک HTML و CSS با اسپرینکلز!
ساخته جیمی کولتر
14 اکتبر 2016

ساخته شده توسط mario's maselli
12 اکتبر 2016

کاوش انیمیشن UI شماره 2 با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط mario's maselli
22 سپتامبر 2016

کاوش انیمیشن UI شماره 3 با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط mario's maselli
22 سپتامبر 2016

اسلایدر تجارت الکترونیک نسخه 2.0 با HTML، CSS و جاوا اسکریپت.
ساخته پدرو کاسترو
17 سپتامبر 2016

نوار لغزنده تمیز HTML، CSS و جاوا اسکریپت با پس زمینه منحنی.
ساخته روسلان پیوواروف
13 سپتامبر 2016

کاوش انیمیشن UI شماره 1 با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط mario's maselli
8 سپتامبر 2016

از قدرت CSS لذت ببرید: بالا و پایین هر تصویر وسط و نوار لغزنده صفحه‌بندی شده با لایت باکس.
ساخته شده توسط Kseso
15 آگوست 2016

نوردهی دوگانه یک تکنیک عکاسی است که 2 تصویر مختلف را در یک تصویر ترکیب می کند.
ساخته میساکی ناکانو
3 آگوست 2016

اسلایدر با استفاده از کلیپ ویژگی CSS3.
ساخته پدرو کاسترو
1 مه 2016

نوار لغزنده CSS پاسخگو.
ساخته شده توسط geekwen
19 آوریل 2016

این یک آزمایش لغزنده ساده است که کلماتی با معانی زیبا را نشان می دهد که مستقیما قابل ترجمه نیستند. تمرکز: تایپوگرافی زیبا و انتقال ساده و در عین حال جذاب.
ساخته جو هری
5 آوریل 2016

ایده انیمیشن این است که مقدار مسیر کلیپ CSS را تغییر دهید، بنابراین یک جلوه ماسک ایجاد کنید.
ساخته شده توسط باکتی آل اکبر
31 مارس 2016

لغزنده نقطه با HTML، CSS و جاوا اسکریپت.
ساخته درک نگوین
16 مارس 2016

نوار لغزنده جلوه منشور با HTML، CSS و جاوا اسکریپت.
ساخته ویکتور
12 مارس 2016

گالری پس زمینه کشویی با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط Ron Gierlach
30 نوامبر 2015

راه حل کشویی HTML، CSS و جاوا اسکریپت.
ساخته شده توسط Jurgen Genser
30 سپتامبر 2015

یک نوار لغزنده محصول که توسط Sequence.js طراحی شده است. Sequence.js - چارچوب انیمیشن CSS پاسخگو برای ایجاد اسلایدرها، ارائه ها، بنرها و سایر برنامه های کاربردی مبتنی بر مرحله.
ساخته شده توسط Ian Lunn
15 سپتامبر 2015

نوار لغزنده سفارشی دایره کوچک.
ساخته شده توسط Bram de Haan
11 آگوست 2015

اسلایدر پاسخگو GTA V با HTML، CSS و جاوا اسکریپت.
ساخته ادوارد مایر
24 ژانویه 2014

مانند یک نوار لغزنده است اما به دلایل نامعلومی به صورت مکعبی می چرخد.
ساخته شده توسط اریک بروئر
4 دسامبر 2013

ساخته شده توسط هوگو داربی براون
28 آگوست 2013

نوار لغزنده پوشش تصویر با HTML، CSS و جاوا اسکریپت وانیلی.
ساخته شده توسط یوگام
7 ژوئن 2017

نوار لغزنده تصویر برجسته HTML و CSS.
ساخته جاشوا هیبرت
16 ژوئن 2016

نوار لغزنده تصویر چند محوره با HTML، CSS و جاوا اسکریپت.
ساخته شده توسط Burak Can
22 جولای 2013

نوار لغزنده مکعب، یک آزمایش کوچک با تبدیل‌های سه بعدی HTML5/CSS3.
ساخته شده توسط Ilya K.
26 ژوئن 2013