با سلام و احترام.
دوستان عزیز در زیر یک اسلایدشو بسیار زیبا هست ولی فقط میشه یکبار در یک صفحه استفاده کرد.
و اگر بخوام در همان صفحه جای دیگر استفاده کنم فقط مورد اول درست کار می کنه و بقیه از کار می یفته!!
دوستان عزیز ممنون میشم کمکم کنید یا تغییری در این کد ایجاد کنید که بتونم چند جا از این اسلاید شو استفاده کنم.
دوستان عزیز نیاز به معرفی افزونه یا اسلایدشو های دیگه نیست چون تنها اسلایدشویی که با پوسته درست کار کنه همینه و خیلی جالبه.
با تشکر از محبت شما.
دوستان عزیز در زیر یک اسلایدشو بسیار زیبا هست ولی فقط میشه یکبار در یک صفحه استفاده کرد.
و اگر بخوام در همان صفحه جای دیگر استفاده کنم فقط مورد اول درست کار می کنه و بقیه از کار می یفته!!
دوستان عزیز ممنون میشم کمکم کنید یا تغییری در این کد ایجاد کنید که بتونم چند جا از این اسلاید شو استفاده کنم.
دوستان عزیز نیاز به معرفی افزونه یا اسلایدشو های دیگه نیست چون تنها اسلایدشویی که با پوسته درست کار کنه همینه و خیلی جالبه.
با تشکر از محبت شما.
کد:
<style>
.container{
width:395px;
height:300px
}
.slider_wrapper{
overflow: hidden;
position:relative;
height:275px;
top:auto;
margin:13px 10px 13px 10px;
}
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li p{
text-align:right;
direction:rtl;
width:365px;
font-weight:bold;
}
#image_slider li p a{
color: #1699c9;
font-size:9px;
text-decoration:none;
}
#image_slider li{
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: url('<?php bloginfo('template_directory'); ?>/fa/modules/mod_bt_contentslider/tmpl/images/re-left.png') no-repeat center;
left: 3px;
}
#next{
background: url('<?php bloginfo('template_directory'); ?>/fa/modules/mod_bt_contentslider/tmpl/images/re-right.png') no-repeat center;
right: 3px;
}
</style>
<script>
//1. set ul width
//2. image when click prev/next button
var ul;
var li_items;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;
function init(){
ul = document.getElementById('image_slider');
li_items = ul.children;
imageNumber = li_items.length;
imageWidth = li_items[0].children[0].clientWidth;
ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
prev = document.getElementById("prev");
next = document.getElementById("next");
//.onclike = slide(-1) will be fired when onload;
/*
prev.onclick = function(){slide(-1);};
next.onclick = function(){slide(1);};*/
prev.onclick = function(){ onClickPrev();};
next.onclick = function(){ onClickNext();};
}
function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration;
if (progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.delay || 17);
//return id;
}
function slideTo(imageToGo){
var direction;
var numOfImageToGo = Math.abs(imageToGo - currentImage);
// slide toward left
direction = currentImage > imageToGo ? 1 : -1;
currentPostion = -1 * currentImage * imageWidth;
var opts = {
duration:1000,
loop:1,
delta:function(p){return p;},
step:function(delta){
ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
},
callback:function(){currentImage = imageToGo;}
};
animate(opts);
}
function onClickPrev(){
if (currentImage == 0){
slideTo(imageNumber - 1);
}
else{
slideTo(currentImage - 1);
}
}
function onClickNext(){
if (currentImage == imageNumber - 1){
slideTo(0);
}
else{
slideTo(currentImage + 1);
}
}
window.onload = init;
</script>
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li>
<img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg" width="380" height="210">
<p>
<a href="/" target="_blank">عنوان مطلب</a><br>
توضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظر
</p>
</li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg" width="380" height="210">
<p>
<a href="/" target="_blank">عنوان مطلب</a><br>
توضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظر
</p>
</li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg" width="380" height="210">
<p>
<a href="/" target="_blank">عنوان مطلب</a><br>
توضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظر
</p>
</li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg" width="380" height="210">
<p>
<a href="/" target="_blank">عنوان مطلب</a><br>
توضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظر
</p>
</li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg" width="380" height="210">
<p>
<a href="/" target="_blank">عنوان مطلب</a><br>
توضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظرتوضیحات مطالب مورد نظر
</p>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
</div>