مشکل با اجرا نشدن درست carousele بوت استرپ

[پروگرامنویس]

درود دوستان
من در تارنمایی که دارم طراحی میکنم از کروسل بوت استرپ بهره بردم البته با سی اس اس های خودم سفارشی ش کردم اما با چهارتا مشکل روبرو شدم!
1-اسلایدها بصورت خودکار جابجا نمی شن(البته وقتی ویرایشگر کد بازه کار نمیکنه و وقتی ویرایشگر رو میبندم این ایراد برطرف میشه!!)
2-دوتا پیکان چپ و راست وسط چین نمیشه ودر بالا جای گرفتن.
3- li های indicators یی که فعاله رنگش سفیده و با توجه به اینکه من از زمینه سفید استفاده کردم اصلا دیده نمیشه.
4-جابجایی اسلایدها بدون افکت انجام میشه یعنی بصورت پیوسته جابجا نمیشه.
اگه راهنماییم کنید سپاس گزار میشم
141632
کدهای اچ تی ام ال کروسل:


<div class="col-md-9">
<!-- carousel -->
<div id="mycarousel" class="carousel box-carousel hidden-sm hidden-xs">
<ol class="carousel-indicators carousel-ol">
<li class="active" data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<section class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class="col-md-12 carousel-label">
<h4>کتاب های تازه</h4>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12 carousel-titr">
<h3>دانلود کتاب آموزش فارسی بوت استرپ</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 carousel-info">
<p>
<ul>
<li>دسته : طراحی وب</li>
<li>زبان : فارسی</li>
<li>شمار برگه : 220</li>
<li>حجم : 3 مگابایت</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-md-4 carousel-img">
<img src="../myWeb/img/axe-carousel.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class="col-md-12 carousel-label">
<h4>کتاب های تازه</h4>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12 carousel-titr">
<h3>دانلود کتاب آموزش سی شارپ</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 carousel-info">
<p>
<ul>
<li>دسته : برنامه نویسی</li>
<li>زبان : فارسی</li>
<li>شمار برگه : 220</li>
<li>حجم : 3 مگابایت</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-md-4 carousel-img">
<img src="../myWeb/img/axe-carousel.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class="col-md-12 carousel-label">
<h4>کتاب های تازه</h4>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12 carousel-titr">
<h3>دانلود کتاب انگلیسی امنیت شبکه</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 carousel-info">
<p>
<ul>
<li>دسته : هک و امنیت</li>
<li>زبان : انگلیسی</li>
<li>شمار برگه : 220</li>
<li>حجم : 3 مگابایت</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-md-4 carousel-img">
<img src="../myWeb/img/axe-carousel.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<i class="fa fa-chevron-left"></i></a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<i class="fa fa-chevron-right"></i></a>
</div>
</div>

کدهای سی اس اس های خودم:


/*--- carousel */
.box-carousel{
background-color: #fff;
}
.carousel-ol li{
background-color: #1c39bb;
width: 20px;
height: 20px;
}
.carousel-label{
padding-right: 50px;
}
.carousel-label h4{
font-family: "bardya";
color: #c81d11;
text-align: right;
font-size: 25px;
}
.carousel-titr h3{
font-family: "bardya";
color: #373737;
text-align: right;
font-size: 32px;
}
.carousel-info{
font-family: "tahoma";
font-size: 14px;
color: #f8a29a;
text-align: right;
}
.carousel-info ul{
list-style: none;
}
.carousel-img {
text-align: left;
padding-bottom: 10px
}
.carousel-img img{
width: 200px;
height: 300px;
}

[anvar]

متاسفانه کدهای اصلی رو نذاشتی!

برای سوال 2 - موقعیت دکمه های ناوبری توسط کد css زیر کنترل میشه - باید مشابه با زیر بشه
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
margin-top: -10px;
}

اون top:50% موقعیت ایکون رو نسبت به ظرف والد مشخص می کنه که در سایت شما احتمالا 0% هست

برای سوال 3 - برای کنترل رنگ اسلاید فعال از کد زیر استفاده میشه - وضعیت اون رو در مروگر کروم بررسی و در صورت نیاز عوض یا اصلاح کن
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}

با تغییر طول و عرض می تونی سایز اون رو تغییر بدی و گزینه آخر هم رنگ ایتم active رو نشون میده که بصورت پیش فرض سفید هست

دو مشکل دیگه هم احتمالا به عدم اجرای صحیح کدهای jquery بر می گردن - البته برای افکت ها باید بصورت دستی اونها رو کنترل کنی

[پروگرامنویس]

متاسفانه کدهای اصلی رو نذاشتی!

برای سوال 2 - موقعیت دکمه های ناوبری توسط کد css زیر کنترل میشه - باید مشابه با زیر بشه
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
margin-top: -10px;
}

اون top:50% موقعیت ایکون رو نسبت به ظرف والد مشخص می کنه که در سایت شما احتمالا 0% هست

برای سوال 3 - برای کنترل رنگ اسلاید فعال از کد زیر استفاده میشه - وضعیت اون رو در مروگر کروم بررسی و در صورت نیاز عوض یا اصلاح کن
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}

با تغییر طول و عرض می تونی سایز اون رو تغییر بدی و گزینه آخر هم رنگ ایتم active رو نشون میده که بصورت پیش فرض سفید هست

دو مشکل دیگه هم احتمالا به عدم اجرای صحیح کدهای jquery بر می گردن - البته برای افکت ها باید بصورت دستی اونها رو کنترل کنی

مشکل 2 با راهنمایی شما درست شد .سپاس!
ولی درباره مشکل 3،من هم اکتیو و هم فاکوس رو امتحان کرده بودم اما درست نشده بود.با اکتیو فقط زمان کلیک کردن رنگ تغییر میکنه!

درباره مشکل یک و چهار ، من کدهایی که خودم نوشتم رو براتون گذاشتم بقیه کدها مربوط به خود فایل سی اس اس و جی کوئری بوت استرپ میشه که من تغییری توشون ندادم. البته یه سری کد جاوا از خودم هم هست(برای منوی تارنما.واسه کروسل جی کوئری ای ننوشتم!) که یادم رفت اینجا بزارم .الان مینویسم .


<!-- ######################## -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('ul.nav li.dropdown').hover(function () {
$('.dropdown-menu', this).fadeIn();
}, function () {
$('.dropdown-menu', this).fadeOut('fast');
});
});
</script>

<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>