JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="container">
    <div class="inner-container">
        <img src="" alt="1" class="active">
        <img src="" alt="2">
        <img src="" alt="3">
        <img src="" alt="4">
        <img src="" alt="5">
        <img src="" alt="6">
        <img src="" alt="7">
        <img src="" alt="8">
        <img src="" alt="9">
        <img src="" alt="10">
        <img src="" alt="11">
        <img src="" alt="12">
    </div>
</div>

<ul class="tabs"> 
    
<li class="active" rel="tab1">1931</li>
<li rel="tab2">1941</li>
<li rel="tab3">1952</li>
<li rel="tab4">1961</li>
<li rel="tab5">1972</li>
<li rel="tab6">1988</li>
<li rel="tab7">1991</li>
<li rel="tab8">1996</li>
<li rel="tab9">2001</li>
<li rel="tab10">2004</li>
<li rel="tab11">2011</li>
<li rel="tab12">2013</li>
<div class="grey_slide"><div>
    
</ul>

<div class="tab_container"> 

     <div id="tab1" class="tab_content"> 
 <p class="lafamilia">ECKLKOFER <br>DIE BAU-FAMILIE</p>
         <p class= "lafamilia-text">      
         <strong>
    Im Mai beginnt Andreas Ecklkofer, der Großvater des heutigen Firmeninhabers, in Neuötting sein Baugeschäft. In seiner Eigenschaft als Bauunternehmer schafft er die meisten Großbauten innerhalb der Nachkriegszeit in Neuötting, z.B. die Berufsschule, die Grund- und Hauptschule, führt aber auch verschiedene Umbaumaßnahmen an der Burg sowie im Kurfürst-Maximilian-Gymnasium in Burghausen durch.
         </strong>
         </p>

     </div>
     <div id="tab2" class="tab_content"> 
           <p class="lafamilia">ECKLKOFER <br>DIE BAU-FAMILIE</p>

       <p class= "lafamilia-text">
          <strong>
         Helmut Ecklkofer wird als Sohn der Baumeistereheleute  Andreas und Elisabeth Ecklkofer, geb. Krähn, geboren. Das Betriebsgelände liegt schon seit den Nachkriegsjahren an der Innstraße in Neuötting. Spektakuläre Reparaturarbeiten an der Neuöttinger Stadtpfarrkirche St. Nikolaus untermauern den guten Ruf des Bauunternehmens.

          </strong>
       </p>

    ...

CSS

body{
    width:700px;
}

    ul.tabs {
        float: left;
        list-style: none;
        width:638px;        
    }

    ul.tabs li {
        float: left;
        cursor: pointer;
        height: 19px;
        line-height: 19px;
        font-weight: bold;
        background:#F39400;       
        overflow: hidden;
        position: relative;
        padding: 1px 11px 1px 10px;  
    }

    ul.tabs li:hover , ul.tabs li.active{
        color:#fff;
        border-bottom:8px solid #fff;
        line-height:19px;
        z-index:9999;        
    }    

    .tab_container {
        border-top: none;
        clear: both;
        float: left; 
        background: #FFFFFF;
    }

    .tab_content {
        padding: 20px;
        display: none;
    }

   .grey_slide{
    position:relative;
    top:21px;
    background:#B0B0B3;
    width:636px;
    height:8px; 
}
.lafamilia-text{
    width:350px;
    float:right;
    font-size:15px;
    display:inline-block;
}
.lafamilia{
    width:250px;
    float:left;
    font-size:25px;
    display:inline-block;

}


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

.inner-container {
    position: absolute;
    width: 4200px;
}

.inner-container img {
    float: left;
    width: 300px;
    height: 300px;
    /* border: 1px solid #F00; */
    cursor: pointer;
    background: #CCC;
    opacity: .5;
}
.inner-container img.active {
    opacity: 1;
}

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');

var changeContent = function(clicked){
    var $listItems = $("ul.tabs li")
    $listItems.removeClass("active");
    $listItems.eq(clicked -1).addClass("active");
    $(".tab_content").hide();
    var activeTab = $listItems.eq(clicked -1).attr("rel"); 
    $("#"+activeTab).show();
}

var clickLogic = function(clicked){
    
    var leftOffset = -(galleryItemWidth * clicked) + middleOffset;
        $photoItems = $('.inner-container img');
    
    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);      
    }

    $photoItems.removeClass("active");
    $photoItems.eq(clicked -1).addClass("active");
}

//$("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);
    changeContent(clicked);
});

$(document).ready(function() {

    $(".tab_content").hide();
    $(".tab_content:first").show(); 

    $("ul.tabs li").click(function() {
        var clicked = $(this).index() + 1;
        
        changeContent(clicked);

        clickLogic(clicked);
    });
});