رفع مشکل قالب در حالت لود با vue js

سلام
من یک قالب فروشگاهی دارم که داخلش چند نوع اسلایدر وجود داره. وقتی کد های اسلایدر محصولات داخل فایل های اصلی صفحه میذارم اسلایدر درست لود میشه ولی وقتی اسلایدر رو با vue js لود میکنم اسلایدر درست نشون نمیده. با وجودی که کد ها یکی هست ولی در حالت vue js نمایش اسلایدر خراب هست.
به این لینک برین:
http://shop.demo-php.ir/category/1
اینجا برید یه اسلایدر هست به نام دسته درست که به صورت عادی لود شده و مشکلی نداره ولی اسلایدر آجیل و خشکبار با vue js لود میشه و نگاش کنید درست نشونش نمیده و محصولات اسلایدری نمی شه.
کی میتونه مشکل رفع کنه که در حالت vue js همه اسلایدر ها درست لود بشه؟در ضمن از laravel هم استفاده شده.
ممنون

نقل قول:

---

نوشته اصلی توسط sardarn

سلام
من یک قالب فروشگاهی دارم که داخلش چند نوع اسلایدر وجود داره. وقتی کد های اسلایدر محصولات داخل فایل های اصلی صفحه میذارم اسلایدر درست لود میشه ولی وقتی اسلایدر رو با vue js لود میکنم اسلایدر درست نشون نمیده. با وجودی که کد ها یکی هست ولی در حالت vue js نمایش اسلایدر خراب هست.
به این لینک برین:
http://shop.demo-php.ir/category/1
اینجا برید یه اسلایدر هست به نام دسته درست که به صورت عادی لود شده و مشکلی نداره ولی اسلایدر آجیل و خشکبار با vue js لود میشه و نگاش کنید درست نشونش نمیده و محصولات اسلایدری نمی شه.
کی میتونه مشکل رفع کنه که در حالت vue js همه اسلایدر ها درست لود بشه؟در ضمن از laravel هم استفاده شده.
ممنون

---

با سلام ،

اسلایدر دوم نیز صحیح دیده می شود.

کش مرورگر خود را پاک کنید.

نه چک کردم باز خراب نشون میده عکس ببینید:

فایل پیوست 40581

نقل قول:

---

نوشته اصلی توسط sardarn

نه چک کردم باز خراب نشون میده عکس ببینید:

فایل پیوست 40581

---

در هنگام ارسال پست قبلی درست نمایش می داد برای بنده اما اکنون مشابه تصویر ضمیمه شده ی شما می باشد.

هر دو اسلایدر و چه بسا هر سه اسلایدر ، یک Container دارند.
شما تو فایل main.js ، کانتینر carousel-lg و carousel-md رو برای اسلایدر تعریف کردید.
هر 3 اسلایدر شما تو صفحه‌ای که دادین، carousel-md کانتینرشون هست که فقط یکی از 3 مورد رو برای owlCarousel لود میکنه. که طبیعی هم هست !
برای هر اسلاید یک کانتینر مجزا در نظر بگیرید و بصورت مجزا در فایل main.js به هر کدوم از کانتینرها تنظیمات کاروسل رو بدید.و یا داخل فایل main.js کانتینر carousel-md رو داخل یک حلقه For قرار بدید که هر بار برای این کانتینر یک بار OwlCarousel اجرا بشه.
اما در کل پیشنهاد میدم برای هر اسلایدر یک ID مجزا در نظر بگیرید ( مثلا slider_1 و slider_2 و slider_3 ) و بصورت کلی مثل نمونه زیر کانفیگ کنید :

فایل main.js :

کد:

---

$(".carousel-lg").owlCarousel({

---

رو بعد از اینکه به اسلایدرهاتون ID دادین، تغییر بدید به این حالت مثلا :

کد:

---

$("#slider_1, #slider_2, #slider_3").owlCarousel({

---