JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="container">
    <div class="inner-container">
        <img src="" alt="1">
        <img src="" alt="2">
        <img src="" alt="3">
        <img src="" alt="4">
        <img src="" alt="5">
        <img src="" alt="6">
        <img src="" alt="7">
    </div>
</div>

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

CSS

.container {
    position: relative;
    width: 600px;
    height: 300px;
    /* border: 1px solid #000; */
    overflow: hidden;
}

.inner-container {
    position: absolute;
    width: 2200px;
    background: #ccc;
}

.inner-container img {
    float: left;
    width: 300px;
    height: 300px;
    border: 1px solid #F00;
    cursor: pointer;
}

JavaScript

var containerWidth = $('.container').width(),
    containerWidthHalf = $('.container').width() / 2,
    galleryItemWidth = $('.inner-container img').width(),
    galleryCount = $('.inner-container img').length,
    middleOffset = (containerWidth + containerWidthHalf) / 2;
    $innerContainer = $('.inner-container');


console.log(containerWidthHalf);

var clickLogic = function(clicked){
    
    var leftOffset = -(galleryItemWidth * clicked) + middleOffset;
    
    if(clicked === 1){
        $innerContainer.animate({'left': 0}, 300);
    } else if (clicked === galleryCount) {
        $innerContainer.animate({'left': -(galleryCount * galleryItemWidth) + containerWidth}, 300);
    } else {
        $innerContainer.animate({'left': leftOffset}, 300);      
    }
}

$("ul li").on('click', function(e){
    var clicked = $(this).index() + 1;

    clickLogic(clicked);
              
    console.log(leftOffset);
});

$('.inner-container img').on('click', function(e){
    var clicked = $(this).index() + 1;
    
    clickLogic(clicked);
});