个人中心
gpt4 book ai didi

jquery - 用轮播 overflow hidden

转载 作者：行者123 更新时间：2023-11-28 16:19:14 25 4
gpt4 key购买 nike

我正在制作一个无限循环的旋转木马，一次渲染 2 个图像。我目前有一个 div，它是 slider 。在里面我有一个 <ul>在里面我有五个<li> .现在我将 slider 的宽度设置为屏幕的宽度，高度设置为 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>

我似乎无法让它工作。我希望它们水平并排堆叠，然后将它们从右向左移动。

最佳答案 

.slide > div {
    position: relative;
}

关于jquery - 用轮播 overflow hidden ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54383719/

25 4 0
文章推荐： html - 将页脚放在最底部，只有绝对内容
文章推荐： html - 将鼠标悬停在 li 上时更改颜色
文章推荐： ios - 如何在 tabbarcontroller 中有一个工作的 SplitViewController
文章推荐： css - 使用 om (/react) 显示隐藏的 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com