<div id="slides"> <div class="slide"> <h2>Lorem Ipsum </h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate, lorem nec rhoncus egestas, sapien leo fringilla lacus, in eleifend justo magna eget dui.</p> <ul> <li>Maecenas varius diam quis turpis egestas molestie. Sed ultrices venenatis leo, at laoreet nibh volutpat a. Curabitur porttitor rutrum magna, sed condimentum turpis rhoncus imperdiet.</li> <li>Quisque sem ante, facilisis et laoreet a, convallis et arcu. Ut quis lectus eget quam blandit varius.</li> </ul> </div> <div class="slide"> <h2>Slide 2</h2> <code class="language-javascript"> // Define our Function function checkMeaningOfLife ( decimal, success ) { if ( parseInt(decimal,10) === 42 ) { window.console.log(success); } }; // Define our Variables var str = 'The meaning of life is true', decimal = 42.00; // Fire our Function checkMeaningOfLife(decimal,success); </code> </div> <div class="slide"> <h2>Lorem Ipsum </h2> <p>Ut non lorem mi. Nunc auctor, ante vel blandit scelerisque, risus enim dictum nisl, ullamcorper fringilla quam eros vel mi.</p> <ul> <li>Maecenas varius diam quis turpis egestas molestie. Sed ultrices venenatis leo, at laoreet nibh volutpat a. Curabitur porttitor rutrum magna, sed condimentum turpis rhoncus imperdiet.</li> <li>Fusce sed odio in mi dapibus lacinia. Suspendisse mi elit, ullamcorper ac convallis et, pulvinar at elit.</li> </ul> </div> </div> <script src="http://www.viget.com/uploads/file/jquery-presentation/scripts/jquery.presentation.js"></script> <script src="http://github.com/balupton/jquery-syntaxhighlighter/raw/master/scripts/jquery.syntaxhighlighter.min.js"></script> <script>$.SyntaxHighlighter.init();</script>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .btn { margin: 0; padding: 0; border: 0; font-size: 100%; font-family: inherit; vertical-align: baseline } a img, frameset { border: 0; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } .hide { display: none; } .contain-overflow { overflow: hidden; } .screen-reader { display: block; left: -9999px; position: absolute; top: -9999px; } .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .amp { font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-size: 1.1em; font-style: italic; font-weight: normal; } body { background: #1a1f1e url(../images/structure/bg-body.png); color: #e3dfba; font: 16px Helvetica, Arial, Sans-Serif; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { font-size: 16px; line-height: 16px; } h2, h3, h4, h5 { font-family: Georgia, "Times New Roman", Times, serif; } h2 { color: #6cbdb5; font-size: 24px; line-height: 24px; padding-bottom: 5px; } a, a:link { text-decoration: underline; } a:visited {} a:hover { text-decoration: none; } a:active {} p, ol, ul, table { margin: 0 0 16px; } ul { list-style: square; } li { padding: 10px 0; } li:first-child { padding-top: 0; } li:last-child { border-bottom: none; padding-bottom: 0; } code {background-color: white;} code li { padding: 0px 0; } #header, #footer { background: rgba(147,204,198,0.5); color: #fff; font-size: 16px; line-height: 16px; position: fixed; width: 100%; z-index: 10; } #header { top: 0; } #footer { bottom: 0; text-align: right; } #header .container, #footer .container { padding: 20px; } button { cursor: pointer; width: auto; overflow: visible; } label { font-weight: bold; } #slides { top: 50px; } .slide { padding: 40px; } .js .slide { position: absolute; } .nav-pager, .nav-prev-next { font-size: 16px; line-height: 14px; list-style: none; margin: 0; overflow: hidden; position: fixed; z-index: 100; } .nav-pager li, .nav-prev-next li { border: none; float: left; padding: 0; } .nav-pager a, .nav-prev-next a { display: block; line-height: 16px; } .nav-pager { bottom: 0; left: 20px; } .nav-pager li { margin-right: 10px; } .nav-pager a, .nav-prev-next a { background: #93ccc6; color: rgba(26,31,30,0.5); padding: 10px 5px; text-decoration: none; } .nav-pager .current a, .nav-prev-next a:hover { background: #6cbdb5; color: #fff; } .nav-prev-next { right: 20px; top: 0; } .nav-prev-next li { margin-left: 10px; }
$('#slides').presentation({ slide: '.slide', //Reference to each individual slide pagerClass: 'nav-pager', //Class to put on the unordered list that contains links to each slide prevNextClass: 'nav-prev-next', //Class to put on the unordered list that contains the previous and next links prevText: 'Previous', //Text for the Previous link nextText: 'Next', //Text for the Next link transition: 'fade' //Possible values are 'fade', 'show/hide', 'slide' });