Question

我想在我的网站上创建一个无限滑块。我试图做的是制作一个无序的元素列表，其中列表项将是单个幻灯片。我遇到了使列表项显示内联并允许溢出浏览器左右两端同时保持列表项响应以便缩小的问题。我已经尝试了所有我能在SE上找到的东西，甚至问过我的朋友，他是一个全栈开发者，没有运气帮助。

<section>
    <hr class="pad2">
    <ul id="slide-show">
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
    </ul>   
    <hr class="pad2">
</section>



.world-map {
    height: auto;
    width: 95%;
    margin-left: 2.5%;
    display: inline-block;
}

#slide-show {
    -webkit-transition: -webkit-transform 2s ease-in-out;
    overflow: hidden;
}

#slide-show li {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    position: relative;
    display: inline;
    float: left;
    list-style-type: none;
}

.arrow-left {
    height: 12%;
    width: 2.5%;
    display: inline-block;
    float: left;
    background-color: black;
    top: 44%;
    position: absolute;
    cursor: pointer;
}

.arrow-right {
    height: 12%;
    width: 2.5%;
    display: inline-block;
    float: right;
    background-color: black;
    top: 44%;
    position: absolute;
    cursor: pointer;
}

这个想法是，每次只有一个列表项会出现在屏幕上，左右箭头将滑动＃幻灯片放映以允许其他幻灯片进入视图。

Answer 1

我更新了几行css，我相信这就是你要找的东西：

#slide-show {
    -webkit-transition: -webkit-transform 2s ease-in-out;
    overflow: hidden;
  white-space: nowrap;
}

#slide-show li {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    position: relative;
    display: inline-block;
    list-style-type: none;
}

这是一支工作笔：http://jsbin.com/copugojapa/1/edit

更新：这是滑块的功能演示 - 您可能希望用您的（更快）代码替换js：http://output.jsbin.com/jorucexeza/

显示比窗口宽的内联响应列表

1 个答案: