راکت

داشتن مشکل در کار کردن با پلاگین owl-carousel

4 پاسخ

سلام به همه ی دوستان عزیز!
من در استفاده از این پلاگین مشکل دارم به صورتی که هر آیتم من که کارد های کد نویسی شده ی خودم بدون بوت استرپ هست درست در اسلاید های 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 پدینگ یا مارجین و استایل خاصی میخواد یا نه
چون قبلا هم زیاد از این پلاگین استفاده کردم و مشکلی نبوده نمیدونم داستان چیه دقیقا!

پ.ن: همینطور این اولین فعالیت من در این بخش از راکت هست و امیدوارم بتونم گفتگویی با استاد موسوی داشته باشم!

ثبت پرسش جدید

پاسخ‌ها

4
نیما  ش
نیما ش
@nimageneral

تخصص: برنامه نویس وب

ببین هر 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,
MR DellAshoob
MR DellAshoob
@moomleianoo

خسته نباشید ممنون از جوابتون اما فایده ای نداشت متاسفانه اینجا نمیشه عکسشو لود کرد وگرنه میدیدید دقیقا به چه شکل هر کارت توهم میره!
@nimageneral

شاید پاسخ شما همین‌جا باشد

نیما  ش
نیما ش
@nimageneral

تخصص: برنامه نویس وب

من قبلا این مشکل رو داشتم ولی با css تونستم که رفعش کنم ، بررسی کن که css مربوط به owl carousel حتما لود شده باشه توی صفحه!

MR DellAshoob
MR DellAshoob
@moomleianoo

آها
باشه حتما باید رفع بشه دیگه ببینم چی میشه
خیلی ممنون بابت پاسختون
@nimageneral

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

ورود یا ثبت‌نام