CODEWITHSUNDEEP
javascriptjquery
Kim Santos
Kim Santos

Reputation: 93

My carousel works perfectly horizontally, but how to make it work vertically?

I have this carousel on my website to display product images. When an LI element is clicked, this LI scrolls to the center whithin UL. It's works well horizontally, but how do I make it work vertically?

I tried to just change Widht and width to Height and height and Left and left to Top and top and ScrollLeft to ScrollTop but of course it doesn't work as it should.

Demo: 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');
});

Upvotes: 0

Views: 37

Answers (1)

Nithin Thampi
Nithin Thampi

Reputation: 3689

I have updated the fiddle with a few edits. Hope this helps! You should be able to take it up from here.

Fiddle 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;
}

Upvotes: 1

Related Questions