داینامیک کردن owl carousel

سلام من ارایه زیر رو دارم:

[ "3", "30", "true", "2", "3" ]

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

jQuery('.owl-carousel-flex').each(function () {
        var $data_flex_slider =$(this).parent().parent().data('slider');
        console.log($data_flex_slider);
        owl_flex.owlCarousel({
            rtl: true,
            nav: true,
            dots: false,
            margin: $data_flex_slider[1],
            items:$data_flex_slider[0],
            loop: true,
            autoplay:true,
            // autoHeight:true,
            autoplayHoverPause:true,
            navText: ["<i class='fi-chevron-left'></i>","<i class='fi-chevron-right'></i>"],
            responsiveClass:true,
            responsive:{
                0:{
                    items:1
                },
                480:{
                    items:$data_flex_slider[3]
                },
                600:{
                    items:$data_flex_slider[4]
                },
                992:{
                    items:$data_flex_slider[0]
                }
            }
        });
    });

ممنون

ثبت پرسش جدید

omid

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

@omid.mardaneh 5 سال پیش مطرح شد

$(document).ready(function () {
    let blog = $('#blog');
    if (blog.length && $.fn.owlCarousel) {
        blog.owlCarousel({
            rtl: true,
            nav: false,
            items: 4,
            dots: true,
            autoplay: false,
            loop: true,
            responsive: {
                0: {
                    items: 1
                },
                576: {
                    items: 2
                },
                768: {
                    items: 3
                },
                991: {
                    items: 4
                },
            }
        });
    }
})

این کد کامل کار میکنه و مشکلی نداره
و یادتون باشه که تو html دقیقا مشابه دایکیومنت خود سایت جلو برین

ارسال پاسخ

reza_yki

تخصص : طراح و برنامه نویس سمت کلاینت...

@rezayki 5 سال پیش آپدیت شد

ممنونم از @omid.mardaneh عزیز
من به این شکل آرایه رو تغییر دادم و کار کرد گفتم شاید به کار یکی بیاد یه خدا خیرت بده هم به ما بگه ^_^

data-flex-slider='{"items":4,"margin":30,"loop":true,"autoplay":true,"res_480":2,"res_600":3,"res_768":3}'

کد اسلایدر رو هم این شکلی نوشتم:
(این طوری هر بار که استفاده میشه با تنظیمات دلخواه نشون داده میشه مثلا تو یه صفحه میشه n بار با تنظیمات دلخواه استفاده بشه، نیازی نیست برای هر بار استفاده کد جدید جاوا اسکریپت براش بنویسی)

jQuery('.owl-carousel-flex').each(function () {
        var data_flex_slider =$(this).parent().parent().data('flex-slider');
        console.log(data_flex_slider['items']);
        $(this).owlCarousel({
            rtl: true,
            nav: true,
            dots: false,
            margin: data_flex_slider['margin'],
            items: data_flex_slider['items'],
            loop: data_flex_slider['loop'],
            autoplay:data_flex_slider['autoplay'],
            // autoHeight:true,
            autoplayHoverPause:true,
            navText: ["<i class='fi-chevron-left'></i>","<i class='fi-chevron-right'></i>"],
            responsiveClass:true,
            responsive:{
                0:{
                    items:1
                },
                480:{
                    items:data_flex_slider['res_480']
                },
                600:{
                    items:data_flex_slider['res_600']
                },
                768:{
                    items:data_flex_slider['res_768']
                },
                992:{
                    items:data_flex_slider['items']
                }
            }
        });
    });

ممنون از همه دوستان و اساتید

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

داینامیک کردن owl carousel

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

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