مطالب عمومی

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

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

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

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

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

1013 نفر
3 دقیقه
بروزرسانی در: آبان 9, 1400

فهرست مطالب

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

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

[/free_vip]

به این صفحه رتبه دهید
بدون دیدگاه
انتشار: مهر 22, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

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

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