• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6246 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

ساخت اسلایدر واکنشگرا و لمسی چند کاره

27 5959 ۲۵ شهریور ۹۳

در این آموزش قصد دارم شما رو با اسلایدری آشنا کنم که به صورت lightbox عمل میکنه و دیگه مشکل واکنشگرا بودن رو نداره و از همه مهم تر قابلیت لمسی بودن اون است که اون رو از دیگر اسلایدر ها متمایز میکنه .

از قابلت های این اسلایدر :

  • واکنشگرا بودن
  • لمسی بودن
  • دارای افکت های زیبا
  • پشتیبانی از Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone , ...
  • قابلیت قرار دادن ویدئو
  • قابلیت نوشت عنوان و شرح تصاویر
  • قابلیت شخصی سازی بسیار سریع و آسان
  • بسیار سبک
  • پشتیبانی از تصاویر بند انگشتی
  • تصاویر جداگانه برای دستگاه های موبایل
  • کنترل اسلایدر به وسیله کیبرد
  • پشتیبانی از فونت آیکون
  • و ...

خوب دمو رو هم ببینید تا بریم سراغ کد هاش :


قدم اول : فراخوانی کد های اسلایدر


بعد از دانلود فایل ها کد های زیر رو به بخش  <head> سایتتون اضافه کنید :

نکته :  اگر قبلا کتاب خانه jQuery رو اضافه کردید خط 2 کدهای بالا رو به کلی حذف کنید .

قدم دوم : اضافه کردن کد های HTML


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

توضیحات :

  • در خط 1 و در بخش id اسم مورد نظر خودتون رو قرار بدید .
  • در بخش data-src (خط های 2 و 5) باید آدرس عکس کامل ( full image url) رو قرار بدید .
  • در قسمت img و بخش src باید آدرس عکس کوچک شده از اندازه واقعی رو (thumb url) قرار بدید. این تصویری هست که قرار در صفحه به نمایش در بیاید و با کلیک بر رو این تصویر ، تصویر اصلی با اندازه کامل نمایان خواهد شد.
  • بخش های data-title و data-desc برای اضافه کردن عنوان و توضیحات هستند.
  • در بخش data-responsive-src هم اگر از تصویر نسخه ای برای موبایل دارید آدرس آن را قرار دهید و اگر نه این قسمت را حذف کنید .

قدم سوم : تنظیمات اسلایدر


در این مرحله ما با استفاده از کد زیر باید اسلایدر خودمون رو به کد های jQuery اسلایدر بشناسونیم :

یادآوری : در کد بالا و در خط 4 باید به جای yourGallery#  اسمی (id) رو که در مرحله قبل برای اسلایدرتون انتخاب کردید رو بنویسید . یعنی اگر اسم اسلایدرتون رو 7learn انتخاب کردید باید در کد های بالا 7learn# رو بنویسید.

با استفاده از کد بالا شما از تنظیمات پیشفرض اسلایدر استفاده کردید. ولی اگر می خواهید که اسلایدر را سفارشی کنید از کد زیر به جای بالای استفاده کنید و id رو هم باید مثل کد بالا در خط 3 وارد کنید :

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

از اسلایدر لذت ببرید ... :)

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

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 27 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    آقا ما به خودمون گفتیم شما چرا ناراحت میشی؟! 😐
    شما سوال مارو درست متوجه نشدی برادر من. منم دوباره توضیح دادم گفتم بجا img ,ویدئو بذارم نه اینکه برای ویدئو تگ img بذارم!!
    من که ناراحت نشدم والا 😀 ولی شما انگار ناراحت شدید! ❓
    خو من اگه بلد بودم کجاشو آزمون خطا کنم که از نویسنده مطلب نمیپرسیدم راستی چرا نویسنده مطلب پاسخ نداده.
    من روی یه اسلایدشو به جای تگ img تگ video گذاشتم (وحید خان شما دقت کن اگه میخای پاسخ منو بدی برادر) اما درست نشد چون قسمتی از کد توی فایل jquery ساخته میشد که من ازش سر در نمی اوردم از این رو از نویسنده مطلب خاستم تغییرات لازم روی این اسلاید شو رو بمن بگه. اگرم حوصله ندارید که هیچی بی خیال
    ضمنا من جستجوهامو کردم با نمایش ویدئو تو html ناآشنا نیستم چون بجایی نرسیدم اومدم اینجا که اونم هیچی

    • ‏‏
      وحید صالحی(۸ تیر ۱۳۹۴)

      نه عرفان خان اینجا کسی ناراحت نمیشه اگر هم حوصله نداشتیم اصلا پاسخ نمیدادیم به هر حال من پاسخ شما رو دادم و خیلی هم واضح هست ولی اینکه متوجه نشدید بهتره بصورت اصولی و از پایه مباحث html و جی کوئری رو یاد بگیرید
      موفق باشید…

  • ‏‏

    راستی من فکر میکردم ایمیل جزو اطلاعاتیه منتشر نمیشه نگو همه میبینن گرچه نام من در پروفایل ایمیلم هم شیماست و موردی نداره که کسی اسمش نام ایمیلش باشه 😆 اینم گذاشتم 😀 باز کسی فکر نکنه 😀 ما لحن بدی داریم 😀 نادون (بی خبر) 😀 از همه جا 😀

    • ‏‏
      وحید صالحی(۸ تیر ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram