JSFiddle - React, Tailwind, and code Playground

by colemande

HTML

<div class="container">
    <ul id="list-1">
        <li class="active"></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
    </ul>
</div>

<div class="container">
    <ul id="list-2">
        <li><a class="active" href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
    </ul>
</div>

CSS

.container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver;  }        

ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; }
li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; }

#list-1 li.hover { background: orange; }
#list-1 li.active { background: purple; }

#list-2 li a { display: block; width: 120px; height: 80px; outline: none; }
#list-2 li a:hover { background: teal; }
#list-2 li a.active { background: navy; }

JavaScript

// list 1
var idx = 0;
$('#list-1 li').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
}).click(function() {
    var currentindex = $('.active').index();
    var selectedindex = $(this).index();
    var nexthoverindex = selectedindex + (selectedindex - currentindex);
    
    //counter for starting on index 1
    if(currentindex === 1 && selectedindex > 2){
        nexthoverindex = nexthoverindex - 1;
    }
    
    //counter for starting on index 0
    if(currentindex === 0 && selectedindex > 2){
        nexthoverindex = nexthoverindex - 2;
    }
    
    //make sure the selection never goes below 0
    if(nexthoverindex < 0){
        nexthoverindex = 0;
    }
    
    $('#list-1 > li').removeClass('active');
    $(this).addClass('active');
    var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle
    idy = Math.max(0, id * 90);
    $(this).parent().animate({
        'top': -idy + 'px'
    },200, function(){
        //alert(nexthoverindex);            
        $('.hover').removeClass('hover');
        if(currentindex > 2 || selectedindex > 2){
        $('#list-1 > li').eq(nexthoverindex).addClass('hover');
        }
    });
    return false;
}).css('cursor', 'pointer').each(function() {
    $(this).data('index', idx);
    ++idx;
});


// list 2
var idx_2 = 0;
$('#list-2 li a').click(function() {
    $('#list-2 > li a').removeClass('active');
    $(this).addClass('active');
    var id = $('#list-2 li a.active').data('index') - 2;
    idy = Math.max(0, id * 90);
    $(this).parent().parent().animate({
        'top': -idy + 'px'
    });
    return false;
}).each(function() {
    $(this).data('index', idx_2);
    ++idx_2;
});