آموزش اسکریپت اسلایدر عمودی با استفاده از jquery

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

همانطور که میدانید گاهی اوقات حجم متن وب سایت ها بسیار زیاد میباشد و فضای زیادی از سایت را اشغال خواهد کرد. یکی از راه های کاهش حجم متن در وب سایت ها استفاده از اسلایدرها میباشد. شما میتوانید متن های خود را که به صورت لیستی از عناوین هستند (مانند آخرین مطالب، مطالب برگزیده، تبلیغات متنی و … ) با استفاده از اسلایدر عمودی به کاربران نمایش دهید. دموی این اسلایدر عمودی که با jquery کدنویسی شده است را میتوانید از این قسمت مشاهده کنید.

Untitled-1

این اسکریپت شامل دکمه های “قبلی و بعدی” و همچنین دکمه های “توقف و اجرا” برای اسلایدر میباشد.

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

[free_vip]

[html]
<script type=”text/javascript” src=”js/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery.totemticker.js”></script>
<script type=”text/javascript”>
/*
=vertical-ticker
—————————————————-*/
$(function(){
$(‘#vertical-ticker’).totemticker({
row_height    :    ‘100px’,
next        :    ‘#ticker-next’,
previous    :    ‘#ticker-previous’,
stop        :    ‘#stop’,
start        :    ‘#start’,
mousestop    :    true
});
});
[/html]

شما میتوانید option های این اسلایدر را تنظیم کنید. برای دکمه ها آیدی دلخواه خود را تعیین کنید و با mousestop مشخص کنید که هنگامی که موس روی اسلایدر قرار میگیرد، اسلایدر متوقف شود یا خیر.

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

[css]

/*
=vertical-ticker
—————————————-*/
* {
margin:0;
padding:0;
}
#vertical-ticker-wrap {
padding:30px;
width:300px;
margin:0 auto;
}
#vertical-ticker-wrap p {
color:#fff;
padding:10px 0;
text-align:center;
}
#vertical-ticker-wrap p a {
color:#e8914c;
text-decoration:none;
border-bottom:1px dotted #e8914c;
}
#vertical-ticker-wrap p a:hover {
color:#eab209;
border-bottom:1px dotted #eab209;
}
#vertical-ticker {
height:400px;
overflow:hidden;
margin:0;
padding:0;
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .4);
}
#vertical-ticker li {
padding:35px 20px;
display:block;
background:#efefef;
color:#333;
border-bottom:1px solid #ddd;
text-align:center;
font-size:25px;
}
[/css]

دقت کنید که ارتفاعی که به آیدی vertical-ticker میدهید را باید از فرمول زیر بدست بیاورید :

ارتفاع هر عنصر قابل نمایش * تعداد نمایش هر عنصر در هر اسلاید

در اینجا ارتفاع هر عنصر در فراخوانی اسکریپت 100px در نظر گرفته شده است (row_height  :  ‘100px’) و چون در هر اسلاید 4 آیتم نمایش داده میشود، ارتفاع vertical-ticker برابر با 400px خواهد بود.

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

[html]

<div id=”vertical-ticker-wrap”>
<ul id=”vertical-ticker”>
<li>متن نمونه</li>
<li>آنلاینر</li>
<li>www.onliner.ir</li>
<li>آموزش طراحی سایت آنلاینر</li>
<li>اسلایدر عمودی</li>
<li>متن نمونه برای تست</li>
<li>www.shop.onliner.ir</li>
</ul>
<p><a href=”#” id=”ticker-previous”>Previous</a> / <a href=”#” id=”ticker-next”>Next</a> / <a id=”stop” href=”#”>Stop</a> / <a id=”start” href=”#”>Start</a></p>
</div>
<!–#vertical-ticker-wrap–>

[/html]

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

 

[/free_vip]

به این صفحه رتبه دهید

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان
Scroll to Top