اسلايدر ريسپانسيو
شايد پيدا كردن يك اسلايدر ريسپانسيو كه استفاده از آن نيز راحت باشد براي شما كمي دشوار باشد.
حالا ما در اين پست مي خواهيم يك اسلايدر به شما معرفي كنيم كه با استفاده از css و jquery براي شما يك اسلايدر حرفه اي و ريسپانسيو توليد ميكند.
اسلايدر Slippry:
براي استفاده از اين اسلايدر كافيست فايل آن را كه در ضميمه همين پست برايتان آماده كرده ايم را دانلود كنيد و با استفاده از آموزش طراحي سايت زير آن را هر جاي سايتتان كه مي خواهيد قرار دهيد.
آموزش استفاده از اسلايدر Slippry:
فايل را دانلود كنيد و در پروژه خود قرا دهيد و با توجه به آدرسي كه فايل را در آن گذاشتيد همان آدرس را به فايل html خود لينك كنيد:
|
1
2
3
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><script src="/js/slippry.min.js"><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!"> <li> <a href="#slide2"><img src="assets/img/slippry-02.jpg" alt="This is an awesome jQuery slider plugin."> <li> <a href="#slide3"><img src="assets/img/slippry-03.jpg" alt="Check it out, you are going to |
و در مرحله آخر كافيست Slippry را فراخواني كنيد. فراخواني را در داخل تگ head و در داخل يك تگ script مي توانيد انجام دهيد:
|
1
2
3
4
5
|
$(document).ready(function() { jQuery(document).ready(function(){ jQuery('selector').slippry() }); }); |
حالا شما يك اسلايدر ريسپانسيو و مدرن داريد.
منبع : آموزش طراحي سايت
برچسب: آموزش طراحي سايت،
خبرنامه پیامکی