クライアントから、ウェブサイト用の画像スライダー (カルーセル) の作成を求められています。彼らは、スライドが実際に「スライド」し、フェードインなどではなく、その中のコンテンツがフェードインおよびフェードアウトすることを望んでいます。これとほとんど同じです: http://www.squarespace.com/
今、私はこのようなものを作成する方法に関するjqueryプラグインとチュートリアルをたくさん検索しようとしましたが、ほとんどがcodropsで見つかりましたが、作業でき、基準に適合するものはありませんでした. Flexslider も見つけましたが、css3 トランジションまたはキーフレームを使用して内部のコンテンツのアニメーションを作成する方法がわかりません。私がリンクしたSquarespaceとまったく同じです。
この件についてお知らせください。どうもありがとうございました。
これは私が知っている最高のスライダーの 1 つです: http://css-tricks.com/examples/AnythingSlider/#&panel1-1。
彼はまた、自分で作成するためのチュートリアルを作成しました: http://css-tricks.com/slider-with-sliding-backgrounds/、あなた自身のものを作るための出発点として使用できます
なぜ車輪を再発明するのですか？たくさんの画像スライダー カルーセルがあります。「スライド効果」でも
これがまさにあなたが探しているスライダーです:)
https://github.com/nicinabox/superslides
デモページは次の場所にあります。
http://nicinabox.com/superslides/#1
それが役に立てば幸い。
ps: Google はあなたの友達です。
編集：スライダーのコンテンツのフェードについてのコメントから。
フェード時にコンテンツにトランジションを追加するだけでよいと思います (テストされていません)。これをスライダーの css または js に簡単に追加できます。
前の回答に追加
前のスライドのコンテンツをフェードアウトする限り、この記事で説明されているように、z-index が 2 の要素の jQuery css セレクターを使用できます。
そして、css3トランジションを使用して古いものの不透明度を設定します。新しいものは完全にはわかりません。ただし、スーパースライドは順序付けされていないリストから直接動作しているように見えるため、nth-of-type css セレクターを使用して、js 変数を使用して jQuery 経由で正しい要素を再度取得し、正しいスライド番号を格納できます。
(これは通常のナビゲーション専用です。下部のナビゲーション バーには追加の調整が必要です)