Question

方案

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

我需要箭头，因为它们的样式适合于居中容器的偏移列，并将其叠加位置保持在767px，布局会发生变化。目前，它们只是位于屏幕的边缘。

下面列出了一个示例小提琴，但一般原则是前两个幻灯片保留了全宽背景图像（而不是将同一图像滑动两次），只有中心文本发生变化。然后背景在第3张幻灯片上与文本一起更改。

代码

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

如何在全宽响应滑块上对齐导航按钮

1 个答案: