Нажмите, чтобы прокручивать внутри переполненного горизонтального div

Question

Я использую следующий код для создания карусели изображения на странице. Я добавил немного кода JS, чтобы иметь возможность прокручивать его до определенного изображения при нажатии на них, но он не работает, как я ожидаю. То есть, когда я нажимаю на изображение, я хочу, чтобы div прокручивался до этого конкретного изображения.

Любые идеи? Любая помощь будет оценена по достоинству.

Спасибо!

HTML:

<div class="carousel-frame"> 
    <ul> 
     <li class="carousel-item"> 
      <img width="600" height="400" src="img01.jpg" /> 
     </li> 
     <li class="carousel-item"> 
      <img width="600" height="400" src="img02.jpg" /> 
     </li> 
     <li class="carousel-item"> 
      <img width="600" height="400" src="img03.jpg" /> 
     </li> 
     <li class="carousel-item"> 
      <img width="600" height="400" src="img04.jpg" /> 
     </li> 
    </ul> 
</div> 

CSS:

.carousel-frame { 
    width: 100%; 
    margin-bottom: 2em; 
    padding-bottom: 1em; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

.carousel-frame ul { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    list-style: none; 
} 

.carousel-frame li { 
    display: inline-block; 
    margin: 0 5px 0 0; 
    padding: 0; 
} 

JS:

$('.carousel-frame .carousel-item').on('click', function(e) { 
    var slideWidth = $(this).width(); 
    var scrollTo = $(this).position().left; 
    var offset = scrollTo - (slideWidth/2); 
    $(this).parent().parent().animate({ 
     scrollLeft: offset 
    }, 500); 
    e.preventDefault(); 
}); 

FIDDLE:

https://jsfiddle.net/occrnja9/9/

Answer 1

Мне удалось найти решение.

JS:

$('.carousel-frame .carousel-item').on('click', function(e) { 
    var container = $(this).parent().parent(); 
    var slideWidth = $(this).width(); 
    var frameWidth = container.width()/2; 
    var slidePosition = $(this).position().left; 
    var offset = container.scrollLeft() + slidePosition - frameWidth + slideWidth/2; 
    container.animate({ 
     scrollLeft: offset 
    }, 500); 
    e.preventDefault(); 
}); 

скрипка:

https://jsfiddle.net/occrnja9/10/