JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<div class="slider">
                <div class="arrow left">&lt;-</div>
                <div class="slides">
                    <div class="pos-1" id="de"><a href=""><img src="http://ostranah.ru/media/flags/belgium_small_flag.gif" width="60" height="30" alt="Немецкий"><span>Немецкий</span></a></div>
                    <div class="pos-2" id="es"><a href=""><img src="http://ostranah.ru/media/flags/andorra_small_flag.gif" width="60" height="30" alt="Испанский"><span>Испанский</span></a></div>
                    <div class="pos-3" id="it"><a href=""><img src="http://ostranah.ru/media/flags/armenia_small_flag.gif" width="60" height="30" alt="Итальянский"><span>Итальянский</span></a></div>
                    <div class="pos-4" id="en"><a href=""><img src="http://ostranah.ru/media/flags/botswana_small_flag.gif" width="60" height="30" alt="Английский"><span>Английский</span></a></div>
                    <div class="pos-5" id="fr"><a href=""><img src="http://ostranah.ru/media/flags/bhutan_small_flag.gif" width="60" height="30" alt="Французский"><span>Французский</span></a></div>
                    <div class="pos-6" id="nl"><a href=""><img src="http://ostranah.ru/media/flags/united_kingdom_small_flag.gif" width="60" height="30" alt="Голландский"><span>Голландский</span></a></div>
                </div>
                <div class="arrow right">-&gt;</div>
        </div>

CSS

.slider { position: absolute; top: 135px; left: 150px; }
.slider > div { display:inline-block; }
.slides { width:550px; height:53px; position:relative; font-size:70%; overflow: hidden; }
.arrow { width: 16px; height: 15px; background: url(pictures/arrowsSprite.png) no-repeat;}
.arrow.left  { background-position: -16px 0; }
.left:hover { background-position: 0 0; }
.arrow.right { background-position: -32px 0; }
.right:hover { background-position: -48px 0 }
.slides > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; }
 
[class*="pos-"] { position: absolute; color: #0094d9;transition: all 0.2s; }
.no-transition{transition:none}
.pos-0 { top: 10px; left: -80px; }
.pos-1 { top: 10px; left: 0 }
.pos-2 { top: 2px; left: 90px; }
.pos-3 { left: 180px; }
.pos-4 { left: 280px; }
.pos-5 { top: 2px; left: 373px; }
.pos-6 { top: 10px; left: 463px; }
.pos-7 { top: 10px; left: 550px; }

JavaScript

$('.slides').prepend($('.pos-6').clone().removeClass('pos-6').addClass('pos-0'));
$('.slides').append($('.pos-1').clone().removeClass('pos-1').addClass('pos-7'));

$('.slides div').each(function(index) {
   $(this).data('index', index); 
});
$('.arrow.left').click(function() {
    $('.slides div').each(function() {
        var index = $(this).data('index');
        $(this).removeClass('pos-' + index);
        if (index == 7)
            $(this).removeClass('no-transition');
        if (index == 0) {
            index = 7;
            $(this).addClass('no-transition');
        }
        else
            index -= 1;
        $(this).addClass('pos-' + index);
        $(this).data('index', index);
    });
});


$('.arrow.right').click(function() {
    $('.slides div').each(function(index) {
        var index = $(this).data('index');
        $(this).removeClass('pos-' + index);
        if (index == 0)
            $(this).removeClass('no-transition');
        if (index == 7) {
            index = 0;
            $(this).addClass('no-transition');
        }
        else
            index += 1;
        $(this).addClass('pos-' + index);
        $(this).data('index', index);
    });
});