Looking for a fullwidth slider

Question

Hi there Im looking to achieve something like the slider on this website:

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

The slider should span the full width of the page. I've been looking round and I don't seem to be able to find one. The one on Ego Argentina seems to be custom built so I don't want to use it in case the licencing issues come back at me.

The height needs to stay fixed but the width needs to be fluid. The images do not need to be scaled as they would fade out at the edges.

Solution

It will looks something like:

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;
});

Code: http://jsfiddle.net/GPuh6/16/

Full-screen demo: http://jsfiddle.net/GPuh6/16/embedded/result/

P.S. Autorotating still need to be finished.

update: autorotation

$('.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);

Code: http://jsfiddle.net/GPuh6/23/

Full-screen demo: http://jsfiddle.net/GPuh6/23/embedded/result/

Comments

[Alex Sadler]

This is good, I can insert the images as part of the .slide elements background and add in the captions inside the element.

[Alex Sadler]

Any idea on how to get it to autorotate / Dynamic Arrows?

[Samich]

Yep, check the latest update. Highlighting link numbers can be done in the same way.