2016-08-28 2 views
1

Я хочу сделать горизонтальный div, который отображает несколько миниатюр с помощью кнопки предыдущей и следующей. Эти кнопки служат для прокрутки div.Горизонтальный div для эскизов

Кто-то может объяснить мне, как это сделать?

Я хочу картинку, чтобы показать, как на картинке: enter image description here

Мой код для миниатюр:

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

Спасибо годов.

ответ

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>

+0

Thank's. Как я могу дать действие кнопкам прокрутки 200 пикселей вправо и влево? @Trix – user3242861

+1

Добро пожаловать. Это можно сделать с использованием некоторого JavaScript. Было бы неплохо задать другой вопрос для части JavaScript – Trix

1

user3242861

У меня есть одно предложение для вас.

Если вы делаете это быстрее, вы можете использовать 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:) и поиск "слайд JS обучающая изображения"

Борьба !!