مطالب عمومی

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

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

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

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

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

1587 نفر
3 دقیقه
بروزرسانی در: آبان 4, 1400
آموزش اسکریپت اسلایدر عمودی

فهرست مطالب

همانطور که میدانید گاهی اوقات حجم متن وب سایت ها بسیار زیاد میباشد و فضای زیادی از سایت را اشغال خواهد کرد. یکی از راه های کاهش حجم متن در وب سایت ها استفاده از اسلایدرها میباشد. شما میتوانید متن های خود را که به صورت لیستی از عناوین هستند (مانند آخرین مطالب، مطالب برگزیده، تبلیغات متنی و … ) با استفاده از اسلایدر عمودی به کاربران نمایش دهید. دموی این اسلایدر عمودی که با 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.co</li>
<li>آموزش طراحی سایت آنلاینر</li>
<li>اسلایدر عمودی</li>
<li>متن نمونه برای تست</li>
<li>www.shop.onliner.co</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]

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

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

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