MR DellAshoob
4 سال پیش توسط MR DellAshoob مطرح شد
4 پاسخ

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

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

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


ثبت پرسش جدید
نیما - ش
تخصص : برنامه نویس وب
@nimageneral 4 سال پیش مطرح شد
0

ببین هر 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
تخصص : وب
@moomleianoo 4 سال پیش مطرح شد
0

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


نیما - ش
تخصص : برنامه نویس وب
@nimageneral 4 سال پیش مطرح شد
0

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


MR DellAshoob
تخصص : وب
@moomleianoo 4 سال پیش مطرح شد
0

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


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

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