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

در این آموزش jquery، یک اسلایدر ساده رسپانسیو را به شما آموزش خواهیم داد. دموی این اسلایدر رسپانسیو را که با jquery کدنویسی شده است را میتوانید از این قسمت مشاهده کنید.

این اسکریپت شامل تنظیمات مختلفی از جمله دکمه های “قبلی و بعدی” و همچنین دکمه های “توقف و اجرا” و … میباشد، که در ادامه آن ها را توضیح خواهیم داد.

اسکریپت های jquery مورد نیار را بصورت زیر فراخوانی میکنیم :

[free_vip]

[html]
<script src=”js/jquery-1.9.1.min.js”></script>
<script src=”js/jquery.slides.min.js”></script>
<script>
$(function() {
$(‘#slides’).slidesjs({
width: 940,
height: 528,
navigation: false
});
});
</script>
[/html]

شما میتوانید option های این اسلایدر را تنظیم کنید. برای تنظیم دکمه “توقف و اجرا” باید اسکریپ را بصورت زیر فراخوانی کنید :

[html]
<script>
$(function() {
$(‘#slides’).slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
[/html]

همچنین میتوانید حالت تعویض عکس های اسلایدر را تنظیم کنید. در حالت معمولی تصاویر بصورت اسلاید عوض میشوند ولی میتوانید با کد زیر تعیین کنید که تصاویر به حالت فید شدن عوض شوند.

[html]
<script>
$(function() {
$(‘#slides’).slidesjs({
width: 940,
height: 528,
navigation: {
effect: “fade”
},
pagination: {
effect: “fade”
},
effect: {
fade: {
speed: 400
}
}
});
});
</script>
[/html]

کدهای css این اسکریپت به صورت زیر میباشد :

[css]

body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 “Helvetica Neue”, Helvetica, Arial, sans-serif;
color: #232525;
padding-top:70px;
}
#slides {
display: none
}
#slides .slidesjs-navigation {
margin-top:3px;
}
#slides .slidesjs-previous {
margin-right: 5px;
float: left;
}
#slides .slidesjs-next {
margin-right: 5px;
float: left;
}
.slidesjs-pagination {
margin: 6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,  .slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,  #slides a:visited {
color: #333
}
#slides a:hover,  #slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
</style>
<!– End SlidesJS Optional–>

  <!– SlidesJS Required: These styles are required if you’d like a responsive slideshow –>
<style>
#slides {
display: none
}
.container {
margin: 0 auto
}

    /* For tablets & smart phones */
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto
}
}

    /* For smartphones */
@media (max-width: 480px) {
.container {
width: auto
}
}

    /* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}

    /* For larger displays */
@media (min-width: 1200px) {
.container {
width: 1170px
}
}
[/css]

کدهای رسپانسیو در انتهای فایل css قرار داده شده اند که شما با توجه به سایزهای مورد نیاز میتوانید آن را تغییر دهید.

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

[html]
<div class=”container”>
<div id=”slides”>
<img src=”img/example-slide-1.jpg” alt=”Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/”>
<img src=”img/example-slide-2.jpg” alt=”Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/”>
<img src=”img/example-slide-3.jpg” alt=”Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/”>
<img src=”img/example-slide-4.jpg” alt=”Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/”>
<a href=”#” class=”slidesjs-previous slidesjs-navigation”><i class=”icon-chevron-left icon-large”></i></a>
<a href=”#” class=”slidesjs-next slidesjs-navigation”><i class=”icon-chevron-right icon-large”></i></a>
</div><!–#slides–>
</div><!–.container–>
[/html]

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

[/free_vip]