jquery - 用轮播隐藏溢出

问题描述

我正在制作一个无限循环轮播，一次渲染 2 张图像。我目前有一个 div 是滑块。在里面我有一个<ul>，在里面我有五个<li>。现在我将滑块的宽度设置为屏幕的宽度，高度设置为 1080。我希望隐藏列表中溢出的项目。

出于某种原因，它们并没有被隐藏，而只是粘在轮播图像的底部。我怎样才能让他们真正隐藏起来？

body {
    height: 100%;
    width: 100%;
    margin: 0%;
    padding: 0%;
    background-color: antiquewhite;
}

#app {
    height: 1080px;
    width: 100%;
}

#slider {
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: inline-block;
}

.slides {
    display: inline-block;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.slide {
    display: inline-block;
    list-style-type: none;
    width: 49.3%;
    height: 100%;
    margin: 5px;
    background-image: url('http://via.placeholder.com/1000x1000');
}

#title {
    position: absolute;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 150px;
    font-size: 32px;
    text-align: center;
    padding: 8px;
    border: 4px solid white;
}

#caption {
    position: absolute;
    width: 350px;
    font-size: 22px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 250px;
}

<body>
    <div id="app">
        <!-- this crousel will be able to look infinitiey. I will do this by assigning
        a set of images a number or id value. Once the user has cycled to the last
        image, it will reset the cycle and start from the beginning. 
        Point 1 => image 1 and 2
        Point 2 => image 2 and 3
        Point 3 => image 3 and 4
        Point 4 => image 4 and 5
        Cycle Reset -->
        <button id="previous" onclick="previousItem()"><</button>
        <div id="slider">
            <ul class="slides">
                <li class="slide 0">
                    <div>
                        <span id="title">Vega</span>
                        <span id="caption">Vega is one of the leading global plant-based nutrition companies.</span>
                    </div>
                </li>
                <li class="slide 1">
                    <div>
                        <span id="title">EightSleep</span>
                        <span id="caption">Eight has developed the world\'s first smart mattress.</span>
                    </div>
                </li>
                <li class="slide 2">
                    <div>
                        <span id="title">The Hundereds.com</span>
                        <span id="caption">The Hundereds Shopify Plus eCommerse site features a 100% custom and seamless Wordpress integraion.</span>
                    </div>
                </li>
                <li class="slide 3">
                    <div >
                        <span id="title">PRG Nation</span>
                        <span id="caption">InnerSelf Technologies hopes to create4 a PRG Nation, built around their new bio-stimulant and monitoring system.</span>
                    </div>
                </li>
                <li class="slide 4">
                    <div>
                        <span id="title">Qualo.com</span>
                        <span id="caption">Immerseive, highly-branded, and customer-focused shopping experience.</span>
                    </div>
                </<body>
  <div id="app">
    <!-- this crousel will be able to look infinitiey. I will do this by assigning
a set of images a number or id value. Once the user has cycled to the last
image, it will reset the cycle and start from the beginning. 
Point 1 => image 1 and 2
Point 2 => image 2 and 3
Point 3 => image 3 and 4
Point 4 => image 4 and 5
Cycle Reset -->
    <button id="previous" onclick="previousItem()"><</button>
      <div id="slider">
        <ul class="slides">
          <li class="slide 0">
            <div>
              <span id="title">Vega</span>
              <span id="caption">Vega is one of the leading global plant-based nutrition companies.</span>
            </div>
          </li>
          <li class="slide 1">
            <div>
              <span id="title">EightSleep</span>
              <span id="caption">Eight has developed the world\'s first smart mattress.</span>
            </div>
          </li>
          <li class="slide 2">
            <div>
              <span id="title">The Hundereds.com</span>
              <span id="caption">The Hundereds Shopify Plus eCommerse site features a 100% custom and seamless Wordpress integraion.</span>
            </div>
          </li>
          <li class="slide 3">
            <div >
              <span id="title">PRG Nation</span>
              <span id="caption">InnerSelf Technologies hopes to create4 a PRG Nation, built around their new bio-stimulant and monitoring system.</span>
            </div>
          </li>
          <li class="slide 4">
            <div>
              <span id="title">Qualo.com</span>
              <span id="caption">Immerseive, highly-branded, and customer-focused shopping experience.</span>
            </div>
          </li>
        </ul>
      </div>
      <button id="next" onclick="nextItem()">></button>
      </div>
    <script src="app.js"></script>
    <!-- <script src="bundle.js"></script> -->
    </body>li>
            </ul>
        </div>
        <button id="next" onclick="nextItem()">></button>
    </div>
    <script src="app.js"></script>
    <!-- <script src="bundle.js"></script> -->
</body>

我似乎无法让它工作。我希望它们水平堆叠在一起，然后从右到左移动它们。

标签： jqueryhtmlcss

jquery - 用轮播隐藏溢出

问题描述

解决方案

推荐阅读