JSFiddle - React, Tailwind, and code Playground

by Konstantin Cryman

HTML

<div class="showMustGoOn">
<img src="http://cats-exotic.ru/images/stories/Delgado/156058_1.jpg"  data-description="Тут описание картинки, как оно есть"/>
<img src="http://s59.radikal.ru/i166/1102/26/ff140ccae691.gif" />
<img src="http://ktoluchshe.ru/vsrund/085/10/kto-milee24-2.jpg" />
<img src="http://static.ngs.ru/news/preview/46431d5da5c526f2e03215a460cd6aa1077f56f1_250.jpg" />
<img src="http://textunique.com/wp-content/uploads/2012/05/kot.jpg" />
<img src="http://ru.toluna.com/dpolls_images/2013/03/05/78994144-aeb2-4436-89cb-a09cad957a00.jpg" />
<img src="http://amarket.by/cache/com_zoo/images/6_4bcbc8c44ce9fe80f8513f6607d47a1c.jpg" />
</div>

<div class="showMustGoOn">
<img src="http://cats-exotic.ru/images/stories/Delgado/156058_1.jpg"  data-description="Тут описание картинки, как оно есть"/>
<img src="http://s59.radikal.ru/i166/1102/26/ff140ccae691.gif" />
<img src="http://ktoluchshe.ru/vsrund/085/10/kto-milee24-2.jpg" />
<img src="http://static.ngs.ru/news/preview/46431d5da5c526f2e03215a460cd6aa1077f56f1_250.jpg" />
<img src="http://textunique.com/wp-content/uploads/2012/05/kot.jpg" />
<img src="http://www.antarktis.ru/fotos/tuleny_get/image001.jpg" />
<img src="http://ru.toluna.com/dpolls_images/2013/03/05/78994144-aeb2-4436-89cb-a09cad957a00.jpg" />
</div>

CSS

.header{
    height: 1700px;
    width: 800px;
    margin: 0 auto; 
    background: #333;
}

.wrap_oneProdComments{
    position: relative;
    width: 800px;
    margin: 0 auto; 
}

.hidden{
    visibility: hidden;
    height: 1px;
}

.showNow{
    visibility: visible;
    height: auto;
    
    transition: 1s ease-out;
}

#doCommentOneProd{
    position: absolute;
    top: 140px;
    right: 0px;
    height: 40px;
    width: 100px;
    background: #333;
}

.sp_li{
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
}

.sp_li.active{
    background: #ff0;
}
.sp_li.active:before{
    position: absolute;
    content: '';
    display: block;
    z-index: 100;
    width: 48px;
    height: 48px;
}

JavaScript

//

var SlideProjector = {
    // Сборщик всех объектов Прожектора
    collector: [],
    // Хранилище для будущих собранных частей
    sliders: [],
    // 
    prefix: 'sp_',
    // Селектор СлайдПроектора
    selector: '',
    
    
    // Увлекательные события
    actions: {
        // Ссылка на коллектор объектов
        collector: [],
        // В дальнейшем Верховный объект
        self: {},
        
        
        // Активация картинки
        imageEnable: function(id){
            var img = this.getByID(id);
                img.el.css({display: 'block'});
        },
        // Дизактивация всех картинок в конкретном слайдере
        imagesDisable: function(id){
            var collector = this.collector;
            for(var i = 0; i < collector.length; i++){
                if(collector[i].pid === id && collector[i].type === 'image'){
                    collector[i].el.css({display: 'none'});
                }
            };
        },
        // Активация конкретного пункта
        toggleActiveLi: function(selfID, parentID){
            
           var parent = this.getByID(parentID);
           var navi = parent.navi.el;
           
               $(navi).find('li').each(function(i, e){
                   var curObj = $(e);
                   if( curObj.data('target') !== selfID ){
                       
                        curObj.removeClass('active');
                        curObj.css({
                            background: 'transparent'
                        });
                   }
                   if( curObj.data('target') === selfID ){
                       
                        curObj.addClass('active');
                        curObj.css({
                        'background' : 'rgb('+ Math.floor((Math.random()*40)+180) +','+ Math.floor((Math.random()*40)+180) + ','+ Math.floor((Math.random()*40)+180) +')'
                    });
                   }
               });
               
        },
        
        
        
    ...