JSFiddle - React, Tailwind, and code Playground

by sureshmonster

HTML

<div class="myclass selected">
    <h2 class="sl-title">#Content 1</h2>
    This is Content 1
</div>
<div class="myclass">
    <h2 class="sl-title">#Content 2</h2>
    This is Content 2
</div>
<div class="myclass">
    <h2 class="sl-title">#Content 3</h2>
    This is Content 3
</div>

<ul>
  <li><img src="http://www.lillehammer.com/ImageVault/Images/id_2122/scope_66/ImageVaultHandler.aspx" /></li>
  <li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Valued_image_seal.svg/40px-Valued_image_seal.svg.png" /></li>
  <li><img src="http://www.iconico.com/i/icoImageFilterPro100.gif" /></li>
</ul>

<a class="next">next</a>

CSS

.myclass {
    display:none;
}

ul li {
    display: inline-block;
}

img {
    height: 20px; 
    width: 20px; 
    padding: 20px; 
}

.myclass.selected {
    display: block;
}

ul li.selected {
    background-color: yellow;
}

ul li, .next {
    cursor: pointer;
}

JavaScript

setActive(0);

$('li').click(function() {
    setActive($(this).index());
});

$(".next").click(function(){
    var current = $('ul li.selected').index(),
        maxIndex = $('ul li').length - 1,
        next = (current + 1) >  maxIndex ? 0 : (current + 1);
    
    setActive(next);
});

function setActive(i) {
    var li = $('ul li').eq(i);
    
    $('ul li').removeClass('selected');
    li.addClass('selected');
    $('.myclass').removeClass('selected');
    $('.myclass').eq(i).addClass('selected');
}