イメージではなくコンテンツの水平スクロールを作成する

CSSの位置決めと浮動を使用してコンテンツスライダ効果を実現する方法を知りたいと思います。イメージではなくコンテンツの水平スクロールを作成する

たとえば、ページへのメニューリンクではなく、リンクの動作を無効にして、ページコンテンツを水平（左または右）にスライドさせて表示して、古いコンテンツが画面から離れ、新しいコンテンツが画面に表示されますか？

この効果はどのように達成されますか？

多くのページへのリンクに反対するこのような1ページにコンテンツを表示することには、SEOのメリットとデメリットがありますか？

おかげで、リック

EDIT：この質問は、特定の少ない問題を表示されるように修正され、したがって、コミュニティ全体に、より利用のされています。

出典

2012-01-20 Rick Donohoe

ためjcarouselプラグインを使用してみてください、あなたは.slidersクラスのご<h2>外に配置する必要があります。

あなたはdiv要素に次のスタイルを追加することができます：あなたは、あなたの要件を満たすために上記の値を変更する必要があります

.container{ 
    width:960px; 
    overflow:hidden; 
    position:relative; 
} 

.sliders{ 
    float:left; 
    width:10000px; 
    position:relative; 
    left:0; top:0; 
} 

.panel{ 
    float:left; 
    width:auto; /*You can define a width for this if required*/ 
    margin:20px; 
}

、しかし：次に、あなたのスタイルは次のようになり

<div class='container'> 

    <div class='sliders'> 
     <div class='panel' id='home_slider'></div> 
     <div class='panel' id='portfolio_slider'></div> 
     <div class='panel' id='contact_slider'></div> 
    </div> 

</div>

をそれの要点は、 '.container'クラスがレイヤーとして機能し、その下にすべての '.panels' divを含む '.sliders'クラスがあることです。 'container'に 'overflow：none'を設定すると、 '.sliders' divの大きさに関係なく、 '.sliders'の幅は '.containers'の可視領域と同じになります。 '.sliders' divの幅は、内部にあるdivの数に応じて拡張されます（幅をautoに設定した場合）。次に、 '.sliders'クラスの左の位置をアニメーション化するためにJQueryを使用する必要があります。

これが役に立ちます。

出典

2012-01-20 14:19:29

'width：auto'の部分が分かりませんでした。画面から溢れてしまい、隠れてしまったため、それをカットしました。私はそれを修正するために 'width：960px'に変更しました。 –