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

456

26 ноября 2016, 18:42

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

css:
.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%}
HTML
<div class="wrap">
     ul>
     li>изображение 1</li>
     li>изображение 2</li>
     li>изображение 3</li>
     </ul>
     </div>

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

Answer 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%; 
}

<div class="wrapper"> 
  <div class="main"> 
 
    <img src="http://milana-tour.ru/wp-content/uploads/2015/09/tumblr_static_railay_beach_panorama.jpeg"> 
  </div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>