Carousel on js

carousel-on-js.markdown

Carousel on js

A Pen by Alexander Matskevich on CodePen.

License.

dwenyx.markdown

dWeNYx

A Pen by Alexander Matskevich on CodePen.

License.

index.html

<button id="prev">prev</button>
<div class="car" id="car-id">
  <ul class="car__line" id="car__line-id">
    <li class="line__item" id="line__item-id">
      <img src="http://matskevich.info/giftshop/img/new-prod-1.png" class="item__img" id="item__img-id">
    </li>
    <li class="line__item" id="line__item-id">
      <img src="http://localhost/giftshop/img/new-prod-2.png" class="item__img" id="item__img-id">
    </li>
    <li class="line__item" id="line__item-id">
      <img src="http://localhost/giftshop/img/new-prod-3.png" class="item__img" id="item__img-id">
    </li>
  </ul>
</div>

script.js

document.getElementById('prev').onclick = shiftLeft;

function shiftLeft () {
  var line = document.getElementById('car__line-id');
  var last = document.line.children[2];
  var pre = 'fuck';
      // last.cloneNode(true);
  
  car__line-id.insertBefore(pre, line.children[1]);
  
  
}

style.css

button {
  margin: 5px 0;
}

.car {
  max-width: 1170px;
  height: 200px;
  border: 1px solid red;
}

.car__line {
  margin: 0;
  padding: 0;
  width: 9999px;
  position: relative;
  left: 0;
  transition: all ease 1s
}

.line__item {
  display: inline-block;
  width: 370px;
  height: 200px;
  margin-right: 26px;
  overflow: hidden;
}