مطالب عمومی

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

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

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

1145 نفر
4 دقیقه
بروزرسانی در: آبان 4, 1400

فهرست مطالب

در این آموزش 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]

4/5 - (1 امتیاز)
بدون دیدگاه
انتشار: آذر 3, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا