The Digital Mike

En esta entrada les presento como crear un slideshow con botón play pause que presenta dos imágenes por cada slide. Una imagen es para presentar en PC, y la otra version es para dispositivos mobile y pequeñas pantallas. Sin mas Aquí les dejo el código.

El código html va a contener 4 imágenes, ademas de tres botones, un botón para ejecutar y/o pausar el slideshow, y los otros dos botones para moverse por las cuatro imágenes. Para los botones de navegación, recuerda agregar al head de la pagina la librería de Bootstrap.

<div class="row" style="margin-bottom: 60px; background-color: #f0ebe7;">
          <div class="" align="right" style="background-color: #f0ebe7; padding: 10px; color: black;">
            <button title="Play/Pause" aria-label="Play/Pause" class="controls" id="pause" style="display: inline-block;background-color: #ffffffad;border: 0;margin-right: 3px;">►</button>
            <button title="Previous" aria-label="Previous" class="controls" id="previous" style="display: inline-block;background-color: #ffffffad;border: 0;">
              <span class="glyphicon glyphicon-chevron-left" style=""></span>
            </button>
            <button title="Next" aria-label="Next" class="controls" id="next" style="display: inline-block;background-color: #ffffffad;border: 0;">
              <span class="glyphicon glyphicon-chevron-right" style=""></span>
            </button>
          </div>
          <ul id="slides">            
            <li class="slide showing">
              <a title="titulo">
                <img alt="image01" class="img-responsive hidden-xs" src="/images/image01.jpg">
                <img alt="image01 mobile" class="img-responsive hidden-lg hidden-md hidden-sm" src="/images/image01-mobile.jpg">
              </a>
            </li>            
            <li class="slide">
              <a title="image02">
                <img alt="image02" class="img-responsive hidden-xs" src="/images/image02n.jpg">
                <img alt="image02" class="img-responsive hidden-lg hidden-md hidden-sm" src="/images/image02-mobile.jpg">
              </a>
            </li>            
            <li class="slide">
              <a title="image03">
                <img alt="image03" class="img-responsive hidden-xs" src="/images/image03.jpg">
                <img alt="image03y mobile" class="img-responsive hidden-lg hidden-md hidden-sm" src="/images/image03-mobile.jpg">
              </a>
            </li>          
            <li class="slide">
              <a title="image04">
                <img alt="image04" class="img-responsive hidden-xs" src="/images/image04.jpg">
                <img alt="image04" class="img-responsive hidden-lg hidden-md hidden-sm" src="/images/image04-mobile.jpg">
              </a>
            </li>	
          </ul>
        </div>

el estilo del slideshow es bien simple. Aquí se los dejo.

<style>

        #slides {
            position: relative;
            height: 300px;
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }
        
        .slide {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
        
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            -o-transition: opacity 1s;
            transition: opacity 1s;
        }
        
.showing {
            opacity: 1;
            z-index: 2;
        }
        </style>

<script>
        var controls = document.querySelectorAll('.controls');
        for(var i=0; i<controls.length; i++){
            controls[i].style.display = 'inline-block';
        }
        
        var slides = document.querySelectorAll('#slides .slide');
        var currentSlide = 0;
        var slideInterval = setInterval(nextSlide,5000);
        
        function nextSlide(){
            goToSlide(currentSlide+1);
        }
        
        function previousSlide(){
            goToSlide(currentSlide-1);
        }
        
        function goToSlide(n){
            slides[currentSlide].className = 'slide';
            currentSlide = (n+slides.length)%slides.length;
            slides[currentSlide].className = 'slide showing';
        }
       
        
        var playing = true;
        var pauseButton = document.getElementById('pause');
        
        function pauseSlideshow(){
            pauseButton.innerHTML = '&#9658;'; 
            playing = false;
            clearInterval(slideInterval);
        }
        
        function playSlideshow(){
            pauseButton.innerHTML = '&#10074;&#10074;'; 
            playing = true;
            slideInterval = setInterval(nextSlide,2000);
        }
        
        pauseButton.onclick = function(){
            if(playing){ pauseSlideshow(); }
            else{ playSlideshow(); }
        };
        
        var next = document.getElementById('next');
        var previous = document.getElementById('previous');
        
        next.onclick = function(){
            pauseSlideshow();
            nextSlide();
        };
        previous.onclick = function(){
            pauseSlideshow();
            previousSlide();
        };</script>
    </section>