آموزش اسکریپت looped slider

در این آموزش جی کوئری (jquery) یک اسلایدر بسیار ساده را به شما آموزش خواهیم داد. شما میتوانید در این اسلایدر تنظیمات مختلفی را انجام دهید. امکان تنظیم استفاده از کپشن، pagination و دکمه های next و previous از ویژگی های این اسلایدر بسیار ساده است.

مشاهده دمو

[free_vip]

کدهای این اسکریپت بسیار ساده است. در ابتدا فایل های اسکریپت را فراخوانی میکنیم :

[html]

<script type="text/javascript" src="js/looped-slider.min.js"></script>
<script type="text/javascript" charset="utf-8">
/*
=looped-slider
—————————————————-*/
$(function(){
$.fn.loopedSlider.defaults.addPagination = true;
$(‘#looped-slider’).loopedSlider({
slidespeed:500,
autoStart: 5000,
effect: "fade"
});
});
</script>

[/html]

اگر میخواهید اسلایدر pagination نداشته باشد باید مقدار addPagination را برابر false قرار دهید.

کدهای html اسلایدر بصورت زیر است :

[html]

<div id="looped-slider">
<div class="container">
<div class="slides">
<div class="slide"><img src="images/slide-1.gif" alt="" />
<div class="caption">
<h2 class="caption-title"><a href="#">توضیح تصویر اولی بعنوان کپشن اینجاست</a></h2>
<p>این یک پاراگراف نمونه برای گذاشتن محتوای متن اسلایدر است تا اندازه فونت های آن تست شود.</p>
</div>
<!–.caption–>
</div>
<!–.slide–>
<div class="slide"><img src="images/slide-2.gif" alt="" />
<div class="caption">
<h2 class="caption-title"><a href="#">یک متن نمونه برای تصویر</a></h2>
<p>این یک پاراگراف نمونه برای گذاشتن محتوای متن اسلایدر است تا اندازه فونت های آن تست شود.</p>
</div>
<!–.caption–>
</div>
<!–.slide–>
<div class="slide"><img src="images/slide-3.gif" alt="" />
<div class="caption">
<h2 class="caption-title"><a href="#">یک متن نمونه به عنوان کپشن برای تصویری که دراسلایدر ما قرار دارد و طول این متن بیشتر از بقیه است</a></h2>
<p>این یک پاراگراف نمونه برای گذاشتن محتوای متن اسلایدر است تا اندازه فونت های آن تست شود.</p>
</div>
<!–.caption–>
</div>
<!–.slide–>
</div>
<!–.slides–>
</div>
<!–.container–>
<a href="#" class="previous">previous</a> <a href="#" class="next">next</a> </div>
<!–#looped-slider–>

[/html]

اگر میخواهید اسلایدر شما caption نداشته باشد باید قسمتی که شامل تگ div با کلاس caption می باشد را حذف کنید.

تگ های a با کلاس previous و next هم دکمه های اسلایدر هستند که در صورت تمایل میتوانید آن ها را نیز حذف کنید.

استایل های css اسلایدر looped به صورت زیر میباشد :

[css]

/*
=looped-slider
————————————-*/
#looped-slider {
width:557px;
height:300px;
position:relative;
}
#looped-slider .container {
width:557px;
height:226px;
overflow:hidden;
position:relative;
}
#looped-slider .slides {
position:absolute;
top:0;
left:0;
}
#looped-slider .slides div.slide {
position:absolute;
left:0;
top:0;
width:557px;
}
#looped-slider .next {
position:absolute;
right:10px;
bottom:0;
}
#looped-slider .previous {
position:absolute;
left:0;
bottom:0;
}
#looped-slider .pagination {
position:absolute;
width:100px;
list-style:none;
bottom:25px;
}
#looped-slider .pagination li {
float:left;
}
#looped-slider .pagination li a {
margin-right:10px;
}
#looped-slider .caption {
width:543px !important;
background:url(images/caption-bg.png);
color:#000;
text-align:right;
height:60px;
padding:0 7px;
line-height:18px;
position:absolute;
left:0;
bottom:0;
}

[/css]

شما میتوانید فایل کامل این اسکریپت را از لینک پایین دانلود کنید :

[onliner_button type=”edu-demo” url=’https://onliner.ir/demo-education/jquery/looped-slider/looped-slider-onliner.ir.zip’]دانلود دمو[/onliner_button]

[/free_vip]

دیدگاه خود را برای ما ارسال کنید

No Comments