猫头鹰轮播 - 与不同宽度无关

Question

这是我的代码：

这是主要的SCRIPT：

$(document).ready(function() {

    $("#owl-example").owlCarousel({
        items:11,
        loop:true,
        margin:0,
        autoplay:true,
        autoplayTimeout:1000,
        autoplayHoverPause:true,
        autoWidth:true
    });

});

这是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>

以下是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>

我有11件物品。每个项目的宽度不同。这些项目不是无缝的。也就是说，他们不会在一个完美连接的刚果中循环。我怎么能改变这个？

Answer 1

如果在每个块的样式上显式设置宽度，它们将正确呈现：

<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>

您还应该能够使用定义各种宽度的ID或类来设置宽度。

您可以使用jQuery设置其宽度属性，如下所示：

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

但是为了让它们正确设置，你需要首先设置你的div以显示内联，这样它们的原始宽度就是它们内容的宽度，因为默认情况下div与父母允许它们一样宽是