درخواست اسلایدر عمودی

[980202 8]

سلام

من یه اسلایدر عمودی برای نمایش مطالب میخواستم

مثه قسمت مطالب آموزشی این سایت

http://webatd.com/

زیاد سرچ کردم اما نتیجه ای حاصل نشد

یکی هم یافتم ولی نه دمو داشت نه فایلی برای دانلود گذاشته شده بود

بنابراین آموزشش بی نتیجه بود

http://wpu.ir/ir4zy

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

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

[Ghasem Paran 333]

سلام

شاید این بدردتون بخوره.

http://wmh.github.io/jquery-scrollbox/

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

http://www.gmarwaha.com/jquery/jcarousellite/

[jali316 29]

سلام

میشه توضیح بیشتری بدید من جی کوئری ها رو دانلود کردم تو پوسته گذاشتم طبق سایت که داده بودید ولی کار نکرد

http://www.gmarwaha.com/jquery/jcarousellite/

[imanfakhar 26231]

باید نشانی ها را همراه با

[/size]
<?php bloginfo('template_directory');?>

[jali316 29]

در هدر

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.jcarousel.min.js"></script>

و

<script type="text/javascript">
$(".basic2 .carousel").jCarouselLite({
    btnNext: ".basic2 .next",
    btnPrev: ".basic2 .prev"
});
</script>

و html

<div class="custom-container basic2">
    <a href="#" class="prev">‹</a>
    <div class="carousel">
	    <ul>
		    <li><img src="<?php bloginfo('template_url'); ?>/images/1.jpg"/></li>
		    <li><img src="<?php bloginfo('template_url'); ?>/images/2.jpg"/></li>
		    <li><img src="<?php bloginfo('template_url'); ?>/images/3.jpg"/></li>
		    <li><img src="<?php bloginfo('template_url'); ?>/images/4.jpg"/></li>
		    <li><img src="<?php bloginfo('template_url'); ?>/images/5.jpg"/></li>
	    </ul>
    </div>
    <a href="#" class="next">›</a>
    <div class="clear"></div>
</div>

و css

.carousel {
visibility: visible;
overflow: hidden;
position: relative;
z-index: 2;
left: 0px;
width: 480px;
}
.carousel ul {
margin: 0px;
padding: 0px;
position: relative;
list-style: none;
z-index: 1;
width: 2720px;
left: -480px;
}
.carousel ul li {
overflow: hidden;
float: left;
width: 160px;
height: 138px;
}
#jcl-demo .carousel {
    border: 1px solid #bababa;
    border-radius: 10px;
    background-color: ghostwhite;
    float: left;
    padding-left: 10px;
}
    #jcl-demo .carousel>ul>li>img {
	    width: 150px;
	    height: 118px;
	    vertical-align:middle;
	    margin: 10px 10px 10px 0;
	    border-radius: 5px;
    }
#jcl-demo a.prev, #jcl-demo a.next {
    display: block;
    width: 26px;
    height: 30px;
    line-height: 1;
    background-color: #333333;
    color: ghostwhite;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 25px;
    border-radius: 8px;
    float: left;
}
    #jcl-demo a.prev {
	    margin: 50px -5px 0 0; text-indent: 7px;
    }
    #jcl-demo a.next {
	    margin: 50px 0 0 -5px; text-indent: 10px;
    }
	    #jcl-demo a.prev:hover, #jcl-demo a.next:hover {
		    background-color: #666666;
	    }

نتیجه نداده

[imanfakhar 26231]

این کد یا باید بعد از کد html باشه

<script type="text/javascript">
$(".basic2 .carousel").jCarouselLite({
	    btnNext: ".basic2 .next",
	    btnPrev: ".basic2 .prev"
});
</script>

یا باید بعد از لود صفحه اجرا بشه

<script type="text/javascript">
$(document).ready(function() {
$(".basic2 .carousel").jCarouselLite({
	    btnNext: ".basic2 .next",
	    btnPrev: ".basic2 .prev"
});
});
</script>

[jali316 29]

استاد محترم فخار ضمن تشکر فراوان استایلی همانند دمو می خوام بدم توسط Developer tools گوگل کروم کدها رو امتحان کردم ولی نشد بی زحمت دور عکسها و اسلایدر نگاه کنید دقیقا به این شکل و رنگ

[imanfakhar 26231]

دموش فایل css داره از همون فایل استفاده کنید

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

http://www.gmarwaha.com/jquery/jcarousellite/styling.php

[jali316 29]

سلام اون کدها کامل نیستند دقیقا لوکال هاست امتحان کردم

[imanfakhar 26231]

کدوم کدها کامل نیست؟

به نشانی ای که دادم برید کدها را به صورت کامل گذاشته

[Alireza Xn 1644]

بهترین اسلایدر عمودی که میتونم بهتون پیشنهاد کنم FlexSlider 2 هستش که طرح های کاستوم شده زیادی داره و خیلی راحت میتونید استایل اون رو بدون دانش زیادی از CSS یا جی کوئری ادیت کنید .

سبک + سرعت بالا + راحت

http://flexslider.woothemes.com/

[jali316 29]

#jcl-demo .carousel {
    border: 1px solid #bababa;
    border-radius: 10px;
    background-color: ghostwhite;
    float: left;
    padding-left: 10px;
}
    #jcl-demo .carousel>ul>li>img {
	    width: 150px;
	    height: 118px;
	    vertical-align:middle;
	    margin: 10px 10px 10px 0;
	    border-radius: 5px;
    }
#jcl-demo a.prev, #jcl-demo a.next {
    display: block;
    width: 26px;
    height: 30px;
    line-height: 1;
    background-color: #333333;
    color: ghostwhite;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 25px;
    border-radius: 8px;
    float: left;
}
    #jcl-demo a.prev {
	    margin: 50px -5px 0 0; text-indent: 7px;
    }
    #jcl-demo a.next {
	    margin: 50px 0 0 -5px; text-indent: 10px;
    }
	    #jcl-demo a.prev:hover, #jcl-demo a.next:hover {
		    background-color: #666666;
	    }

البته این آی دی دمو است که به دلخواه میشه تغییر داد jcl-demo اما ما بقی ثابت است اینا رو دادم مثل شکلی که فرستادم نشد دکمه ها درست نیومد عکس ها هم به جای افقی پشت سر هم در دو سطر قرار گرفتند سایزها رو بررسی می کنم اندازه ها درسته ولی جفت جور نمیشه

[imanfakhar 26231]

html:

<div class="custom-container basic2">
<a href="#" class="prev">‹</a>
<div class="carousel">
	 <ul>
		 <li><img src="image/1.jpg"></li>
		 <li><img src="image/2.jpg"></li>
		 <li><img src="image/3.jpg"></li>
		 <li><img src="image/4.jpg"></li>
		 <li><img src="image/5.jpg"></li>
	 </ul>
</div>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>

css:

#jcl-demo .carousel {
border: 1px solid #bababa;
border-radius: 10px;
background-color: ghostwhite;
float: left;
padding-left: 10px;
}
#jcl-demo .carousel>ul>li>img {
	 width: 150px;
	 height: 118px;
	 vertical-align:middle;
	 margin: 10px 10px 10px 0;
	 border-radius: 5px;
}
#jcl-demo a.prev, #jcl-demo a.next {
display: block;
width: 26px;
height: 30px;
line-height: 1;
background-color: #333333;
color: ghostwhite;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 25px;
border-radius: 8px;
float: left;
}
#jcl-demo a.prev {
	 margin: 50px -5px 0 0; text-indent: 7px;
}
#jcl-demo a.next {
	 margin: 50px 0 0 -5px; text-indent: 10px;
}
	 #jcl-demo a.prev:hover, #jcl-demo a.next:hover {
		 background-color: #666666;
	 }

javascript:

$(".basic2 .carousel").jCarouselLite({
btnNext: ".basic2 .next",
btnPrev: ".basic2 .prev"
});

[imanfakhar 26231]

این مجموعه اصلا با rtl سازگار نیست وگرنه کدها درسته

کدهای html را داخل یک دایو ltr بگذارید

<div dir="ltr">
<div class="custom-container basic2">
<a href="#" class="prev">‹</a>
<div class="carousel">
		 <ul>
				 <li><img src="image/1.jpg"></li>
				 <li><img src="image/2.jpg"></li>
				 <li><img src="image/3.jpg"></li>
				 <li><img src="image/4.jpg"></li>
				 <li><img src="image/5.jpg"></li>
		 </ul>
</div>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>
</div>

[jali316 29]

استاد خیلی ممنون با direction در css درست شد حال اندازه 480 می خوام عرضش زیاد بشه به ul اندازه میدم نمیشه فکر کنم اندازه در جی کوئری هست چطور عرضش رو زیاد کنم .

[imanfakhar 26231]

اگر از css تغییر نکنه یعنی نمی تونید تغییر بدید دیگه

[jali316 29]

سلام

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

مثلا به این صورت :

<script type="text/javascript">
$(function() {
   $(".default .carousel").jCarouselLite({
	    btnNext: ".default .next",
	    btnPrev: ".default .prev",
visible: 5
});
});
</script>