"News slider web opac"
Bootstrap 4.1.1 Snippet by csdeciph3r

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://library.tip.edu.ph/cgi-bin/koha/opac-retrieve-file.pl?id=4d82d8d6c3102682f32463f69388c418"> <div class="carousel-caption"> <h4><a href="#">T.I.P. Manila Library - Book Talk 2023</a></h4> <p>In accordance with Proclamation No. 109, s. 1936, we are celebrating the annual National Book Week this coming November 24 to 30. Our official theme for 2023 is "Read, Reread, Relive!" with the primary goal of rekindling the genuine passion for daily reading and turning aimless reading into purposeful reading.<a class="label label-primary" href="https://www.facebook.com/tipmanilalibraries/posts/pfbid02V6XuwMoPhQeMDrQoMGadrJMU3okgUEURbsaCD5cHuZpWVsset5T6LhM3JkRhY2Qxl" target="_blank">Read more.</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="https://library.tip.edu.ph/cgi-bin/koha/opac-retrieve-file.pl?id=8cd55feb70e4b8a9056bbbb60cbeb235"> <div class="carousel-caption"> <h4><a href="#">T.I.P. Quezon City Library - Book Talk 2023</a></h4> <p>The T.I.P. Q.C. Libraries and Faculty Library Committee successfully held its annual Book Talk with My Prof and Co-T.I.P.ians last November 09, 2023. This activity gathered a total of 166 students in attendance from Senior High Schools and Colleges. <a class="label label-primary" href="https://fb.watch/rovf-vM3HT/" target="_blank">Read more.</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="https://library.tip.edu.ph/cgi-bin/koha/opac-retrieve-file.pl?id=4aee7737b8558310079f58e6f8368859"> <div class="carousel-caption"> <h4><a href="#">#TIPMLALIBRoadshow23</a></h4> <p>Sample caption.---Sample caption.---Sample caption.---Sample caption.---Sample caption.---Sample caption.---Sample caption.---<a class="label label-primary" href="https://library.tip.edu.ph/#" target="_blank">Read more.</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="https://library.tip.edu.ph/cgi-bin/koha/opac-retrieve-file.pl?id=d6b6a6edb9d0b200772a5187e26afff1"> <div class="carousel-caption"> <h4><a href="#">T.I.P. Quezon City Library - Library Road Show 2023</a></h4> <p>The T.I.P. Q.C. Libraries successfully held the 11th Library Road Show last November 29, 2023 in celebration of the 88th National Book Week with the theme “READ. REREAD. RELIVE.”<a class="label label-primary" href="https://www.facebook.com/tipqclibrary/posts/pfbid031TYffNuFevXwFW9oj6iigDK7YeiznKguXAsc3rgVyAHEXWPqbnM7Uui9zxk1Vr7Hl" target="_blank">Read more.</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="https://library.tip.edu.ph/cgi-bin/koha/opac-retrieve-file.pl?id=c0eaebff7ce4f05e42a8c0ff2f60d0a8"> <div class="carousel-caption"> <h4><a href="#">T.I.P. Library MIBF 2023</a></h4> <p>The T.I.P. QC Faculty Library Committee (LibCom) attended the Manila International Book Fair held at the SMX Convention Center on September 14-16, 2023.<a class="label label-primary" href="https://www.facebook.com/watch/?v=3102281450068825" target="_blank">Read more.</a></p> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> <ul class="list-group col-sm-4"> <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>T.I.P. Manila Library - Book Talk 2023</h4></li> <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>T.I.P. Quezon City Library - Book Talk 2023</h4></li> <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>T.I.P. Manila - Library Road Show 2023</h4></li> <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>T.I.P. Quezon City - Library Road Show 2023</h4></li> <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>T.I.P. MNL/QC Libraries - MIBF 2023</h4></li> </ul> <!-- Controls --> <div class="carousel-controls"> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!-- End Carousel --> </div>
body { padding-top: 50px; } #myCarousel .carousel-caption { left:0; right:0; bottom:0; text-align:left; padding:10px; background:rgba(0,0,0,0.6); text-shadow:none; } #myCarousel .list-group { position:absolute; top:0; right:0; } #myCarousel .list-group-item { border-radius:0px; cursor:pointer; } #myCarousel .list-group .active { background-color:#eee; } @media (min-width: 992px) { #myCarousel {padding-right:33.3333%;} #myCarousel .carousel-controls {display:none;} } @media (max-width: 991px) { .carousel-caption p, #myCarousel .list-group {display:none;} }
$(document).ready(function(){ var clickEvent = false; $('#myCarousel').carousel({ interval: 4000 }).on('click', '.list-group li', function() { clickEvent = true; $('.list-group li').removeClass('active'); $(this).addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.list-group').children().length -1; var current = $('.list-group li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.list-group li').first().addClass('active'); } } clickEvent = false; }); }) $(window).load(function() { var boxheight = $('#myCarousel .carousel-inner').innerHeight(); var itemlength = $('#myCarousel .item').length; var triggerheight = Math.round(boxheight/itemlength+1); $('#myCarousel .list-group-item').outerHeight(triggerheight); });

Related: See More


Questions / Comments: