Question

如何在owl项目之间添加空格。在项目之间添加边距或填充。这需要响应。我可以在jquery中添加一些装订线。

enter image description here

function newsCarousel(){
    $("#carousel").owlCarousel({
        items : 4,
        itemsCustom : false,
        itemsDesktop : [1199,4],
        itemsDesktopSmall : [980,2],
        itemsTablet: [768,1],
        itemsTabletSmall: false,
        itemsMobile : [479,1],
        singleItem : false,
        itemsScaleUp : false,
        mouseDrag   :   true,

        //Basic Speeds
        slideSpeed : 200,
        paginationSpeed : 800,
        rewindSpeed : 1000,

        //Autoplay
        autoPlay : true,
        stopOnHover : false,

         //Auto height
        autoHeight : true,
    });
}

Answer 1

只需使用margin，就像这样：

function newsCarousel(){
    $("#carousel").owlCarousel({
        items : 4,
        margin: 20,
        autoHeight : true,
    });
}

Answer 2

基于此demo我会说，只需增加 custom.css 中.item类的边距。

#owl-example .item{
    ...
    margin-left: 20px;
    margin-right: 20px;
}

小心修改响应式网站和插件的CSS。如果需要针对不同的分辨率进行调整，您可以添加 custom.css 一些媒体查询并相应地扩展样式

Answer 3

我找到了解决方案。但我不得不改变源代码。我在$.fn.owlCarousel.options{}中添加了新选项“padding”。然后我在calculateWidth : function () {}

中更改了公式

calculateWidth : function () {
    var base = this;
    base.itemWidth = Math.round( (base.$elem.width() + base.options.padding) / base.options.items);
    console.log(base.$owlItems.width());
},

最后，我为项目添加了这个填充（padding-right）：

appendItemsSizes : function () {
        var base = this,
            roundPages = 0,
            lastItem = base.itemsAmount - base.options.items;

        base.$owlItems.each(function (index) {
            var $this = $(this);
            $this
                .css({
                    "width": base.itemWidth,
                    "padding-right": base.options.padding
                })
                .data("owl-item", Number(index));

            if (index % base.options.items === 0 || index === lastItem) {
                if (!(index > lastItem)) {
                    roundPages += 1;
                }
            }
            $this.data("owl-roundPages", roundPages);
        });
    },

所以现在我可以用这样的选项“padding”来初始化轮播：

$(".carousel").owlCarousel({
    items : 3,
    padding : 23
});

得到这个结果：

Answer 4

你必须知道，目前还没有任何方法可以直接在猫头鹰轮播中添加一个边距，这样他们可以在将来制作一个apdate，所以解决办法是用Css属性制作空格

您可以在css和padding中添加margin以及获取特定空间的最佳方式，您可以使用数学来计算所需的空间并将其应用于填充和保证金

我希望这可以帮助您找到问题的解决方案

你可以按照owl carousel插件官方网站发布的这个Tuto中的步骤进行操作：http://www.istedod.uz/lib/owl-carousel/demos/custom.html

Answer 5

为margin / padding创建一个类，并根据您的要求使用它。

.margin_10 { margin:10px }

</style>




<div id="carousel2"
<div class="carousel-inner">

<div class="item margin_10">

<!--your pic + content will go here as per requirement-->


 </div> 

</div>
</div>

Answer 6

tensorflow/g3doc/tutorials/mnist/fully_connected_feed.py

Config OwlCarousel：

hiro106@hiro106-virtual-machine:~$ python tensorflow/tensorflow/g3doc/tutorials/mnist/fully_connected_feed.py
Traceback (most recent call last):
File "tensorflow/tensorflow/g3doc/tutorials/mnist/fully_connected_feed.py", line 33, in 
import tensorflow.python.platform
ImportError: No module named tensorflow.python.platform

Answer 7

也许你正在使用OWL Carousel版本1，我建议你使用版本2.

你会得到它here。

转到文档菜单，您会找到所有内容。

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
})

Answer 8

您可以使用box-shadow使用纯CSS，如下所示：

.item::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -webkit-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
  -moz-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
  box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
}

如何在猫头鹰轮播项目之间添加空格

8 个答案: