javascript – Change image on button click


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">
    <li>изображение 1</li>
    <li>изображение 2</li>
    <li>изображение 3</li>

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


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

$(document).ready(function() {
* {
  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="">

<script src=""></script>
Scroll to Top