幻灯片JS高度和按钮定位问题

SlidesJS trouble with height and button positioning?

本文关键字：定位 问题 按钮 JS 高度 幻灯片      更新时间：2023-09-26

我目前正在为自己建立一个网站，但在设计它时遇到了一些麻烦。默认情况下，re是滑块下方的分页按钮以及上一个和下一个箭头。我设法删除了分页按钮，但无法将下一个和上一个按钮定位在滑块顶部，这些按钮应与包含图像的高度垂直居中。我也遇到了滑块高度的问题。高度应该是图像的高度。我网站上的绿色部分很高。

希望有人能帮到我！

非常感谢提前！

http://test.epicconcepts.nl

<style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
    }
    #slides .slidesjs-container {
      margin-bottom:0px;
    }
    .slidesjs-pagination {
      display:  none;
    }
    .slidesjs-previous.slidesjs-navigation {
        /* Styles for the Previous nav button */
        width: 32px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        z-index: 99;
        background-image: url("..//img/prev.png");
    }
    .slidesjs-next.slidesjs-navigation {
        /* Styles for the Next nav button */
        width: 32px;
        height: 100px;
        background-color: red;
        position: absolute;
        right: 0;
        z-index: 99;
        background-image: url("..//img/next.png");
    }
    .slidesjs-control {
        background: orange;
        max-height: 0px;
    }
    .slidesjs-container {
        width: 100%;
        background: green;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="js/jquery.slides.min.js"></script>
  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 700,
        autoHeight: true
      });
    });
  </script>

我猜你已经从该 URL 中删除了 slidesjs 代码，但我在 10 分钟前遇到了完全相同的问题，所以这就是我修复它的方式： 

<div id="slides" class="slides">
  <img src="images/1.jpg">
  <img src="images/2.jpg">    
  <a href="#" class="slidesjs-previous slidesjs-navigation slides-button left">
    <img src="images/arrow-left.png" /></a>
</div>

为了简单起见，我只放了 2 张图片和一个导航按钮。然后是 CSS： 

.slides { position: relative; } /* so the buttons are placed absolutety within this div */
.slides-button {
  position: absolute;
  top: 120px; /* the exact position over the slides, from slide's (0,0) */
}

请记住，导航按钮必须直接<a class="slidesjs-previous slidesjs-navigation">在<div id="slides">内部，否则它们将无法工作，不要将 Div 放在中间。

相关文章：