980202

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

17 پست در این موضوع قرار دارد

سلام

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

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

http://webatd.com/

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

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

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

http://wpu.ir/ir4zy

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

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

1

به اشتراک گذاری این پست


لینک به پست

سلام

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


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

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


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

2

به اشتراک گذاری این پست


لینک به پست

سلام

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


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

0

به اشتراک گذاری این پست


لینک به پست

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

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

1

به اشتراک گذاری این پست


لینک به پست

در هدر


<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;
}

نتیجه نداده

0

به اشتراک گذاری این پست


لینک به پست

این کد یا باید بعد از کد 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>

1

به اشتراک گذاری این پست


لینک به پست

sshot_7.png

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

1

به اشتراک گذاری این پست


لینک به پست

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

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


http://flexslider.woothemes.com/

2

به اشتراک گذاری این پست


لینک به پست


#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 اما ما بقی ثابت است اینا رو دادم مثل شکلی که فرستادم نشد دکمه ها درست نیومد عکس ها هم به جای افقی پشت سر هم در دو سطر قرار گرفتند سایزها رو بررسی می کنم اندازه ها درسته ولی جفت جور نمیشه

0

به اشتراک گذاری این پست


لینک به پست

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"
});

0

به اشتراک گذاری این پست


لینک به پست

این مجموعه اصلا با 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>

1

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

سلام

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

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


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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری