javascript - 如何对齐全宽响应式 slider 上的导航按钮

Question

场景

我在制定最佳解决方案以使用 Owl Carousel v2 响应式对齐上一个和下一个导航按钮时遇到问题.

我需要箭头，因为它们的样式已设计为适合居中容器的偏移列，并在布局发生变化时将其覆盖位置保持在 767 像素。目前它们只是位于屏幕的边缘。

下面有一个 fiddle 示例，但一般原则是前两张幻灯片保留全宽背景图像(而不是将同一图像滑动两次)，只有中心文本发生变化。然后第三张幻灯片的背景随着文本发生变化。

代码

HTML

<div class="background-full background-one">
    <div class="carousel">
        <div class="item">
            <div class="container carousel-container">
                <div class="row">
                    <div class="col-sm-5 hidden-xs col-sm-offset-1 carousel-text">
                         <h1>Section Title</h1>

                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <button>Link</button>
                    </div>
                    <div class="col-sm-5 col-xs-12 carousel-image">
                        <img alt="" class="img-responsive" src="http://www.placehold.it/458x376" />
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="container carousel-container">
                <div class="row">
                    <div class="col-sm-5 hidden-xs col-md-offset-1 carousel-text">
                        <h1>Section Title 2</h1>

                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <button>Link</button>
                    </div>
                    <div class="col-sm-5 col-xs-12 carousel-image">
                        <img alt="" class="img-responsive" src="http://www.placehold.it/458x376" />
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="background-full background-two">
                <div class="container carousel-container">
                    <div class="row">
                        <div class="col-sm-5 hidden-xs col-sm-offset-1 carousel-text">
                            <h1>Section Title 3</h1>

                            <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                            consectetur adipisicing elit, sed do eiusmod tempor 
                            incididunt ut labore et dolore magna aliqua. Ut enim 
                            ad minim veniam, quis nostrud exercitation ullamco 
                            laboris nisi ut aliquip ex ea commodo consequat.</p>
                            <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                            consectetur adipisicing elit, sed do eiusmod tempor 
                            incididunt ut labore et dolore magna aliqua. Ut enim 
                            ad minim veniam, quis nostrud exercitation ullamco 
                            laboris nisi ut aliquip ex ea commodo consequat.</p>
                            <button>Link</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

/*owl-nav*/
.owl-prev {
    position: absolute;
    top: 40%;
    left: 0;
}
.owl-next {
    position: absolute;
    top: 40%;
    right: 0;
}
.fa {
    font-size: 80px;
    color: #fff;
}
@media (max-width:767px) {
    .owl-nav {
        display: none;
    }
}
/*owl-dots*/
.owl-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -27px;
}
.owl-dot {
    background: #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    text-indent: -999em;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
}
.owl-dot.active {
    background: #333;
}
/*generic-carousel*/
.carousel-text, .carousel-image {
    margin-top: 20px;
    margin-bottom: 20px;
}
.background-full {
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 410px;
}
.background-one {
    background-image: url(http://www.placehold.it/2560x410/ff6600);
}
.background-two {
    background-image: url(http://www.placehold.it/2560x410/ff0066);
}
/*bootstap-resets*/
@media (min-width: 1200px) {
    .carousel-container {
    width: 970px;
    }
}

注意事项:

• 我正在使用 Bootstrap 框架。
• 从 768px 开始必须保持一致的间距。
• 左右百分比声明不会使对齐方式如我所愿。
• 我宁愿不必经常输入多个媒体查询来定位它们。
• JavaScript 解决方案很好。
• 中心容器内的任何内容都必须是可点击的等等。
• 不要担心示例中的布局中断，这只是为了保持上面的代码片段较小。
• 如有任何其他疑问或说明，我很乐意更新问题。

示例

Fiddle

Full screen Fiddle

感谢您的宝贵时间。

Answer 1

我找到了一个解决方案，它可能并不完美，但对我来说效果很好。我使用 JavaScript 向父级添加一个 Bootstap 响应式容器。然后在子项上，按住 div - 在加载和调整页面大小时匹配其父项的宽度。

$(window).on("resize load", function () {
    $('.owl-controls').addClass('container');
    $('.owl-nav').width($('.owl-nav').parent('.container').width());
});

Demo