راهنمای استفاده:
فایل های slider .css و pure.css رو در قسمت head صفحه فراخوانی کنید :
<link rel="stylesheet" href="../common/pure.css"/>
<link rel="stylesheet" href="slider.css"/>
سپس کتابخانه جی کویری و جی کویری موبایل و فایل slider.js رو فراخوانی کنید :
<script type="text/javascript" src="../common/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript" src="../common/jquery.mobile.custom.min.js"></script>
و در آخر افزونه رو به شکل زیر در کدهای html صفحه صدا بزنید :
$('#slider').djSlider({
navigationSupport: true, // or : false
slideTime: 4000, //ms
autoSlide_outAnimation: 'fade', // or : swipeRight , swipeLeft , fade
speed: 500, // ms
autoSlide_inAnimation: 'fade', // or : swipeRight , swipeLeft , fade
swipeRight_outAnimation: 'swipeRight', // or : swipeRight , swipeLeft , fade
swipeLeft_outAnimation: 'swipeLeft', // or : swipeRight , swipeLeft , fade
swipeRight_inAnimation: 'swipeRight', // or : swipeRight , swipeLeft , fade
swipeLeft_inAnimation: 'swipeLeft', // or : swipeRight , swipeLeft , fade
prevBtn_outAnimation: 'fade', // or : swipeRight , swipeLeft , fade
nextBtn_outAnimation: 'fade', // or : swipeRight , swipeLeft , fade
nextBtn_inAnimation: 'fade', // or : swipeRight , swipeLeft , fade
prevItemCaption_outAnimation: 'fade', // or : swipeRight , swipeLeft , fade
prevBtn_inAnimation: 'fade', // or : swipeRight , swipeLeft , fade
nextItemCaption_outAnimation: 'fade', // or : swipeRight , swipeLeft , fade
prevItemCaption_inAnimation: 'fade', // or : swipeRight , swipeLeft , fade
nextItemCaption_inAnimation: 'fade', // or : swipeRight , swipeLeft , fade
captionSupport: true, // or : false
})
autoSlide: true, // or : false
pauseOnHover: true, // or : false
touchSupport: true // or : false
همچنین میتوانید از نمونه ای که براتون گذاشتم برای یادگیری استفاده کنین.
ویژه برای دانشجویان طراحی وب خیلی مناسبه.