ساخت اسلایدشو ریسپانسیو با jQuery


ساخت اسلایدشو ریسپانسیو با jQuery

اسلایدشو تصویر, بهترین راه برای نمایش عکس ها است. در این آموزش jQuery , یک اسلایدشو تصویر که بنابر اسکرین سایزهای مختلف, مقیاس پذیر است.

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

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

ساخت اسلایدشو ریسپانسیو با jQuery

کد HTML لبست تصاویر اسلایدر

کد زیر به شما لیستی از تگ های تصویر HTML داخل المنت container اسلایدر را نشان می دهد. المنت container اسلایدر به عنوان رفرنس برای مقدار دهی اولیه کتابخانه ResponsiveSlides.js و اجرای اسلایدشو برای تصاویر , استفاده می شود.

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

راه اندازی اسلایدشو با ResponsiveSlidesjs

اسکریپت jQuery زیر تابع responsiveSlides() را به همراه آی دی Container اسلایدر فراخوانی می کند. در این مثال, چندین آپشن مثل maxwidth , فعال کردن دکمه های جلو/عقب و سرعت و… ست کردیم.

حتما بخوانید  ساخت اسلایدر رنج قیمت jquery در php

خروجی : ساخت اسلایدشو ریسپانسیو با jQuery

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

ساخت اسلایدشو ریسپانسیو با jQuery

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

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

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

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

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

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

نظر شما برای ما بسیار مهم است

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه