stopstarslider.jpg

Start/Stop Slider otra atractiva propuesta por Chris Coyier para generar Contenido Deslizante (Slider) en tus proyectos online. Requiere de jquery y es completamente personalizable desde su archivo startstop-slider.js, basta tener un poco de conocimiento o tiempo y curiosidad. Start/Stop Slider posee una característica que es fácil deducir ya con el nombre del proyecto, nos permite mediante un botón parar la animación de nuestro slider cuando lo deseemos, una buena forma de permitir a nuestros usuarios leer con tranquilidad las cosas que deseemos mostrar en ellos. Además posee otras funcionalidades, que invito a que conozcan testeando Start/Stop Slider desde sus ordenadores.

Ver Demo - Descarga - Mas Info Start/Stop Slider by: Chris Coyier

Uso:
Realizar la llamada correspondiente a nuestros script desde el encabezado de nuestro theme < head >…

  1. <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
  2.     <script type="text/javascript" src="js/startstop-slider.js"></script>

Añadir estilo en nuesra hoja de Style.css

  1. #slider          { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
  2.                    position: relative; margin: 50px 0; }
  3. #mover           { width: 2880px; position: relative; }
  4. .slide           { padding: 40px 30px; width: 900px; float: left; position: relative; }
  5. .slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
  6.                    color: #ac0000; }
  7. .slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
  8. .slide img       { position: absolute; top: 20px; left: 400px; }
  9. #slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
  10.                    padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

Contenido

  1. <div id="slider">
  2.  
  3.             <div id="mover">
  4.        
  5.                 <div id="slide-1" class="slide">
  6.                
  7.                     <h1>Garden Rack</h1>
  8.                    
  9.                     <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
  10.                    
  11.                     <a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a>
  12.                    
  13.                 </div>
  14.                
  15.                 <div class="slide">
  16.                
  17.                     <h1>Tulip Bulbs</h1>
  18.                    
  19.                     <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
  20.                    
  21.                     <a href="#"><img src="images/slide-2-image.png" alt="learn more" /></a>
  22.                    
  23.                 </div>
  24.                
  25.                 <div class="slide">
  26.                
  27.                     <h1>Garden Gloves</h1>
  28.                    
  29.                     <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
  30.                    
  31.                     <a href="#"><img src="images/slide-3-image.png" alt="learn more" /></a>
  32.                    
  33.                 </div>
  34.            
  35.             </div>
  36.        
  37.         </div>