如何制作一个 div 滑块？答案

【问题标题】：How to make a div slider?如何制作一个 div 滑块？
【发布时间】：2016-01-23 20:25:20
【问题描述】：

我正在尝试制作一个将 3 个 div 元素滚动到 3 个新滚动元素的滑块。我正在寻找一个手动滑块，箭头指向右侧，左侧指向左侧。单击右箭头时，滑块应向右滑动并显示剩余的 3 个 div 元素。如果首先单击左箭头，则不会发生任何事情。如果在单击右箭头后单击它，它应该滑回前三个 div 元素。如果连续两次单击右箭头，则第二次单击应滑回最初的 3 个 div 元素。基本上，我想最终得到统一网站上的滑块之类的东西。链接：http://unity3d.com/unity

到目前为止，这是我的 HTML 代码。它在 3 列和 2 行上显示框：

<div class="categories">
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
</div>

以下是框的 CSS 样式：

/**********************
*******CATEGORIES******
**********************/
.categories {
    width: 90%;
    margin: 3% 9%;
    clear: left;
}

.category {
    padding: 7% 5% 3% 5%;
    width: 20%;
    border: 1px solid #E0E0E0;
    float: left;
    cursor: pointer;
    text-align: center;
}

.category:hover {
    border: 1px solid #4F8E64;
}

.category h3 {
    color: #3F7250;
    margin: 6% 0;
}

.category p {
    text-align: center;
}

确保内边距、边距和宽度保持百分比。随意修改代码并在小提琴或其他东西上与我分享。

【问题讨论】：

这是作为一个学习过程的班级/大学项目，还是您正在努力实现这一目标？如果您想在现实世界中这样做，为什么不使用引导轮播？
我其实是想为我的网站实现这个效果
看getbootstrap.com/javascript/#carousel....所有的辛苦都已经为你完成了！代码重用我的朋友，代码重用！我会发布一些可能有帮助的答案
这个技术是否涉及bootstrap
这将涉及包含 bootstrap.min.js 文件，但您不需要重新设计您的网站或其他任何东西？即插即用的旋转木马

标签： javascript jquery html css

【解决方案1】：

您可以使用 Caroufredsel jquery 插件。这是安装页面：

http://dev7studios.com/caroufredsel-old/installation.php

这是你旁边的一个例子：

http://coolcarousels.frebsite.nl/c/58/

当您在示例中向下滚动并单击橙色栏中的 [..] - 您将看到示例的代码。

这是轮播的代码：

$('#carousel').carouFredSel({
        width: '90%',
        items: 3,
        scroll: 3,
        auto: false,
        prev: '#prev',
        next: '#next',
        infinite: false
    });

如果您希望幻灯片不是圆形的，也可以使用 circular: false。

【讨论】：

好的，我去看看。
我已经更新了我的帖子，请查看您的滑块案例的代码。

【解决方案2】：

好的，如果你考虑引导，那么跟随 cmets，包括引导 js 和 css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

HTML

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <section>
            Some Info
        </section>
        <section>
            Some Info 2
        </section>
        <section>
            Some Info 3
        </section>
    </div>
    <div class="item">
        <section>
            Some Info
        </section>
        <section>
            Some Info 2
        </section>
        <section>
            Some Info 3
        </section>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS

section{
    display:inline-block;
    border:1px solid black;
}
.item{
    text-align:center
}

您可以随意操作部分和内容。

【讨论】：

【解决方案3】：

您可以使用 jQuery 来完成，需要坐一段时间并制作自定义滑块，它会根据您的逻辑工作。希望这会对你有所帮助。

【讨论】：