document.querySelector(".carousel-module").addEventListener("click", function(e) {
var parent = document.querySelector(".img-container"),
first = parent.querySelector(".item-img"),
last = parent.querySelector(".item-img:last-child");
if (e.target.classList.contains("arrow-left")) {
parent.appendChild(first)
}
if (e.target.classList.contains("arrow-right")) {
parent.insertBefore(last, first)
}
});
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
outline: 0
}
.carousel-module {
margin-top: 100px;
min-width: 660px;
text-align: center
}
.img-container {
display: inline-block;
position: relative;
height: 100px;
width: 600px;
border: 2px solid #000;
overflow: hidden
}
.arrow-left,
.arrow-right {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
cursor: pointer;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s
}
.arrow-left {
border-width: 50px 20px 50px 0;
border-color: transparent #000000 transparent transparent
}
.arrow-right {
border-width: 50px 0 50px 20px;
border-color: transparent transparent transparent #000000
}
.arrow-left:active,
.arrow-right:active {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8)
}
.item-img {
position: absolute;
top: 50%;
left: 50%;
cursor: pointer;
-webkit-transition: .7s;
-o-transition: .7s;
transition: .7s
}
.item-img:nth-of-type(1) {
-webkit-transform: translate(-530%, -50%);
-ms-transform: translate(-530%, -50%);
transform: translate(-530%, -50%)
}
.item-img:nth-of-type(2) {
-webkit-transform: translate(-410%, -50%);
-ms-transform: translate(-410%, -50%);
transform: translate(-410%, -50%)
}
.item-img:nth-of-type(3) {
-webkit-transform: translate(-290%, -50%);
-ms-transform: translate(-290%, -50%);
transform: translate(-290%, -50%)
}
.item-img:nth-of-type(4) {
-webkit-transform: translate(-170%, -50%);
-ms-transform: translate(-170%, -50%);
transform: translate(-170%, -50%)
}
.item-img:nth-of-type(5) {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.item-img:nth-of-type(6) {
-webkit-transform: translate(70%, -50%);
-ms-transform: translate(70%, -50%);
transform: translate(70%, -50%)
}
.item-img:nth-of-type(7) {
-webkit-transform: translate(190%, -50%);
-ms-transform: translate(190%, -50%);
transform: translate(190%, -50%)
}
.item-img:nth-of-type(8) {
-webkit-transform: translate(310%, -50%);
-ms-transform: translate(310%, -50%);
transform: translate(310%, -50%)
}
.item-img:nth-of-type(9) {
-webkit-transform: translate(430%, -50%);
-ms-transform: translate(430%, -50%);
transform: translate(430%, -50%)
}
<div class="carousel-module">
<div class="arrow-left"></div>
<div class="img-container"><img class="item-img" src="https://dummyimage.com/100x100/EF5350/000000.png&text=image" alt="" /><img class="item-img" src="https://dummyimage.com/100x100/BA68C8/000000.png&text=image" alt="" /><img class="item-img" src="https://dummyimage.com/100x100/7986CB/000000.png&text=image"
alt="" /><img class="item-img" src="https://dummyimage.com/100x100/64B5F6/000000.png&text=image" alt="" /><img class="item-img" src="https://dummyimage.com/100x100/4DB6AC/000000.png&text=image" alt="" /><img class="item-img" src="https://dummyimage.com/100x100/81C784/000000.png&text=image"
alt="" /><img class="item-img" src="https://dummyimage.com/100x100/AED581/000000.png&text=image" alt="" /><img class="item-img" src="https://dummyimage.com/100x100/DCE775/000000.png&text=image" alt="" /><img class="item-img" src="https://dummyimage.com/100x100/FB8C00/000000.png&text=image"
alt="" /></div>
<div class="arrow-right"></div>
</div>
iframe
?div
со своими кастомными скролами, полностью сделанными Вашими ручками.