سلام به همه ی دوستان عزیز!
من در استفاده از این پلاگین مشکل دارم به صورتی که هر آیتم من که کارد های کد نویسی شده ی خودم بدون بوت استرپ هست درست در اسلاید های owlCarousel نمایش داده نمیشه
هر جور نگاه میکنم مشکلی توی کد ها نمیبینم اما همونطور که میدونید من نمیبینم!
کد های html,css
<div class="col-lg-6 col-12 order-lg-1 order-2 svg-buy">
<div class="owl-carousel carousel-theme" id="carousel-sell">
<div class="sell-card">
<img class="img-fluid card-sell-img" src="images/card-image.jpg" alt="">
<div class="sell-box">
<ul class="list-unstyled sell-detail-list">
<li>عنوان محصول : <span>پکیج DVD اموزش کودکان</span></li>
<li>رده سنی : <span>۱۲ سال به بالا</span></li>
<li>توضیحات : <span>پکیج آموزشی شامل چهارده دی وی دی آموزشی به همراه فلاش کارت</span></li>
<li>نحوه ارسال : <span>پیک</span></li>
</ul>
</div>
<div class="footer-sell">
<div class="buy-button d-flex justify-content-between align-items-center">
<button class="btn btn-danger btn-lg buy-btn" type="button">افزودن به سبد خرید</button>
<span class="price ml-3">۱۲۰,۰۰۰ تومان</span>
</div>
</div>
</div>
<div class="sell-card">
<img class="img-fluid card-sell-img" src="images/card-image.jpg" alt="">
<div class="sell-box">
<ul class="list-unstyled sell-detail-list">
<li>عنوان محصول : <span>پکیج DVD اموزش کودکان</span></li>
<li>رده سنی : <span>۱۲ سال به بالا</span></li>
<li>توضیحات : <span>پکیج آموزشی شامل چهارده دی وی دی آموزشی به همراه فلاش کارت</span></li>
<li>نحوه ارسال : <span>پیک</span></li>
</ul>
</div>
<div class="footer-sell">
<div class="buy-button d-flex justify-content-between align-items-center">
<button class="btn btn-danger btn-lg buy-btn" type="button">افزودن به سبد خرید</button>
<span class="price ml-3">۱۲۰,۰۰۰ تومان</span>
</div>
</div>
</div>
<div class="sell-card">
<img class="img-fluid card-sell-img" src="images/card-image.jpg" alt="">
<div class="sell-box">
<ul class="list-unstyled sell-detail-list">
<li>عنوان محصول : <span>پکیج DVD اموزش کودکان</span></li>
<li>رده سنی : <span>۱۲ سال به بالا</span></li>
<li>توضیحات : <span>پکیج آموزشی شامل چهارده دی وی دی آموزشی به همراه فلاش کارت</span></li>
<li>نحوه ارسال : <span>پیک</span></li>
</ul>
</div>
<div class="footer-sell">
<div class="buy-button d-flex justify-content-between align-items-center">
<button class="btn btn-danger btn-lg buy-btn" type="button">افزودن به سبد خرید</button>
<span class="price ml-3">۱۲۰,۰۰۰ تومان</span>
</div>
</div>
</div>
</div>
</div>
و این هم کد های jq برای کار کردن پلاگین
$(document).ready(function(){
let sell = $(".owl-carousel");
if(sell.length && $.fn.owlCarousel){
sell.owlCarousel({
rtl: true ,
items :1,
nav: false ,
dots: true ,
autoplay : false,
})
}
});
در کل مشکل به صورتیه که انگار هر کارتی که درون owl-item قرار گرفته، کناره های کارت به زیر این المنت رفته و حتی باکس شادو کارت ها درست نمایش داده نمیشه و همینوطور توی دیسپلی های sm به پایین کارت ها روی هم میوفته و نمایش آیتم ها بهم میریزه
هنوزم استایل خاصی ندادم بهش
حالا نمیدونم اون owl-item پدینگ یا مارجین و استایل خاصی میخواد یا نه
چون قبلا هم زیاد از این پلاگین استفاده کردم و مشکلی نبوده نمیدونم داستان چیه دقیقا!
پ.ن: همینطور این اولین فعالیت من در این بخش از راکت هست و امیدوارم بتونم گفتگویی با استاد موسوی داشته باشم!
ببین هر sell-card درون یک دایو با کلاس آیتم بزار ببین جواب میده ، بصورت زیر
<div class="item">
<div class="sell-card">
<img class="img-fluid card-sell-img" src="images/card-image.jpg" alt="">
<div class="sell-box">
<ul class="list-unstyled sell-detail-list">
<li>عنوان محصول : <span>پکیج DVD اموزش کودکان</span></li>
<li>رده سنی : <span>12 سال به بالا</span></li>
<li>توضیحات : <span>پکیج آموزشی شامل چهارده دی وی دی آموزشی به همراه فلاش کارت</span></li>
<li>نحوه ارسال : <span>پیک</span></li>
</ul>
</div>
<div class="footer-sell">
<div class="buy-button d-flex justify-content-between align-items-center">
<button class="btn btn-danger btn-lg buy-btn" type="button">افزودن به سبد خرید</button>
<span class="price ml-3">120,000 تومان</span>
</div>
</div>
</div>
</div>
و margin اضافه کن به owlcarousel
$('.owl-carousel').owlCarousel({
margin:10,
خسته نباشید ممنون از جوابتون اما فایده ای نداشت متاسفانه اینجا نمیشه عکسشو لود کرد وگرنه میدیدید دقیقا به چه شکل هر کارت توهم میره!
@nimageneral
من قبلا این مشکل رو داشتم ولی با css تونستم که رفعش کنم ، بررسی کن که css مربوط به owl carousel حتما لود شده باشه توی صفحه!
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟