Смена изображения при клике на кнопку

#javascript #html #css #scroll

Есть задача -нужен блок, где можно будет прокрутить длинное изображение (или несколько
стоящих в ряд) горизонтальным скроллом влево-вправо. Скролл должен начинаться с середины. 
На данный момент реализовал так:



.wrap {
  width: 400px;
  height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
}

.wrap ul {
  min-width: 100%;
  white-space: nowrap;
  padding: 0;
}

.wrap li {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 200px;
  margin-right: -10px;
}

.wrap li img {
  max-width: 100%;
}

  

    
изображение 1
    
изображение 2
    
изображение 3
  





Нашел в интернете, что с помощью $(selector).scrollleft(position) можно поставить
изначальную позицию скролла на середину, но не удалось это прописать. Версткой недавно
занимаюсь, в скриптах смыслю пока что мало, прошу совета) Так же попутно есть вопрос,
есть ли кроссбраузерные решения для изменения внешности скроллбара? А то пишут через
css только на IE работает
    

Ответы

Ответ 1

Тухленко получилось, лучше бы программно вычислить длину изображения



$(document).ready(function() {
  $('.wrapper').scrollLeft(400);
});
* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  height: 230px;
  position: relative;
}
.wrapper {
  width: 700px;
  margin: auto;
  border: 3px solid red;
  overflow-x: scroll;
}
.main {
  width: 100%;
}

  


    
  





Ответ 2

Вам в помощь javascript.
На чистом css можно сделать подобное через псевдокласс :focus или :active на кнопку,
а к псевдоклассу привязать анимацию @keyframes, которая будет двигать картинку 
при этом должен быть body: {overflow-x: hidden;} чтобы горизонтальная прокрутка была
спрятана, ее также можно активировать через псевдокласс :focus или :active если столь
необходимо будет.


Ответ 3

Уже была похожая тема(моя кстати) - Вертикальный слайдер. Как сделать карусель?.
Используя ответ @рони, вот пример на нативном



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%)
}