jQuery Slide Presentation Example

by dandiebolt

HTML

<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>

CSS

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:...

JavaScript

$('#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'
});