Owl 轮播 - 导航与居中项目宽度相同？

Question

我有这个 Owl 滑块：https://codepen.io/herrfischer/pen/qBEbpMx 导航按钮位于左侧，但我希望它们位于 centered 图像的右侧，如下图所示（底部的第二个滑块）。知道怎么做吗？

我用

$(".owl-carousel").owlCarousel({
    center: true,
    . . . 
    responsive: {
        0:{
            items: 1
        },
        576:{
            items: 1,
            stagePadding: 50,
        },
        992:{
            items: 1,
            stagePadding: 100,
        },
        1300:{
            items: 1,
            stagePadding: 200,
        },
        1500:{
            items: 1,
            stagePadding: 300,
        },
        1750:{
            items: 1,
            stagePadding: 450,
        }
    }
    . . .

将中间图片居中。

Answer 1

我刚刚意识到左窗格和右窗格的宽度是固定的 - 所以我可以只用 CSS 和媒体查询来做到这一点。所以我的轮播代码是：

$('.owl-<?php echo get_row_index(); ?>').owlCarousel({
    center: true,
    loop: true,
    margin: 0,
    nav: true,
    dots: false,
    responsive: {
    0:{
        items: 1
    },
    576:{
        items: 1,
        stagePadding: 0,
    },
    1200:{
        items: 1,
        stagePadding: 200,
    },
    1500:{
        items: 1,
        stagePadding: 300,
    },
    1750:{
        items: 1,
        stagePadding: 450,
    }
    }
})

"stagePadding"是一个像素值。因此，我只是将“.owl-nav”居中，并使用响应式 owl 脚本中的完全相同的数字和媒体查询为其提供左右边距：

.owl-nav {
    position: absolute;
    z-index: 99;
    top: auto;
    right: 0;
    bottom: 0;
    padding: 1em 1em .6em;
    margin-left: auto;
    margin-right: auto;

    @media (min-width: 1200px) {
        left: 200px;
        right: 200px;
    }

    @media (min-width: 1500px) {
        left: 300px;
        right: 300px;
    }

    @media (min-width: 1750px) {
        left: 450px;
        right: 450px;
    }

    ...

Owl 轮播 - 导航与居中项目宽度相同？

Owl Carousel - Navigation same width as centered item?

owl-carousel