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

[sardarn]

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

[gharibion]

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

با سلام ،

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

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

[sardarn]

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

ajil.JPG

[gharibion]

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

ajil.JPG

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

[sam_pontiac]

هر دو اسلایدر و چه بسا هر سه اسلایدر ، یک 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({