Bootstrap Snippet auto rotate vertical tabs using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="col-sm-12 row hero">
        <div class="col-md-9">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane in active fade" id="Memory-Care"><img src="http://millview.rudtek.com/wp-content/uploads/2017/06/mill_view_activities.jpg"><a class="btn btn-primary" href="http://millview.rudtek.com/services/memory-care/">Find Out More</a></div><div class="tab-pane in fade" id="Assisted-Living"><img src="http://millview.rudtek.com/wp-content/uploads/2017/06/mill_view_memory_care.jpg"><a class="btn btn-primary" href="http://millview.rudtek.com/services/short-term-stay/">Find Out More</a></div><div class="tab-pane in fade" id="Personalized-Services"><img src="http://millview.rudtek.com/wp-content/uploads/2017/06/mill_View_amenities.jpg"><a class="btn btn-primary" href="http://millview.rudtek.com/services/">Find Out More</a></div>              </div>
        </div>
        <div class="col-md-3"> <!-- required for floating -->
                <!-- Nav tabs -->
                <ul class="nav nav-pills nav-stacked">
                    <li class=" active"><a href="#Memory-Care" data-toggle="tab" "=""><h3 data-fontsize="24" data-lineheight="26">Memory Care</h3><div class="description"><p>A Community of Caring Built on Our Commitment to Respect and Dignity</p>
</div></a></li><li class=""><a href="#Assisted-Living" data-toggle="tab" "=""><h3 data-fontsize="24" data-lineheight="26">Assisted Living</h3><div class="description"><p>A Life of Independence and Comfort with help given where needed</p>
</div></a></li><li class=""><a href="#Personalized-Services" data-toggle="tab" "=""><h3 data-fontsize="24" data-lineheight="26">Personalized Services</h3><div class="description"><p>Live your Life the way you want</p>
</div></a></li>             </ul>
        </div>
        <div class="clearfix"></div>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
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
$(function(){
    $('a[title]').tooltip();
    
    // Tab Pane continue moving
    var tabCarousel = setInterval(function() {
        var tabs = $('.nav-pills > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
        toClick.trigger('click');
    }, 3000);
    /*
    // Tab-Pane Cycle one time
    var tabChange = function(){
        var tabs = $('.nav-tabs > li');
        var active = tabs.filter('.active');
        var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
        // Use the Bootsrap tab show method
        next.tab('show')
    }
    // Tab Cycle function
    var tabCycle = setInterval(tabChange, 5000);
    // Tab click event handler
    $('.nav-tabs a').click(function(e) {
        e.preventDefault();
        // Stop the cycle
        clearInterval(tabCycle);
        // Show the clicked tabs associated tab-pane
        $(this).tab('show')
        // Start the cycle again in a predefined amount of time
        setTimeout(function(){
            tabCycle = setInterval(tabChange, 5000)
        }, 30000);
    });
    */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"auto rotate vertical tabs"
Bootstrap 3.3.0 Snippet by redknite

Related: See More

Questions / Comments:

"auto rotate vertical tabs" Bootstrap 3.3.0 Snippet by redknite

Related: See More

Questions / Comments:

"auto rotate vertical tabs"
Bootstrap 3.3.0 Snippet by redknite