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

無料のスライダー

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

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

水平カルーセル

敏感な

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

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

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

自己複製

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

Reactカルーセル

3Dカルーセル

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

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

3Dカルーセル

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

関連記事
46Javascriptスライダーとスクローラー

自動無限カルーセル

無限のカルーセル

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

ホバーカルーセル

ホバーカルーセル

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

モバイルカルーセル

モバイルカルーセル

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

Instagramフィードカルーセル

インスタグラム

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

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

シンプルなカルーセル

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

3D水平カルーセル

3D水平カルーセル

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

CSSカルーセル

CSS 3D

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

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

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

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

カルーセルチーム

カルーセルチーム

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

カルーセルキューブ

3Dキューブ

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

カルーセル矢印キー

CSSキー

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

垂直カルーセル

垂直カルーセル

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

純粋なCSSカルーセル

回転木馬

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

垂直カルーセル反応

回転木馬

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

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

スプリット

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


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

4コメント、あなたのコメントを残してください

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。

  1.   マイラオレラナ

    おはようございます。自分のサイトでPureCSSカルーセルを使用したいのですが、XNUMXつの位置にしか配置されていません。ページ内の目的の位置に配置するには、どうすればよいですか。

    これであなたの助けをお願いします。どうもありがとうございました

  2.   ザビエルカニザレス

    モバイル版のウェブサイトでホバーカルーセルを適切に表示するにはどうすればよいですか?

  3.   ガブリエル

    素晴らしい、彼らはなんて良い仕事をしたのでしょう!

  4.   トニーザンブラノ

    こんにちは、馬車置場はとてもかっこいいですが、アップロードするとすぐにコピーして貼り付けると、var max = $( '#c> li).lenght…のためにjavascripでエラーが発生します。 あなたは何を提案していますか