Слайдер div'ов на jQuery

229

19 июля 2017, 22:02

Есть несклько div

<div class="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
</div>

Сначала будут показываться только первые 3 дива, т.е. div 1, 2 и 3. Нужно, чтобы при нажатии на <div class="btn"> первый div скрывался, а 4 - появлялся. Т.е. это можно назвать как слайдер, только с дивами. Как это можно реализовать на jQuery?

Answer 1

Вот пример реализации.

container надо обернуть в блок wrap, которому задать ширину, равную 3 div. Самому container задать ширину в 6 div. Таким образом, будут показаны только 3 первых div.

Теперь на кнопки надо повесить код, который будет вычислять margin-left для container и добавлять его к container. Так делаем прокрутку слайдера. Размер margin-left вычисляется как (номер левого div минус) * ширину div.

Чтобы понимать, где мы находимся, надо где-то хранить (номер левого div - 1). Для этого добавляем произвольный атрибут .data к contaner.

Доработать вычисления и css я предоставляю вам самому. Или можно взять готовый код с одного из моих сайтов.

$('.left').on('click', function() { 
  var count = $('.container div').length; 
  var columns = 3; 
  var columnWidth = 100 / columns; 
 
  if (count <= columns) return; 
 
  var leftItem = $('.container').data('left item'); 
  if (typeof leftItem === "undefined") { 
    leftItem = 0; 
  } 
 
  leftItem = leftItem - 1; 
  if (leftItem < 0) leftItem = 0; 
  $('.container').data('left item', leftItem); 
 
  $('.container').css('margin-left', -columnWidth * leftItem + '%'); 
 
}); 
 
$('.right').on('click', function() { 
  var count = $('.container div').length; 
  var columns = 3; 
  var columnWidth = 100 / columns; 
 
  if (count <= columns) return; 
 
  var leftItem = $('.container').data('left item'); 
  if (typeof leftItem === "undefined") { 
    leftItem = 0; 
  } 
 
  leftItem = leftItem + 1; 
  if ((leftItem + columns) > count) leftItem = count - columns; 
  $('.container').data('left item', leftItem); 
 
  $('.container').css('margin-left', -columnWidth * leftItem + '%'); 
 
});

.container-wrap { 
  width: 300px; 
  overflow: hidden; 
} 
 
.container { 
  width: 600px; 
  display: block; 
} 
 
.block { 
  width: 100px; 
  border: 1px solid red; 
  display: block; 
  float: left; 
  box-sizing: border-box; 
} 
 
.left, 
.right { 
  display: inline-block; 
  width: 300px; 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<div class="container-wrap"> 
  <div class="container"> 
    <div class="block">1</div> 
    <div class="block">2</div> 
    <div class="block">3</div> 
    <div class="block">4</div> 
    <div class="block">5</div> 
    <div class="block">6</div> 
  </div> 
</div> 
<div class="left"> &lt; </div> 
<div class="right"> &gt; </div>