close
آخرین مطالب
  • تبلیغ شما در اینجا
  • طراحی سایت شخصی
  • طراحی سایت فروشگاهی
  • طراحی سیستم وبلاگدهی
  • سیستم سایت ساز اسلام بلاگ
  • مگا برد - پلتفرم خرید اینترنتی قطعات موبایل مگابرد
  • loading...
    YourAds Here YourAds Here

    وبلاگ عالی برای همه

    دوستان عزیز در این وبلاگ در هر زمینه ای مطلب پیدا میکنید

    بازدید : 219
    دوشنبه 20 ارديبهشت 1395 زمان : 21:59

    اسلایدر

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

    حالا ما در این پست می خواهیم یک اسلایدر به شما معرفی کنیم که با استفاده از css و jquery برای شما یک اسلایدر حرفه ای و ریسپانسیو تولید میکند.

    اسلایدر Slippry:

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

    آموزش استفاده از اسلایدر Slippry:

    فایل را دانلود کنید و در پروژه خود قرا دهید و با توجه به آدرسی که فایل را در آن گذاشتید همان آدرس را به فایل html خود لینک کنید:

    1
    2
    3
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">script>
    <script src="/js/slippry.min.js">script>
    <link rel="stylesheet" href="/css/slippry.css" />

    حالا کد html اسلایدر را به صورت زیر هر جای سایت که میخواهید اسلایدر را نمایش دهید قرار دهید:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <ul id="slippry-demo">
    <li>
    <a href="#slide1"><img src="assets/img/slippry-01.jpg" alt="Welcome to Slippry!">a>
    li>
    <li>
    <a href="#slide2"><img src="assets/img/slippry-02.jpg" alt="This is an awesome jQuery slider plugin.">a>
    li>
    <li>
    <a href="#slide3"><img src="assets/img/slippry-03.jpg" alt="Check it out, you are going to class=\'red\'>♥span> it :)">a>
    li>
    ul>

    و در مرحله آخر کافیست Slippry را فراخوانی کنید. فراخوانی را در داخل تگ head و در داخل یک تگ script می توانید انجام دهید:

    1
    2
    3
    4
    5
    $(document).ready(function() {
    jQuery(document).ready(function(){
    jQuery(\'selector\').slippry()
    });
    });

    حالا شما یک اسلایدر ریسپانسیو و مدرن دارید.

    منبع : آموزش طراحی سایت

    دانلود بازی Pixel Gun 3D v10.4.1
    برچسب ها آموزش طراحی سایت ,
    نظرات این مطلب

    تعداد صفحات : 8

    درباره ما
    Profile Pic
    با سلام خدمت دوستان عزیز امیدوارم که از مطالبی که در این وبلاگ منتشر میکنم راضی باشید
    لطفا نظراتتون رو بگید
    موفق باشید دوستان
    اطلاعات کاربری
    نام کاربری :
    رمز عبور :
  • فراموشی رمز عبور؟
  • خبر نامه


    معرفی وبلاگ به یک دوست


    ایمیل شما :

    ایمیل دوست شما :



    چت باکس




    captcha


    آمار سایت
  • کل مطالب : 93
  • کل نظرات : 1
  • افراد آنلاین : 1
  • تعداد اعضا : 241
  • بازدید امروز : 52
  • بازدید کننده امروز : 53
  • باردید دیروز : 20
  • بازدید کننده دیروز : 7
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 175
  • بازدید ماه : 74
  • بازدید سال : 4969
  • بازدید کلی : 357767
  • کدهای اختصاصی