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">
<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">
<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">
<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>
CSS
.panel:nth-child(n+2) {
display: none;
}
JavaScript
$(".panel-slider-controls a").click(function () {
var self = $(this);
if(self.hasClass('pull-left')) {
var prevPanel = $('.panel:visible').prevAll('.panel').first();
if(prevPanel.size() == 0) {
prevPanel = $('.panel').last();
}
$('.panel').not(prevPanel).hide();
prevPanel.show();
}
else if(self.hasClass('pull-right')) {
var nextPanel = $('.panel:visible').nextAll('.panel').first();
console.log(nextPanel.size());
if(nextPanel.size() == 0) {
nextPanel = $('.panel').first();
}
$('.panel').not(nextPanel).hide();
nextPanel.show();
}
});