javascript - Owl Carousel - Unconnected with Different Widths -


here code:

here main script:

$(document).ready(function() {      $("#owl-example").owlcarousel({         items:11,         loop:true,         margin:0,         autoplay:true,         autoplaytimeout:1000,         autoplayhoverpause:true,         autowidth:true     });  }); 

here div:

<div id="owl-example" class="owl-carousel" style="height:27px;">   <div class="tag">1asfg</div>   <div class="tag">2f</div>   <div class="tag">3d34gs</div>   <div class="tag">4barthrg</div>   <div class="tag">5gef</div>   <div class="tag">6gef</div>   <div class="tag">7gef</div>   <div class="tag">8gef</div>   <div class="tag">9gef</div>   <div class="tag">10gef</div>   <div class="tag">11gef</div> </div> 

here style attributes of tag:

<style>     .tag {         float:left;         padding-bottom:2px;         padding-right:5px;         position:relative;         background:#bfc9d9;         width:auto;         display:table;         margin-right:0px;         margin-left:10px;         text-align:center;         border-top-right-radius:2px;         border-bottom-right-radius:2px;         margin-top:3px;         margin-bottom:3px;     }     .tag:after {         right:100%;         top:50%;         border:solid transparent;         content: " ";         height:0;         width:0;         position:absolute;         border-right-color:#bfc9d9;         border-width:10px;         margin-top:-10px;     } </style> 

i've got eleven items. each item of different width. items aren't seamless. is, don't loop in connected congo. how can change this?

if set width explicitly on each block's style, render correctly:

<div id="owl-example" class="owl-carousel" style="height:27px;">   <div class="tag" style="width:100px">1asfg</div>   <div class="tag" style="width:150px">2f</div>   <div class="tag" style="width:100px">3d34gs</div>   <div class="tag" style="width:200px">4barthrg</div>   <div class="tag" style="width:150px">5gef</div>   <div class="tag" style="width:150px">6gef</div>   <div class="tag" style="width:100px">7gef</div>   <div class="tag" style="width:100px">8gef</div>   <div class="tag" style="width:250px">9gef</div>   <div class="tag" style="width:100px">10gef</div>   <div class="tag" style="width:150px">11gef</div> </div> 

you should able set widths through css using ids or classes defining various widths.

you can use jquery set width attributes this:

$('.tag').each(function(){     var el = $(this);     var disp = el.css("display");     el.css("display","inline");     el.width(el.width());     el.css("display",disp); }); 

but in order them set properly, you'll need set divs first display inline native widths widths of contents, since divs default wide parents allow them be.


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -