Owlcarousel2: Please add data attributes for all options

[bdthemes]

If we call data-owl-carousel in main div so owl carousel execute automatically.

For example:

<div class="owl-carousel owl-theme" data-owl-carousel>
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
</div>

even we can call all options from data attributes for example:

<div class="owl-carousel owl-theme" data-owl-carousel="{margin: 10, items: 2}">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
</div>

[ocvninfo]

You can use this way:

var $carousel = $('[data-owl-carousel]');
if ($carousel.length) {
     $carousel.each(function(index, el) {
          $(this).owlCarousel($(this).data('owl'));
     });
 }

[bdthemes]

@ocvninfo Thanks for share it. Carousel coming but options not working :(

[ocvninfo]

@bdthemes
Please try this markup:
data-owl-carousel='{"margin": 10, "items": 2}'

[ocvninfo]

oh sorry!
please use this:
$(this).owlCarousel($(this).data('owl-carousel'));
not:
$(this).owlCarousel($(this).data('owl'));

[bdthemes]

@ocvninfo Thanks it's working now 😄

[henrytran9x]

Hi ! how to add HTMl navText used data attributes ? This my code
<data-owl-carousel='{"margin":15,"loop":true,"nav":true,"dots":false,"items":2,"autoplaySpeed":1000,"navText": ["<i class="fa-icon-angle-left"></i>,"<i class="fa-icon-angle-right"></i>"],"responsive":{ "540" :{ "items": 1 }, "860" :{ "items" : 2 } , "1000":{ "items" : 2 }}}'>
But show error correct format json.

[bhavikvaghani]

@henrytran9x Heave you got any solution for this?

[JonathanSchndr]

var $owlAttr = { loop: true, items: 1 },  
$extraAttr = $(".owl-carousel").data("owl-carousel");  
$.extend($owlAttr, $extraAttr);
$(".owl-carousel").owlCarousel($owlAttr);

Use default attr + data-owl-carousel='{}'
so it is not necessary to always have all the attributes within the html file

[bhavikvaghani]

@JonathanSchndr Thank you. It's working now. :)

[rubelmiah]

@henrytran9x You can try this way.

data-owl-carousel='{"margin":15,"loop":true,"nav":true,"dots":false,"items":2,"autoplaySpeed":1000,"navText": ["<i class=&#x27;fa-icon-angle-left&#x27;></i>","<i class=&#x27;fa-icon-angle-right&#x27;></i>"],"responsive":{ "540" :{ "items": 1 }, "860" :{ "items" : 2 } , "1000":{ "items" : 2 }}}'

[henrytran9x]

thanks so much !