Você pode usar esse plugin citado "twbs-pagination" da seguinte forma:
Baixe o zip na página do plugin e carregue-o no seu projeto usando o arquivo jquery.twbsPagination.min.js
:
<script src="jquery.twbsPagination.min.js"></script>
Adicionei as classes hide
(nativa do Bootstrap, que oculta a div
) e paginas
(criada por mim para dar uma referência às divs
que serão manipuladas, como se cada div
com esta classe fosse uma página):
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 12 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
Em seguida, na última div
, onde estarão os botões, adicionei a classe paginas-bts
, para diferenciá-la das outras:
<div class="row paginas-bts">
<div class="col-md-5">
</div>
<div class="col-md-5">
<ul id="pagination">
</ul>
</div>
</div>
Para finalizar, basta chamar o plugin no jQuery após o carregamento da página (veja que criei algumas variáveis para contar o número de divs
automaticamente):
$(window).on("load", function(){
var pag_div = $("#conteudo .container div.paginas"); // seleciono as divs que serão paginadas, exceto a que contém os botões
var num_div = pag_div.length; // conto o número de divs
$('#pagination').twbsPagination({
totalPages: num_div,
visiblePages: 5,
onPageClick: function (event, page) {
pag_div.addClass("hide"); // escondo todas as divs
pag_div.eq(page-1).removeClass("hide"); // mostro a div da página
}
});
});
Veja em ação:
$(window).on("load", function(){
var pag_div = $("#conteudo .container div.paginas");
var num_div = pag_div.length;
$('#pagination').twbsPagination({
totalPages: num_div,
visiblePages: 5,
onPageClick: function (event, page) {
pag_div.addClass("hide");
pag_div.eq(page-1).removeClass("hide");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://esimakin.github.io/twbs-pagination/js/jquery.twbsPagination.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<section id="conteudo">
<div class="container">
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 12 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 13 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 14 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 15 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 16 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row paginas-bts">
<div class="col-md-5">
</div>
<div class="col-md-5">
<ul id="pagination">
</ul>
</div>
</div>
</div>
<section>