JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="panel-slider">
<div class="panel" id="1">
<div class="panel-header">News Update 1</div>
<div class="panel-body">
<img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
</div>
<div class="panel hide" id="2">
<div class="panel-header">News Update 2</div>
<div class="panel-body">
<img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc
</div>
</div>
<div class="panel hide" id="3">
<div class="panel-header">News Update 3</div>
<div class="panel-body">
<img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc
</div>
</div>
<div class="panel-slider-controls">
<a href="#" class="pull-left">Prev</a>
<a href="#" class="pull-right">Next</a>
</div>
</div>
JavaScript
var panel_index = 1;
$(".panel-slider .panel-slider-controls a").click(function()
{
var that = $(this);
$(".panel[id=" + panel_index + "]").addClass("hide");
if (that.text() == "Prev")
{
if (panel_index > 1)
{
panel_index--;
$(".panel[id='" + panel_index + "']").removeClass("hide");
}
else
{
panel_index=3;
$(".panel[id='3']").removeClass("hide");
}
}
else //it's Next
{
if (panel_index < 3)
{
panel_index++;
$(".panel[id='" + panel_index + "']").removeClass("hide");
}
else
{
panel_index=1;
$(".panel[id='1']").removeClass("hide");
}
}
});