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