Bootstrap Snippet News slider web opac using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;} 
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(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);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"News slider web opac"
Bootstrap 4.1.1 Snippet by csdeciph3r

Related: See More

Questions / Comments:

"News slider web opac" Bootstrap 4.1.1 Snippet by csdeciph3r

Related: See More

Questions / Comments:

"News slider web opac"
Bootstrap 4.1.1 Snippet by csdeciph3r