Hola estoy buscando a lograr algo como el control deslizante en este sitio web:

http://www.egoargentina.com/en/

El regulador debe abarcar todo el ancho de la página. He estado mirando a su alrededor y no parece ser capaz de encontrar uno. El Ego en la Argentina parece ser hecha a la medida por lo que no quiero para usarlo en caso de que la licencia de cuestiones volver en mí.

La altura de las necesidades de permanecer fija, pero el ancho debe ser fluido. Las imágenes no deben intensificarse a medida que se desvanecería en los bordes.

InformationsquelleAutor Alex Sadler | 2012-01-10

3 Comentarios

  1. 5

    Se ve algo como:

    html:

    <div class="header wrapper">
        <h1>Site header</h1>
    </div>
    <div class="slider">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>
    <ul class="slider-nav">
        <li><a href="#" >1</a></li>
        <li><a href="#" >2</a></li>
        <li><a href="#" >3</a></li>
        <li><a href="#" >4</a></li>
    </ul>
    <div class="clear"></div>
    <div class="content">
        <div class="wrapper">
            <p>Some site content will be here</p>
            <p>Some site content will be here</p>
            <p>Some site content will be here</p>
            <p>Some site content will be here</p>
            <p>Some site content will be here</p>
        </div>
    </div>
    <div class="footer">
        <div class="wrapper">&copy; www.mysite.com</div>
    </div>

    css:

    .clear { clear:both; }
    .wrapper { width:980px; margin:0 auto; }
    .slider { margin:20px 0; height:100px; position:relative;  }
    .slider .slide { display:none; background:red; position:absolute; height:100px; width:100%; }
    .header { background:#eee; font-size:18pt; }
    .content { }
    .footer { background:#eee; text-align:center; }
    
    .slider-nav { margin: 0 auto; width:100px; clear:both; } 
    .slider-nav li { float:left; margin:0 5px; }

    js:

    $('.slider .slide:eq(0)').addClass('active').fadeIn(200);
    
    $('.slider-nav li a').click(function() {    
        var index = $(this).parent().index('li');
        console.log(index);
        $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
                $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
            });
    
        return false;
    });

    Código: http://jsfiddle.net/GPuh6/16/

    De pantalla completa demo: http://jsfiddle.net/GPuh6/16/embedded/result/

    P. S. Autorotating todavía necesita ser terminado.

    actualización: autorrotación

    $('.slider .slide:first').addClass('active').fadeIn(200);
    
    function rotate(index) {
         $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
             $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
         });   
    }
    
    $('.slider-nav li a').click(function() {    
        var index = $(this).parent().index('li');
        rotate(index);
        return false;
    });
    
    setInterval(function() {
        var $next = $('.slider .slide.active').next();
    
        if ($next.length == 0)
            $next = $('.slider .slide:first');
    
        rotate($next.index());
    }, 2000);

    Código: http://jsfiddle.net/GPuh6/23/

    De pantalla completa demo: http://jsfiddle.net/GPuh6/23/embedded/result/

    • Esto es bueno, puedo insertar las imágenes como parte de la .deslice los elementos de fondo y de agregar en los pies de foto en el interior del elemento.
    • Cualquier idea sobre cómo llegar a rotación automática / Dinámica Flechas?
    • Yep, consulte la última actualización. Destacando enlace números se puede hacer de la misma manera.
  2. 0

    Tratar de Nivo Slider – es un plugin de jQuery y lo he utilizado muchas veces y encontró a ser grande(http://nivo.dev7studios.com/demos/). Comprobar aquí: http://nivo.dev7studios.com/

    La anchura y la altura de la configuración depende de qué valores se dan en el CSS. Usted puede dar los siguientes valores en el archivo css:

    .nivoSlider {
                 .........
                 width:auto; /* Keeps the width fluid, depending on image width */
                 height:246px; /* Change this to your images height */
                 ..........
    }

    Revise las instrucciones de uso aquí: http://nivo.dev7studios.com/support/jquery-plugin-usage/

Dejar respuesta

Please enter your comment!
Please enter your name here