あなたのウェブサイトのための19のスライダーまたはカルーセルCSSとHTML

持って 画面の幅全体を占めるウェブサイト特定の要素を統合して、販売する製品のサンプル全体や夏に提供する可能性のある旅行を表示するのに役立つことがわかりました。 カルーセルまたはスライダーは、非常に目を引く方法で製品を表示できるようにするWeb要素のXNUMXつです。

たくさん CSSの無料のスライダー、スクローラー、カルーセル 以下に示すように、彼らは私たちの予算を受け入れる前に私たちがクライアントに見せようとしている仕事でのあらゆる種類の目的のための良いレパートリーを構成しています。 これは、HTMLとCSSのスライダーのコレクションであり、水平形式と垂直形式の両方でJavaScriptが少し含まれています。 コードにアクセスしてすばやく実装できるようにするためです。

水平カルーセル

このカルーセルは、 かなり派手なアニメーション カーテンを描いているかのように、このスライダーで設定するプロファイルの写真とアイコンをズームアウトします。 これは、Webで販売する製品に非常に満足しているユーザーからの推薦状に最適なカルーセルです。

関連記事

あなたのウェブサイトに特別なタッチを与える27のHTMLとCSSスライダー

レスポンシブ無限カルーセル

このスライダーは 時々見られる広告のように 側面のサッカー場で、水平方向にスクロールするさまざまな広告を表示します。 ブランドパートナーやその他の種類のロゴを表示する必要があるランディングページに最適です。

Reactカルーセル

この巻物 そのReact.jsで際立っています。 これは、連続アニメーションでXNUMXつの画像から別の画像に移動するときに、比例したサイズで画像を表示するのに役立ちます。 この非常に単純なCSSについてはもう少し言いますが、Web上で適切に配置する方法を知っていれば非常に効果的です。

スムーズな3Dスライダー

HTML、CSS、JavaScriptで構成されたこの3Dカルーセルは、その滑らかさと 非常に視覚的なバウンドアニメーション。 各カードを識別する一連の要素、作品、そしてそれをWebサイトに組み込むための人目を引くカルーセルを備えています。

関連記事

46Javascriptスライダーとスクローラー

自動無限カルーセル

それ自体の名前が警告するように、自動的に表示されるスライダー ユーザーが対話する必要なしに 彼とすぐに。 この印象的なカルーセルを構成するさまざまな画像は、魔法のようにフェードするトランジションのために表示されます。

ホバーカルーセル

ホバー要素でこれ スライダーが左から右に移動します、またはその逆。マウスポインタをその上に置いたままにします。 この画像スライダーを構成できるさまざまな写真間を移動するためのスムーズな移行。

モバイルカルーセル

さらに カルーセルマテリアルデザインと呼ばれる、そしてあらゆる種類のカードの現在の傾向で、 ここでは、CSS / HTMLでそれらの数が多い別の記事を見つけることができます、グーグルが発行したデザイン言語で構成されているため、他の部分から距離を置いています。 カードを長押しすると、別のカードを移動できます。

Instagramフィードカルーセル

あなたは目立つこのスライダーの背後にあるアイデアをクラッシュさせることができます 拡大できる画像のストリップによって それらのXNUMXつをクリックして。 特定の種類のWebサイトを対象としていますが、効果の高いアニメーションです。 Instagramの投稿がslick.jsカルーセルに送られました。

シンプルな同期カルーセル

特に画像のストリップでは、前のものと多くの関係がありますが スライダーとの相互作用は非常に異なります 横方向のジェスチャーで左から右に、またはその逆に移動します。 ここでも、slick.jsがその処理を実行しています。 その素晴らしい効果が印象的です。

3D水平カルーセル

私たちが公開するリスト全体で最も興味深いカルーセルのXNUMXつ。 目立つ CSSとHTMLの水平スライダー それは素晴らしくうまく動きます。 ボックスの上にマウスポインタを置くだけで、XNUMXつのバリエーションで生成できるさまざまな効果を見つけることができます。

CSSカルーセル

シンプルで素晴らしい視覚効果 交代する一連のカード 前面に。 効果は3Dであるため、特に同じ作成者の側に天才を示す最小限のリバウンド効果のために、多くの注目を集めるスライダーのXNUMXつです。

Ambilightブートストラップカルーセル

あまり目立たない効果のあるシンプルなスライダー。 の一つであります それらの単純なスライダー 私たちが普段探しているもので、ファンファーレのない一体感がありますが、それはその機能を完全に果たしています。

カルーセルチーム

ブログにある編集チームを紹介したい場合は、 このスライダーはその役割に最適です。 シンプルさは前のものとよく似ています。 チームの各写真を収めるためにダイヤモンドを使用していることは際立っています。 自動再生があります。

カルーセルキューブ

キューブであることが際立つスライダー それぞれの顔は画像のXNUMXつです またはウェブサイトに表示したい写真。 あなたはそれらをスクロールしてあなたを待っているコンテンツを見つけるためにそれらのそれぞれをクリックする必要があるだけです。

カルーセル矢印キー

インタラクションが通過するスライダー 矢印キーを使用する。 何年も前のように見える、別のタイプのインタラクションに直接つながるファンファーレのないシンプルなもの。 特定の用途向け。

垂直カルーセル

優れた視覚効果を備えたスライダー 連続垂直アニメーションで自動的に再生されます 角が丸いカードで際立っています。 非常に最新であり、このリスト全体からそれ自体で際立っているもののXNUMXつです。

純粋なCSSカルーセル

このカルーセルは、 行くことができるサイドメニュー それぞれのオプションをクリックします。 情報は、言われた以上のことなしに、十分に達成されたリバウンド効果で表示されます。

垂直カルーセル反応

似ている その垂直性のために前、ただし、このスライダーはページの幅全体を取得して、各タブの画像を表示することができます。 その大きなフォーマットと、スライド間をスライドするためのCSSトランジションの使用が興味深い。

3Dスプリットカルーセル

3Dで回転するスライダーパターンによる優れた視覚効果 非常に印象的なアニメーション。 左側のメニューから、それぞれにドットが付いた各オプションを選択できます。 それがどれほど創造的であるかについてのリストで最高のXNUMXつ。