Моя карусель работает идеально горизонтально, но как заставить ее работать вертикально?

Question

У меня есть эта карусель на моем сайте для отображения изображений товара. При щелчке элемента LI этот LI прокручивается в центр в пределах UL. Он хорошо работает по горизонтали, но как я могу заставить его работать по вертикали?

Я попытался просто изменить Widht и width на Height и height, а затем Left и left to Top и top и ScrollLeft на ScrollTop, но, конечно, это не так. т работает как надо.

Демо: https://jsfiddle.net/of2wxjy3/

<div class="product-preview_mobile-thumbnails-list-inner">
<ul>
<li class="product-preview_mobile-thumbnails-list_item">
<img class="current-mobile-thumbnail" src="https://1.bp.blogspot.com/-pdOOEtG_uYE/XZOHBvNx0QI/AAAAAAAAAI4/K-ShSavM3sUJMLR-vpZd8yftpm3v3eYPwCLcBGAsYHQ/s320/1.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-SVSc51GKlfk/XZOHBrU-r8I/AAAAAAAAAI8/87c17psUxsgQImo9DNwpLH_lqEN5ycoXQCLcBGAsYHQ/s320/2.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-WzhHuteXzpU/XZOHBinqdxI/AAAAAAAAAI0/r4eCe3ECseogebJUueeQ3W_3nDIHSwdsQCLcBGAsYHQ/s320/3.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-J0ky_WiapH4/XZOHCQ-LdgI/AAAAAAAAAJA/STOcX4imVZ05o62p9ovVvM-jsUtJ4tKWwCLcBGAsYHQ/s320/4.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-LgovTz7CQNk/XZOHDMKOPUI/AAAAAAAAAJE/3r3zCOO9JGIMMHbsP6RSOlyVWnZ1EQn9wCLcBGAsYHQ/s320/5.jpg">
</li>
</ul>
</div>

.product-preview_mobile-thumbnails-list-inner {
    margin: 0 auto;
    width: 200px;
    overflow-x: scroll;
    float: left;
    white-space: nowrap;
}

.product-preview_mobile-thumbnails-list-inner ul {
    margin: 0 auto;
    height: 100%;
    list-style: none;
    width: max-content;
    padding: 0 20px;
}

.product-preview_mobile-thumbnails-list_item {
    display: inline-block;
    margin: 0 13.49px 0 0;
}

.product-preview_mobile-thumbnails-list_item:last-child {
    margin: 0;
}

.product-preview_mobile-thumbnails-list_item img {
    border: 0;
    border-top: 2px solid gainsboro;
    box-shadow: none;
    background: #FFF;
    padding: 12.5px 0 0;
    border-radius: 0;
    width: 60px;
    height: 60px;
}

.current-mobile-thumbnail {
    border-top-color: #231f20!important;
}

$('.product-preview_mobile-thumbnails-list-inner ul li').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
    }, 250);
    e.preventDefault();
});

$('.product-preview_mobile-thumbnails-list-inner ul li img').on('click', function(){
    $('img.current-mobile-thumbnail').removeClass('current-mobile-thumbnail');
    $(this).addClass('current-mobile-thumbnail');
});

Answer 1

Я обновил скрипку с несколькими правками. Надеюсь это поможет! Вы должны быть в состоянии взять это отсюда.

Скрипка https://jsfiddle.net/q246gsku/4/

JS

$(".product-preview_mobile-thumbnails-list-inner ul li").on("click", function(e) {
  var container = $(this).parent().parent();
  var slideWidth = $(this).height();
  var frameWidth = container.height() / 2;
  var slidePosition = $(this).position().top;
  var offset = container.scrollTop() + slidePosition - frameWidth + slideWidth / 2;
  container.animate(
    {
      scrollTop: offset
    },
    250
  );
  e.preventDefault();
});

$(".product-preview_mobile-thumbnails-list-inner ul li img").on(
  "click",
  function() {
    $("img.current-mobile-thumbnail").removeClass("current-mobile-thumbnail");
    $(this).addClass("current-mobile-thumbnail");
  }
);

CSS

.product-preview_mobile-thumbnails-list-inner {
    margin: 0 auto;
    width: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    float: left;
    white-space: nowrap;
}

.product-preview_mobile-thumbnails-list-inner ul {
    margin: 0 auto;
    height: 200px;
    list-style: none;
    width: max-content;
    padding: 0 20px;
}

.product-preview_mobile-thumbnails-list_item {
    display: block;
    margin: 0 13.49px 0 0;
}

.product-preview_mobile-thumbnails-list_item:last-child {
    margin: 0;
}

.product-preview_mobile-thumbnails-list_item img {
    border: 0;
    border-top: 2px solid gainsboro;
    box-shadow: none;
    background: #FFF;
    padding: 12.5px 0 0;
    border-radius: 0;
    width: 60px;
    height: 60px;
}

.current-mobile-thumbnail {
    border-top-color: #231f20!important;
}