javascript - 我怎样才能让我的 slider 控件保持在相同的位置

Question

我的网站上有这个 slider ，有多张幻灯片，每张幻灯片下面都有不同的文本。问题是当文本较长时，控件会上下移动一点..... 参见此处，http://prntscr.com/5d2veh .如何让我的控件保持在中间图片的中心？

非常感谢!

附言如果您在我的问题中看到没有很好解释的内容或任何内容，请告诉我，以便下次我可以提出更好的问题:)

代码:

<!-- Locations -->
<div class="panel-box">
    <div class="titles">
        <h4>Clubs</h4>
    </div>
    <!-- Locations Carousel -->
    <ul class="single-carousel" id="loc-carousel">
        <li>
            <img src="static/img/blog/1.jpg" alt="" class="img-responsive" >
            <div class="info-single-carousel">
                <h4>Rijssen</h4>
                <p><b>Risnestars</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p>
            </div>
        </li>
        <li>
            <img src="static/img/blog/2.jpg" alt="" class="img-responsive">
            <div class="info-single-carousel">
                <h4>Hengelo</h4>
                <p><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p>
            </div>
        </li>
        <li>
            <img src="static/img/blog/3.jpg" alt="" class="img-responsive">
            <div class="info-single-carousel">
                <h4>Oldenzaal</h4>
                <p><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p>
            </div>
        </li>
        <li>
            <img src="static/img/blog/3.jpg" alt="" class="img-responsive">
            <div class="info-single-carousel">
                <h4>Enschede</h4>
                <p><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p>
            </div>
        </li>
    </ul>
    <!-- Locations Carousel -->
</div>
<!-- End Locations -->

CSS:

/*
*   Owl Carousel Owl Demo Theme 
*   v1.22
*/

.owl-theme .owl-controls{
    margin-top: 0;
    text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin: 5px;
    padding: 0 12px;
    font-size: 12px;
    opacity: 0.9;
    color: #fff;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin-top: 10px;
}
.owl-theme .owl-controls .owl-page span{ /* es este pilas*/
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #ccc;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/* preloading images */

.owl-item.loading{
    min-height: 190px;
    background: url(AjaxLoader.gif) no-repeat center center
}


/* Styling Next and Prev buttons  Titles -----------------------------*/

.single-carousel  .owl-prev,
.single-carousel .owl-next{ 
    position: absolute;
    top: 18%;
    opacity: 0.5;
}
.single-carousel:hover .owl-prev,
.single-carousel:hover .owl-next{
    opacity: 1;
}
.single-carousel .owl-prev{
    left: -5px;
}
.single-carousel  .owl-next{
    right:-5px;
}

.owl-controls{
    margin: 0;
}
.twitter .owl-theme .owl-controls{
    margin-top: 20px;
}
#blog-post  .owl-prev,
#blog-post .owl-next{   
    margin-top: 30px;
}

• 编辑 - 1 在 CSS 中，owl-prev 和 owl-next 是控件。一个 Javascript 插件可以做到这一点。

Answer 1

这是因为控件是使用百分比定位的:

.single-carousel  .owl-prev,
.single-carousel .owl-next{ 
    position: absolute;
    top: 18%; // <--- this one
    opacity: 0.5;
}

因为它是包装容器的百分比，所以容器越大意味着 top 属性的值越大。

如果您知道 img 的高度总是相同的，您可以将它们设置为一个设定值，例如:

.single-carousel  .owl-prev,
.single-carousel .owl-next{ 
    position: absolute;
    top: 80px;
    opacity: 0.5;
}

在不知道插件解析 DOM 并更改标记后标记是什么样的情况下，很难说是否有另一种方法将这些相对于 img 或轮播定位，以允许无论 img 或 carousel 图像高度如何，都设置一个百分比宽度，使它们很好地位于中间。