javascript – Change image on button click

Question:

There is a task – we need a block where it will be possible to scroll a long image (or several standing in a row) with a horizontal scroll left and right. The scroll should start from the middle. Currently implemented like this:

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

<div class="wrap">
  <ul>
    <li>изображение 1</li>
    <li>изображение 2</li>
    <li>изображение 3</li>
  </ul>
</div>

I found on the Internet that using $(selector).scrollleft(position) you can set the initial scroll position to the middle, but I could not write it down. I’ve been doing layout recently, I still don’t understand much about scripts, I ask for advice) Also, along the way, there is a question, are there cross-browser solutions for changing the appearance of the scrollbar? And then they write through css only works on IE

Answer:

Tukhlenko turned out , it would be better to programmatically calculate the length of the image

$(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="https://source.unsplash.com/user/erondu/1600x900">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>