Bootstrap Snippet Full screen slider with caption using HTML CSS 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="gallery">
    <a href="#" class="show">
    <img src="http://www.proprofs.com/quiz-school/images/explore_market/fun.jpg" alt="Flowing Rock" alt="" title="" 
    width="1024" height="768" rel="<h3>Flowing Rock</h3>You can put html element 
    inside the REL attribute."/></a>
    </a>
    
    <a href="#">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3dCj_tGUfpaqh7uuIYJ7SCAZ1xOeFDFTzvBCcPHKIHRJOV6VB" 
        alt="Grass Blades" alt="" title="" width="1024" height="768" rel="<h3>Grass Blades</h3>description"/>
    </a>
   
   
    <div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
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
34
35
36
37
#gallery {
    position:relative;
    height:360px
}
    #gallery a {
        float:left;
        position:absolute;
    }
    
    #gallery a img {
        border:none;
        width: auto;
        height: auto;
    }
    
    #gallery a.show {
        z-index:500
    }
    #gallery .caption {
        z-index:600; 
        background-color:#000; 
        color:#ffffff; 
        height:100px; 
        width:auto; 
        position:absolute;
        bottom:0;
    }
    #gallery .caption .content {
        margin:5px
    }
    
    #gallery .caption .content h3 {
        margin:1px;
        padding:1px;
        color:#1DCCEF;
    }
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
$(document).ready(function() {        
    slideShow();
});
function slideShow() {
    $('#gallery a').css({opacity: 0.0});
    $('#gallery a:first').css({opacity: 1.0});
    $('#gallery .caption').css({opacity: 0.7});
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
    setInterval('gallery()',6000);
}
function gallery() { 
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));    
    var caption = next.find('img').attr('rel');    
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });    
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
    $('#gallery .content').html(caption);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Full screen slider with caption"
Bootstrap 3.0.0 Snippet by snehpandya

Related: See More

Questions / Comments:

"Full screen slider with caption" Bootstrap 3.0.0 Snippet by snehpandya

Related: See More

Questions / Comments:

"Full screen slider with caption"
Bootstrap 3.0.0 Snippet by snehpandya