user3242861 user3242861 - 3 months ago 26
CSS Question

Horizontal div for thumbnails

I want to do an horizontal div that displays de several thumbnails with a button previous and next.
These buttons will serve to scroll the div.

Someone can explain me how to do that?

I want the thumbnail to be shown as in the picture:
enter image description here

My code for thumbnails:



.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>





Thank's.

Answer

.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>