<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="container"> <div class="row"> <h2>A PEN BY Alan Proctor-Thomson</h2> <h2>https://codepen.io/alanpt/pen/EWmeKE?page=2&q=Moodle</h2> </div> </div> <div id="slideshowstage"> <ul id="slideshow"> <li> <h1>Slide 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci soluta impedit quae! Nostrum, aperiam veritatis esse laudantium ipsum dolores molestias eaque vitae. Nemo modi, facere fuga aliquam, culpa ex odio.</p> </li> <li> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/760950/hand.png" /></li> <li> <img src="http://loremflickr.com/1000/200" /></li> <li> <img src="http://loremflickr.com/100/800" /></li> <li> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1></li> <li> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci soluta impedit quae! Nostrum, aperiam veritatis esse laudantium ipsum dolores molestias eaque vitae. Nemo modi, facere fuga aliquam, culpa ex odio.</p> </li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi nam nostrum facilis, obcaecati dolorum aut fuga possimus. Libero consequuntur ab consectetur praesentium neque laudantium unde, voluptates voluptas placeat inventore.</li> </ul> </div> <div id="slideshowcontrols"> <button class="prev"><i class="fa fa-arrow-left"></i></button> <button class="next"><i class="fa fa-arrow-right"></i></button> <button id="fullscreen"><i class="fa fa-arrows-alt"></i></button> </div>

body { width: 750px; padding-left: 100px } #slideshow p { margin: 5%; font-size: 170%; line-height: 1.2; } #slideshow h1 { margin: 15% 20% 0 20%; font-size: 300%; line-height: 1.2; } #slideshow * { color: #aaa; text-shadow: none } #slideshowstage ul { list-style-type: none; padding: 0; margin: 0; } #slideshow .hidden { display: none; } #slideshow .active { display: block; } #slideshowstage { width: 700px; height: 393px; } #slideshow { position: relative; background: #111111; color: #aaa; width: 100%; height: 100%; } #slideshow li { // padding: 40px; text-align: center; height: 100%; overflow: hidden; } #slideshow img { height: 100%; } #slideshow li img {} #slideshowcontrols { padding: 5px; position: relative; bottom: 43px; color: #aaa; } #slideshow:-webkit-full-screen { font-size: 300%; width: 100%; height: 100% } #slideshow:-moz-full-screen { font-size: 300%; width: 100%; height: 100% } #slideshow:-ms-fullscreen { font-size: 300%; width: 100%; height: 100% } #slideshow:fullscreen { font-size: 300%; width: 100%; height: 100% }

var wrapper = $('#slideshowstage'); var controls = $('#slideshowcontrols'); var slides = $('li'); var slideIndex = 1; slides.addClass('hidden'); slides.filter(':nth-child('+ slideIndex +')').removeClass('hidden'); // define functions to navigate forward and backward between slides var slideNext = function() { if ( slideIndex < slides.length ) { slides.filter(':nth-child('+ slideIndex +')').addClass('hidden'); slides.filter(':nth-child('+ (slideIndex+1) +')').removeClass('hidden'); slideIndex++; } else if ( slideIndex == slides.length ) { slides.filter(':nth-child('+ slideIndex +')').addClass('hidden'); slideIndex = 1; slides.filter(':nth-child('+ slideIndex +')').removeClass('hidden'); } }; var slidePrev = function() { if ( slideIndex > 1 ) { slides.filter(':nth-child('+ slideIndex +')').addClass('hidden'); slides.filter(':nth-child('+ (slideIndex-1) +')').removeClass('hidden'); slideIndex--; } else if ( slideIndex == 1 ) { slides.filter(':nth-child('+ slideIndex +')').addClass('hidden'); slideIndex = slides.length; slides.filter(':nth-child('+ slideIndex +')').removeClass('hidden'); } }; // next button advances to next slide $('.next').click( slideNext ); // previous button takes you back to previous slide $('.prev').click( slidePrev ); // arrow keys can be used to navigate too $("body").keydown(function(e) { if(e.keyCode == 37) { // left slidePrev(); } else if(e.keyCode == 39) { // right slideNext(); } else if(e.keyCode == 70) { // right requestFullscreen(fullscreenTarget); } }); var requestFullscreen = function(ele) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.msRequestFullscreen) { ele.msRequestFullscreen(); } else { console.log('Fullscreen API is not supported.'); } }; var fullscreenButton = document.getElementById('fullscreen'); var fullscreenTarget = document.getElementById('slideshow'); fullscreenButton.addEventListener('click', function(e) { e.preventDefault(); requestFullscreen(fullscreenTarget); });