CMTA-Mobile App tutorial - OLD

by freedawirl

HTML

<div align="center" style="width:800px">

<div style="width:750px">

<div class="slideshow_box"><h2>Learn How to Use The App's Features</h2>
<p>All the app's features are made easy with our online tutorial slide show.<br>Click on the arrows next to the box below to get started.</p>
<section class="slider">
            <div id="slider" class="flexslider">
              
            <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 4800%; transition-duration: 0s; transform: translate3d(-1500px, 0px, 0px);">
                <li class="" style="width: 750px; float: left; display: block;"><img src="/images/apptutorial/screen1.jpg" alt="Welcome to the App" ><p>Real-time* arrival information refreshes within 90 seconds and traffic conditions may apply.</p></li>
                <li class="" style="width: 750px; float: left; display: block;"><img src="/images/apptutorial/screen2.jpg" alt="Ready, set, go" ><p>Once you have downloaded and opened the app, you will see the home screen. You are ready to use the app to plan trips, see bus schedules, route maps and access Capital Metro advisories.</p></li>
                <li class="flex-active-slide" style="width: 750px; float: left; display: block;"><img src="/images/apptutorial/screen3.jpg" alt="in-app tutorials" ><p>You will be greeted with one of the app's tutorials to help you understand and use the features of the app. If you want to access these tutorials later, you can view again by visiting the "Info and Settings" section of the app. You can also access different sections of the app by touching the icon for the app menu.</p></li>
                <li style="width: 750px; float: left; display: block;"><img src="/images/apptutorial/screen4.jpg" alt="create an account" ><p>To purchase passes you must first create a user account. Tap on the "Sign up with email address" button for sign-in screen. Fill out all the information and tap the "Sign Up" button. You will then...

JavaScript

$(window).load(function() {
        // The slider being synced must be initialized first
        $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 72,
        itemMargin: 5,
        asNavFor: '#slider'
        });

        $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel"
        });
    });