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

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

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

Array

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

اسکریپت های 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    :    ‘۱۰۰px’,
        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 میدهید را باید از فرمول زیر بدست بیاورید :

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

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

کدهای 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]

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

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

[/free_vip]

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

No Comments