JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left_sidebar">
                     <ul id="skola">
                    		<li data-id="pp322"><a href="">Design oděvu</a></li>
                
               		<li data-id="pp310"><a href="">Design interiéru a textilu</a></li>
                
               		<li data-id="pp298"><a href="">Užitá fotografie</a></li>
                
               		<li data-id="pp284"><a href="">Užitá malba</a></li>
                
               		<li data-id="pp255"><a href="">Scénická a výstavní tvorba</a></li>
                

                
                              <!-- end of the loop -->
               <!-- pagination here -->
                              </ul>
                                   
               
                  
            </div>
            <div id="content">
                                                                                <div class="feauture_picture_obor" data-id="pp322">
               <img width="3072" height="2304" src="picture" class="attachment-post-thumbnail wp-post-image" alt="P1090436" />             </div>
                                         <div class="feauture_picture_obor" data-id="pp310">
                            </div>
                                         <div class="feauture_picture_obor" data-id="pp298">
                            </div>
                                         <div class="feauture_picture_obor" data-id="pp284">
                            </div>
                                         <div class="feauture_picture_obor" data-id="pp255">
                            </div>
                                         <div class="feauture_picture_obor" data-id="pp242">
                            </div>
                                         <div class="feauture_picture_obor" data-id="pp230">
                            </div>
                                         <div class="feauture_picture_obor" data-id="pp214">
                            </div>
                     ...

CSS

#skola li a:hover, .activeli a {
    color: #000 !important;
    background: none repeat scroll 0% 0% transparent;
}

JavaScript

//setInterval(function() {
   var titles=jQuery("#skola").children();
   function fadeInTitles(titles, timeOut){
    var timeOut=timeOut || 4000;
    var len=titles.length, currentItem=0;
    function showTitle(){
	jQuery(titles[currentItem]).toggleClass('activeli');
	currentItem+=1;
	var data = jQuery('.activeli').attr("data-id");
		jQuery('.feauture_picture_obor').each(function(i,ele){
			if (jQuery(this).attr("data-id") == data) { jQuery(this).addClass("activeimg"); }
		})
	
	jQuery(titles[currentItem]).toggleClass('activeli');
	
	if(currentItem<len) setTimeout(showTitle, timeOut);
    }
    showTitle();
    }
fadeInTitles(titles);
//}, 50000);