このウェブサイト上のスライダーのようなものを達成するために探して全角スライダーが

Question

こんにちはイムを探して：

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

スライダーはページの全幅に及ぶ必要があります。私は周りを見てきました、そして、私は1つを見つけることができないようです。エゴアルゼンチンのものは特注品なので、ライセンス問題が戻ってくる場合には使用したくありません。

高さは固定されている必要がありますが、幅は流体である必要があります。画像はエッジでフェードアウトするので、スケーリングする必要はありません。

Answer 1

Nivo Sliderを試してみてください。これは、人気のあるjQueryプラグインです。私は何度も使っており、これが素晴らしいと判断しました（http://nivo.dev7studios.com/demos/）。ここで確認してください：http://nivo.dev7studios.com/

幅と高さの設定は、CSSに与えた値によって異なります。ここでの使用手順

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

チェック：http://nivo.dev7studios.com/support/jquery-plugin-usage/

Answer 2

それは意志のようなものです：あなたは、CSSファイルに以下の値を与えることができます

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

コード：http://jsfiddle.net/GPuh6/16/

フルスクリーンのデモ：http://jsfiddle.net/GPuh6/16/embedded/result/

P.S.オートローテーションはまだ終了する必要があります。

更新：オートローテーション

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

コード：http://jsfiddle.net/GPuh6/23/

フルスクリーンのデモ：http://jsfiddle.net/GPuh6/23/embedded/result/

Answer 3

あなたはフロースライダーを試してみましたか？私はそれがあなたが望むその効果を作り出すのは簡単だと思います。

Flow Slider Gallery