トップページの画像をスライドさせたい

jQueryを使って、下記サイトのスライドショーを作成したいと思っています。
http://www.ide-clinic.com/
ブラウザを広げても両端に画像が残る形にしたいです。

作成方法がわかるURLをご存じの方がいらっしゃったらぜひ教えてください。
いろいろ検索しましたが中央画像のみのスライドショーしかみつけられませんでした。
宜しくお願いします。

No.1 回答者： fujillin 回答日時： 2014/05/21 09:14

ご質問の意味をよくつかめてませんが…

＞下記サイトのスライドショーを作成したい
すでに出来上がっているのではないでしょうか？
どこかを変えて改良したいということ？　あるいは、似たものを自作したいということでしょうか？
ご提示のサイトもjQueryを利用しているようですので、そのままでご質問の回答になっているともいえるかと。


自作するにしても、どこまでできているかによって、アドバイスできることが変わってくると思います。
内容を確認したわけではありませんが、とりあえずご提示のサイトの考え方に近いもの
　1）表示用の外枠としてwidth:100%; overflow:hidden; のdivを用意
　2）その中でfloat:leftのli要素を並べておいて、親のul全体をスライドさせる仕組み
ここまでは、スライドショーで一般的に用いられている方法だと思います。

センタリングをする際の工夫として
　3）ulのleftを調整して3枚目くらいの画像のセンターとdivのセンターを合わせておく
　4）スライドさせるときはleftの値ではなく、margin-leftを変えることでスライド
このようにすることで、スライドの機能とセンタリングの機能を個別に制御できるようにしていると思われます。
また、ウィンドウサイズの変更がスライド中に起こっても、調整する値が干渉することを避ける工夫と思います。

　5）センタリングされるのは3枚目と固定しているので、スライドが終わった時点で、
　　 li要素を最初（最後）にひとつ送るという方法をとっているようです

　6）リサイズされた場合には、3）と同様の調整をしてセンタリングを保持する

・・・といった仕組みにすることで作成可能かと思います。
もちろん、違う考え方でも同様のものを実現することは可能でしょう。


＞中央画像のみのスライドショーしかみつけられませんでした
ほとんどのスライドショーはその両側に前（次）の画像がレイアウトされていると思いますので、表示範囲と位置を調整すれば仕組みはほとんどそのままでもいける可能性があります。