缩略图的水平 div

Question

我想做一个水平的 div 来显示几个带有上一个和下一个按钮的缩略图。 这些按钮将用于滚动 div。

谁能解释我该怎么做？

我希望缩略图显示在图片中：

我的缩略图代码：

.portfolio-arrows {
  position: absolute;
  width: 50px;
  height: 50px;
  text-align: center;
  right: 0;
}
.portfolio-arrows .left, .portfolio-arrows .right {
  width: 35px;
  height: 25px;
  background-color: red;
  margin-bottom: 2px;
  cursor: pointer;
}
.portfolio-arrows .left i, .portfolio-arrows .right i {
  vertical-align: middle;
  color: grey;
}

.portfolio-thumbs {
  position: relative;
  width: 100%;
  height: 200px;
}
.portfolio-thumbs .thumbs-list {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.portfolio-thumbs .thumbs-list ul {
  list-style: none;
  padding: 0;
}
.portfolio-thumbs .thumbs-list ul li {
  width: 200px;
  height: 200px;
  display: inline-block;
}

<div class="portfolio-arrows">
  <div class="left" data-slide="prev">
    <i class="icon-left-open icon-bottom"></i>
    <span class="sr-only">Previous</span>
  </div>
  <div class="right" data-slide="next">
    <i class="icon-right-open icon-bottom"></i>
    <span class="sr-only">Next</span>
  </div>

</div>
<div class="portfolio-thumbs">
      <div class="row no-margin">
        <div class="thumbs-list">
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
          </ul>
        </div>
      </div>
    </div>

谢谢。

Answer 1

.portfolio-arrows {
  position: absolute;
  width: 50px;
  height: 50px;
  text-align: center;
  right: 0;
}
.portfolio-arrows .left, .portfolio-arrows .right {
  width: 35px;
  height: 25px;
  background-color: red;
  margin-bottom: 2px;
  cursor: pointer;
}
.portfolio-arrows .left i, .portfolio-arrows .right i {
  vertical-align: middle;
  color: grey;
}

.portfolio-thumbs {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.portfolio-thumbs .thumbs-list {
  position: absolute;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
  list-style: none;
  white-space: nowrap;
  padding: 0;
}
.portfolio-thumbs .thumbs-list li {
  width: 200px;
  height: 200px;
  display: inline-block;
}

<div class="portfolio-arrows">
  <div class="left" data-slide="prev">
    <i class="icon-left-open icon-bottom"></i>
    <span class="sr-only">Previous</span>
  </div>
  <div class="right" data-slide="next">
    <i class="icon-right-open icon-bottom"></i>
    <span class="sr-only">Next</span>
  </div>

</div>
<div class="portfolio-thumbs">
      <div class="row no-margin">
          <ul class="thumbs-list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
          </ul>
      </div>
    </div>

Answer 2

用户3242861

我有一个建议给你。

如果你做的更快， 您可以使用slick.js 来解决它。 这是制作简单幻灯片的库。

使用方便！！

示例：

$('#slide').slick({
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 5
});

body {
  background: #ccc;
}

.box {
  background: #fafafa;
  text-align:center;
  margin:10px;
  height: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div id="slide">
  <div class="box id-1"><h1>S1</h1></div>
  <div class="box id-2"><h1>S2</h1></div>
  <div class="box id-3"><h1>S3</h1></div>
  <div class="box id-4"><h1>S4</h1></div>
  <div class="box id-5"><h1>S5</h1></div>
  <div class="box id-6"><h1>S6</h1></div>
  <div class="box id-7"><h1>S7</h1></div>
  <div class="box id-8"><h1>S8</h1></div>
  <div class="box id-9"><h1>S9</h1></div>
  <div class="box id-10"><h1>S10</h1></div>
</div>

---

但你这样做是为了练习你的技能，

你应该使用 Javascript :) 并搜索“tutorial image slide js”

战斗！！