شاید پیدا کردن یک اسلایدر ریسپانسیو که استفاده از آن نیز راحت باشد برای شما کمی دشوار باشد.
حالا ما در این پست می خواهیم یک اسلایدر به شما معرفی کنیم که با استفاده از 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()
});
});
|
حالا شما یک اسلایدر ریسپانسیو و مدرن دارید.
منبع : آموزش طراحی سایت
مشاهده پست مشابه : آموزش برنامه نویسی جاوا – قسمت اول – نصب جاوا
