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

- 2 هفته پیش
توسط reza_yki آپدیت شد
reza_yki ( 455 تجربه )
2 هفته پیش

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

[ "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 ( 4149 تجربه )
2 هفته پیش
$(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 ( 455 تجربه )
2 هفته پیش

ممنونم از @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']
                }
            }
        });
    });

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

برای ارسال پاسخ باید وارد سایت شوید