CMTA-App Tutorial

by freedawirl

HTML

<script src="//codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div id="AppTut" class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <img src="http://placehold.it/1200x440/cccccc/ffffff">
           <div class="carousel-caption">
            <h3>App entry to Trip Planning tools</h3>
            <p>Access trip planning tools here.</p>
          </div>
        </div><!-- End Item -->
 
         <div class="item">
          <img src="http://placehold.it/1200x440/999999/cccccc">
           <div class="carousel-caption">
           <h3>Headline</h3>
            <p>Content</p>
          </div>
        </div>
        
        <!-- End Item -->
        
        <div class="item">
          <img src="http://placehold.it/1200x440/dddddd/333333">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Content</p>
          </div>
        </div>
        <!-- End Item -->
        
        <div class="item">
          <img src="http://placehold.it/1200x440/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Content</p>
          </div>
        </div>
        <!-- End Item -->
        <div class="item">
          <img src="http://placehold.it/1200x440/dddddd/333333">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Content</p>
          </div>
        </div>
        <!-- End Item -->
        <div class="item">
          <img src="http://placehold.it/1200x440/dddddd/333333">
           <div class="carousel-caption">
    ...

CSS

body { padding-top: 50px; }
#myCarousel .nav a small {
	display:block;
}
#myCarousel .nav {
	background:#eee;
}
#myCarousel .nav a {
	border-radius: 0px;
}
#AppTut .nav>li>a{padding:0}

#AppTut .carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 6%;
    top: 10%;
    border: 1px solid red;
}

JavaScript

//CMTA Mobile App Tutorial by Mac McCrary - 2016@CapMetro
$('#myCarousel').carousel({
		interval:   4000
	});
	
	var clickEvent = false;
	$('#myCarousel').on('click', '.nav a', function() {
			clickEvent = true;
			$('.nav li').removeClass('active');
			$(this).parent().addClass('active');		
	}).on('slid.bs.carousel', function(e) {
		if(!clickEvent) {
			var count = $('.nav').children().length -1;
			var current = $('.nav li.active');
			current.removeClass('active').next().addClass('active');
			var id = parseInt(current.data('slide-to'));
			if(count == id) {
				$('.nav li').first().addClass('active');	
			}
		}
		clickEvent = false;
	});