Carrusel de diapositivas con JQuery: Slider para Blogger

Entrada más reciente Entrada antigua

Carrusel de diapositivas con JQuery: Slider para Blogger

Este es el otro Slider con JQuery que uso, especialmente para mi sitio principal, en la parte inferior de la página.

Le he hecho ligeros cambios y quitado gran parte del código de más que poseía, como sea da mucha lata a la hora de escalar y si ustedes los hacen deben aumentar o restar a todos los width (incluyendo en el código javascript) salvo los marcados como no modificables en valores de 20px.

Pueden ver el demo aquí. Se basa en el Slider de Jacob Gube, pueden descargar las imágenes necesarias para su funcionamiento: [Descargar archivos]

Instalación:
Vamos a Diseño ► Edición HTML, buscamos la etiqueta </head> y justo antes pegamos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 480;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  $('#slidesContainer').css('overflow', 'hidden');
  slides
    .wrapAll('<div id="slideInner"></div>')
    .css({
      'float' : 'left',
      'width' : slideWidth
    });
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clic para la izquierda</span>')
    .append('<span class="control" id="rightControl">Clic para la derecha</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
  currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
     $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  } });
//]]>
</script>

var slideWidth viene establecido en pixeles con un valor por defecto para este tutorial de 480, si modifica este valor hágalo en valores de 20 (40, 60, 80, etcétera) y todos los valor Width de la parte de CSS salvo los indicados expresamente.

Ahora vamos a ]]></b:skin> y justo antes pegamos:

/* Slideshow con JQuery */
 #slidesContainer
{
background:#000;color:#fff;
}
#slideshow {
margin:0 auto; /* Este valor solamente centra el contenedor */
width:540px !important; /* reducir en valores de 20 px */
height:224px;
background:transparent;
position:relative;
        overflow:hidden; /* overflow evita se desborde sin Javascript */
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:460px !important; /* reducir en valores de 20 px */
  height:224px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
width:480px !important; /* reducir en valores de 20 px */
height:224px; /* Alto de caja */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.control {
  display:block;
  width:39px; /* no modificar valor */  height:224px; /* Alto de control */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibMXE9puGqZJ3QeKMRAemQboKo5Vnsz4hM7Z4ghV5mKjGeZEAzNAI8F-Iyg58ufCdAeTmGtHUiVtvgv5ZcmYb7Ua2SDALbqmgz-1mpq6d-VfTaQglFYw1UlxN3W_SV4SdNR9YfSZwElj8g/) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyVaTFRhTaOFCCjoiRPp0iQ4TEoXUXGfTDnogRPBiPVyDfHvWpuhWy2eihd3xMfduXAzNo88F9t5evaLThlPCjr_xMKx1qs_Ba4YWnrMOPekeqhBzo4679fH3lClR57784AMEclOlTkjTW/s288/control_RIGHT.png) no-repeat 0 0;
}
.slide h2, .slide p {
  margin:15px;
  font:italic 12px Georgia, "Times New Roman", Times, serif; /* Tipografía texto normal en un párrafo*/
}
.slide h2 {
  font:italic 20px Georgia, "Times New Roman", Times, serif; /* Tipografía cabecera H" */
  color:#ccc;
  letter-spacing:-1px;
}
.slide img {
  float:right;
  margin:0 15px;
}
/* Fin JQuery Slider */

Solamente modificaremos los valores en azul, siempre de 20px en 20px. Guardamos la plantilla.

Instalando el código visible
Ahora vamos a Diseño ► Elementos de la plantilla

Y donde queramos ponerlo pulsamos en Agregar un Gadget (Para este ejemplo debe ser un espacio de 550px de ancho):

Buscamos el artilugio HTML/Javascript y pulsamos en el "+":

Y agregamos el siguiente código:

<!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
<!-- modulos puedes poner los que quieras, pero te recomiendo menos de 6 -->
<! modulo 1 -->
 <div class="slide">
   <h2>Titulo 1</h2>
      <p>
<img src="imagen.png" alt="" width="215" height="145" border="0" />
Texto de contenido del contenido 1
        <br/><br/>
        <a href="#">[Leer artículo...]</a>
    </p>
</div>
<!--modulo 2-->
 <div class="slide">
   <h2>Titulo 2</h2>
      <p>
<img src="imagen.png" alt="" width="215" height="145" border="0" />
Texto de contenido del contenido 2
        <br/><br/>
        <a href="#">[Leer artículo...]</a>
    </p>
</div>
<!-- copia y pega más modulos antes de los dos últimos div -->
<!-- Fin modulos puedes poner los que quieras, pero te recomiendo menos de 6 -->
    </div>
  </div>
  <!-- Slideshow HTML -->

Ponemos nuestro contenido e imágenes y guardamos.

Conclusiones
Las imágenes son de 215 de ancho por 145 de alto, pero puedes quitarlas y solo tener texto o poner tu propio contenido, los modulos son todo desde <div class="slide"> a su div final </div> puedes copiarlos y pegarlos uno tras de otro segun se ve con los dos módulos de arriba.

Ejemplo de un módulo, por si no lo tienes claro:

<div class="slide">
   <h2>Titulo 2</h2>
      <p>
<img src="imagen.png" alt="" width="215" height="145" border="0" />
Texto de contenido del contenido 2
        <br/><br/>
        <a href="#">[Leer artículo...]</a>
    </p>
</div>

Con el demo veremos que este Slider tipo diapositiva debe pulsarse primero para dar el cambio de ficha, tiene sus ventajas y desventajas, pero es muy fácil de implementar, con un gran diseño y me encanta.

de