猫头鹰轮播-导航与居中项的宽度相同？

Question

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

我使用

  header('Location: https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]?style=' . $val );

使中间图像居中

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

    ...