自動リミックスの CSS スライダー。 CSS3を使用したJavaScriptなしのアダプティブスライダー。 CSSスライダーのキーフレーム

私は誰にもアメリカを紹介しませんし、新しい焦点を一般に紹介するつもりはありません。CSS3 でスキューバ ダイバーのように泳ぐ人々の脳を傷つけることもありません。 JavaScriptを使わずに簡単なCSS3関数を使ってスライダーを作成する簡単な方法を紹介します。

1.ベースをレイアウトする

2. スライダーをデザインする

* ( マージン: 0; パディング: 0; -webkit-box-sizing: ボーダーボックス; -moz-box-sizing: ボーダーボックス; -o-box-sizing: ボーダーボックス; box-sizing: ボーダーボックス; ) body (background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
背景の装飾と暗いスタイルで、すべてがより明確になりました。

ラッパー (高さ: 350px; マージン: 100px 自動 0; 位置: 相対; 幅: 700px; ) .slider (背景色: #ddd; 高さ: 継承; オーバーフロー: 非表示; 位置: 相対; 幅: 継承; -webk ボックス-shadow: 0 0 20px rgba(0, 0, 0, .5);-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5); 20px rgba(0, 0, 0, . 5);ボックスシャドウ: 0 0 20px rgba(0, 0, 0, .5);
カウンターブロックとスライダーを同じ寸法に調整することで、側面のスライダーの位置を完璧に制御できます。 今日、スライダーが稼働している間、スライダーはすぐに明るい灰色に塗られました。

ラッパー > 入力 (表示: なし; )
ラジオボタンは大歓迎です。 臭いは後で必要になります。

現在の結果は次のとおりです。

3. スライドをデザインする

スライド (高さ: 継承; 位置: 絶対; 幅: 継承; ) .slide1 (background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9b) -image: url(http:/) /habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); ) .slide3 (background-image: url(http://habrastorage.org/files/6 d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg) );).slide4 (背景画像: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab89jpg : url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);
すべてのスライドについて、効果を表示できるように絶対位置を指定しました。 スライドの寸法はスライダー自体のサイズから取得されるため、多くの場所に登録する必要はありません。

4. スライドによるロボナビゲーション

ラッパー .controls ( 左: 50%; マージン左: -98px; 位置: 絶対; ) .wrapper ラベル ( カーソル: ポインター; 表示: インラインブロック; 高さ: 8px; マージン: 25px 12px 0 16px; 幅: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; 2px ソリッド #ddd; コンテンツ: " "; 表示: ブロック; 高さ: 12px; 左: -4px; 位置: 絶対; トップ: -4px; -radius: 50%; -o-border-radius: 50%; border-radius: 50%;
私たちのナビゲーションは間違いなくクラシックです。 スキン ボタンは杭のように見える領域で、スライドがアクティブになると、その中央の空の領域が吠えられることがよくあります。 これまでのところ、次の結果が得られています。

5. 押しボタンに加えて

ラッパーラベル (カーソル: ポインター; 表示: インラインブロック; 高さ: 8px; マージン: 25px 12px 0 16px; 位置: 相対; 幅: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50 %;-o-border-radius: 50%; border-radius: 50%;-webkit-transition: バックグラウンドイーズインアウト .5 秒; トランジション: バックグラウンドイーズインアウト .5 秒; トランジション: バックグラウンドイーズイン-out .5s; ) .wrapper label:hover、#slide1:checked ~。 チェック済み ~ .controls ラベル:nth-of-type(2)、#slide3:checked ~ .controls ラベル:nth-of-type(3)、#slide4:checked ~ .controls label:nth-of-type(4) , #slide5:checked ~ .controls label:nth-of-type(5) (背景: #ddd; )
ナビゲーション ボタンをデザインする前に、ボタンの中央にスムーズなフローを追加します。 同様に、どのボタンがアクティブであるかを理解し、カーソルをその上に置くとスムーズに選択されます。 主要なラジオ ボタンが準備できました。

6. スライダーを歓迎します

スライド (高さ: 継承; 不透明度: 0; 位置: 絶対; 幅: 継承; z-index: 0; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale (1.5)、変換: スケール(1.5); -in-out .5s; -o-transition: 変換 easy-in-out .5s、不透明度 easy-in-out .5s; ) #slide1:checked ~ .slider > .slide1、#slide2:チェック済み ~ .slider > .slide2、#slide3:チェック済み ~ .slide3、#slide4:チェック済み ~ .slide > .slide4、#slide .slide > .slide5 (不透明度: 1; z-インデックス: 1; -webkit-transform: スケール (1); -moz-transform: スケール (1); -o-transform: スケール (1); 変換: スケール (1);
スライドの高度なスタイルにより迫力が増し、スライドが非表示になり、背景にフェードインします。 また、匂いが見えなくなるまでスライドを少し増やして、スライダー上に匂いが現れるようにしました。

結果はここで確認できます。

1. 素晴らしい jQuery スライドショー

jQuery テクノロジーを使用した素晴らしいスライドショー。

2.jQueryプラグイン「Scale Carousel」

jQueryを使用したスケーリングされたスライドショー。 スライドショーのサイズを最適に設定できます。

3.jQueryプラグイン「slideJS」

テキスト説明付きのスライダー表示。

4.プラグイン「JSliderNews」

5.CSS3 jQueryスライダー

ナビゲーション矢印の上にカーソルを置くと、次のスライドの円形のサムネイルが表示されます。

6. 素晴らしい jQuery の「プレゼンテーション サイクル」スライダー

画像の可用性インジケーターを備えた jQuery スライダー。 スライドの自動切り替えが転送されました。

7.jQueryプラグイン「視差スライダー」

背景にボリューム効果を与えるスライダー。 このスライダーのロッドは、さまざまな流動性で回転する複数のボールで構成される背景上に配置されます。 結果は、ボリューム効果を模倣したものになります。 見た目もとても美しいので、自分でその中に入ることができます。 Opera、Google Chrome、IEなどのブラウザでエフェクトがよりスムーズに表示されます。

8.新鮮で軽量なjQueryスライダー「bxSlider 3.0」

デモ ページの「例」セクションに、このプラグインで使用できるすべてのオプションの手順が記載されています。

9. jQuery画像スライダー、プラグイン「slideJS」

プロジェクトを本当に明るくするスタイリッシュな jQuery スライダー。

10. jQuery スライドショー プラグイン「Easy Slides」v1.1

スライドショーを作成するためのシンプルな jquery プラグイン。

11.「jQuery Slidy」プラグイン

さまざまなアプリケーション向けの軽量の jQuery プラグイン。 スライドの自動切り替えが転送されました。

12. スライドの自動変更を備えた jQuery CSS ギャラリー

「進む」または「戻る」矢印を押さない限り、ギャラリーは自動的にスクロールします。

13. jQueryスライダー「Nivo Slider」

有効なコードを備えた非常にプロフェッショナルで、明確で軽量なプラグインです。 スライド変更によるさまざまな効果が転送されています。

14. jQueryスライダー「MobilySlider」

新鮮なスライダー。 さまざまな効果を備えたjQueryスライダー、画像を変更します。

15. jQueryプラグイン「Slider²」

自動スライドチェンジ機能付き軽量スライダー。

16. 新鮮なJavaScriptスライダー

表示するスライダーを自動的に変更します。

スライドを自動で切り替えるスライドショーを実現するプラグイン。 追加のサムネイル画像の表示を制御できます。

NivoSlider プラグインを使用した jQuery CSS スライダー画像。

19. jQueryスライダー「jShowOff」

一緒に回転させるプラグイン。 3 つのナビゲーション オプション: ナビゲーションなし (スライド ショー形式での自動変更あり)、ボタン ビューでのナビゲーション、画像サムネイル ビューでのナビゲーション。

20.プラグイン「シャッターエフェクトポートフォリオ」

写真家のポートフォリオをデザインするための新しい jQuery プラグイン。 ギャラリーには画像を変更する簡単なエフェクトが実装されています。 レンズシャッターのような効果で写真が1枚ずつ変化します。

21. 軽量JavaScript CSSスライダー「TinySlider 2」

画像スライダーの実装にはJavaScriptとCSSを使用します。

22. 言語スライダー「Tinycircleslider」

スタイリッシュなラウンドスライダー。 画像間の遷移は、ハートの杭のように見える杭に沿って円をドラッグすることによって行われます。 デザインに丸い要素を使用すると、ウェブサイトに完璧にフィットします。

23. jQueryを使った画像スライダー

軽量スライダー「スライダーキット」。 さまざまなヴィコナンニのビュー スライダー: 垂直方向と水平方向。 画像間のナビゲーションには、「進む」ボタンと「戻る」ボタンを使用する、マウス ホイールを使用する、スライドをクリックするなど、さまざまな種類があります。

24. ミニチュアギャラリー「スライダーキット」

ギャラリー「スライダーキット」。 サムネイルのスクロールは垂直方向と水平方向の両方で機能します。 マウス ホイールを使用するか、マウスを押すか、サムネイルの上にカーソルを置くことにより、画像間を移動できます。

25.「スライダーキット」の代わりにjQueryスライダー

jQueryを使用した垂直および水平コンテンツスライダー。

26. jQueryスライドショー「スライダーキット」

スライドが自動で切り替わるスライドショー。

27. 軽量でプロフェッショナルな JavaScript CSS3 スライダー

2011 年に作成された、jQuery と CSS3 に基づいたきちんとしたスライダー。

サムネイル付きの jQuery スライドショー。

29. jQuery スライドショーを簡単にする

ナビゲーション ボタン付きのスライドショー。

30. ニューモビルンのスライドショー jQuery「Skitter」

派手なスライドショーを作成するためのjQueryプラグイン「Skitter」。 このプラグインは、画像を変更する際のさまざまなアニメーション効果を 22 種類 (!) サポートしています。 スライド間の移動には、追加のスライド番号を使用する方法と追加のサムネイルを使用する方法の 2 つのオプションを使用できます。 デモンストレーションを見て驚くのは簡単ですが、これは非常に明らかな発見です。 レビュー対象のテクノロジー: CSS、HTML、jQuery、PHP。

31. スライドショー「気まずい」

機能的なスライドショー。 スライドは次のようになります: シンプルな画像、キャプション付きの画像、ヒント付きの画像、ビデオ。 移動するには、スライド番号の矢印とキーボードの右手/左手キーを使用します。 スライドショーには、サムネイルありとサムネイルなしのさまざまなオプションがあります。 すべてのオプションを確認するには、デモ #1 ～ デモ #6 を実行し、デモ ページの野獣にリリースします。

スライダーの画像はご想像のとおり、非常に独創的なデザインです。 スライドの切り替えがアニメーション化されました。 矢印を使用して画像間を移動できます。 また、再生/一時停止ボタンを使用してボタンを押したりミュートを解除したりできる自動変更もあります。

jQueryスライダーをアニメーション化します。 ブラウザのウィンドウ サイズを変更すると、背景画像が自動的に拡大縮小されます。 スキン画像の場合は、説明を含むブロックが表示されます。

34. jQueryとCSS3を使ったスライダー「Flux Slider」

新しい jQuery スライダー。 スライドを変更するときのクールなアニメーション効果の数々。

35. jQueryプラグイン「jSwitch」

アニメーションの jQuery ギャラリー。

スライドの自動変更により、jQuery でのスライドショーがより簡単になりました。

37. プラグインの新バージョン「SlideDeck 1.2.2」

プロフェッショナルなコンテンツ スライダー。 スライドを自動的に変更するオプションと、マウス ホイールを使用してスライド間を移動するオプションがあります。

38. jQueryスライダー「Sudoスライダー」

jQueryを使用した軽量画像スライダー。 画像の水平方向と垂直方向の変更、スライド番号の指示の有無、キャプションの有無、画像変更のさまざまな効果など、実装オプションは多数あります。 主な機能は、スライドを自動的に切り替えることです。 アプリケーションの実装手順については、デモ ページをご覧ください。

39. jQuery CSS3 スライドショー

サムネイル付きのスライド ショーは、自動スライド変更モードをサポートしています。

40. jQueryフラックススライダー

透明効果のあるスライダーを表示します。

41. シンプルなjQueryスライダー

jQueryを使用したスタイリッシュな画像スライダー。

～についての本を読んで練習する jQuery最終的には、多くの前払い者から jquery でスライダー スクリプトを書く方法を教えてほしいと頼まれました。 ごめんなさい、親愛なる友人たち！ 私たちは 21 世紀にいますが、幸いなことに、このような音声を連続して実装できるすべての CSS3 アクセサリにアクセスできます。 JavaScript.

パート1。

まず、スライダーとは何かを知らない人のために説明します。 スライダー- Web ページの一部または全体を占める単一の幅のブロック。 コンテンツの主な特徴は、自動または手動で変更されることです。 コンテンツにはグラフィック画像とテキストの両方を含めることができます。

もちろん、スライダーがまだ JavaScript で実装されているのに、自転車はどこから来たのか、疑問に思うかもしれません。 私の主張の軸は次のとおりです。

1. CSS の効果を確認します。 これはモバイルデバイスでは便利です。
2. スライダーを作成するには、プログラミングのスキルは必要ありません。

したがって、この例では、プロジェクトに必要な数のイメージが必要になるため、必要なだけイメージを作成できます。 すべての画像が同じサイズであることに同意します。 そして、言い忘れていましたが、スライダーは適応型になります (はい、はい、 アダプティブレイアウト、容赦はありません）、あらゆるデバイスのどのプロジェクトでもそれを活性化できます。 エール、ボールを終わらせてください。私はすでにメガコードを書きたくてうずうずしています。 HTML を始めましょう:

スペースを節約するために alt 属性を削除しました。SEO クエリのために、またブラウザで画像の表示を有効にしているユーザーに通知するために、自分で入力できます。 また、画像よりも優れているものには敬意を表したいと思います（ アラジン.jpg) がブラーの最後に存在し、スライダーがけいれんせずに周期的にスクロールできるようになります。

わかりやすくするために、幅をウィンドウの 80% に設定します。最大幅は写真の周囲のスキンのサイズ (この例では 1000 ピクセル) に対応するため、画像を引き伸ばす必要はありません。

スライダー (幅: 80%; 最大幅: 1000px; )

CSS コードでは、図の幅は高さから展開される div までで表されます。 5 枚の写真を表示でき、div がすべて単独の場合、Figure の幅は 5 倍になり、div コンテナーの幅の 500% になります。

font-size: 0 パラメーターは常に Figure から選択し、画像の周囲および画像間のスペースを増やすことができます。 Position:relative を使用すると、アニメーション中にフィギュアを簡単に移動できます。

写真の真ん中にある写真を平等に共有する必要があります。 式は非常に単純です。図の幅を 100% に設定してもよい場合、画像のスキンは水平方向のスペースの 1/5 を占める必要があります。

これは、次の CSS ルールが必要なためです。

画像ストリップ画像 (幅: 20%; 高さ: 自動; )

これで、div のオーバーフローの能力を変更できるようになりました。

スライダー (幅: 80%; 最大幅: 1000px; オーバーフロー: 非表示)

暗い画像が右に移動するように作業する必要があることがわかります。 コンテナ div の幅は 100% であるため、このセクションの数百のセクションで、左利きを描いた暗い肌のスキンが表示されます。

@keyframes slidy ( 20% ( 左: 0%; ) 25% ( 左: -100%; ) 45% ( 左: -100%; ) 50% ( 左: -200%; ) 70% ( 左: -200 %; ) 75% (左: -300%; ) 95% (左: -300%; ) 100% (左: -400%; ) )

スライダー上の画像のスキンが div に配置され、5% ずつ移動します。

スライダー図 (位置: 相対; 幅: 500%; アニメーション: 30 秒のスライディ無限; フォントサイズ: 0; パディング: 0; マージン: 0; 左: 0; )

パート2。

ミ・ズロビリのメガクール JavaScriptなしのスライダー。 まずはこれで満足して、次のボタンに進みましょう。 より正確に言えば、新しいものではなく（私はそれを乗り越えるのが面倒です）、新しいものです。

したがって、HTML コードは次のようになります。

次に、スライドのアニメーションについて話しましょう。 残念ながら、スライドの数が異なる場合は次のようになります。

/* 2 つのスライドを持つスライダーの場合 */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% ( opacity:0;) ) /* 3 つのスライドを持つスライダーの場合 */ @keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% ( opacity: 0;) 100%(opacity:0;) ) /* 4 つのスライドを持つスライダーの場合 */ @keyframes slider__item-autoplay_count_4 ( 0%(opacity:0;) 8% (opacity:1;) 25% (opacity :1; ) 33% (opacity:0;) 100%(opacity:0;) ) /* 5 つのスライドを持つスライダーの場合 */ @keyframes slider__item-autoplay_count_5 ( 0%(opacity:0;) 7% (opacity: 1; ) 20%(不透明度:1;) 27%(不透明度:0;) 100%(不透明度:0;) )

おかしい、何が問題なの？ さらに、Opera、Chrome、IE、および Mozli では、すべて同じように記述する必要がありますが、同じプレフィックスを付ける必要があることを忘れないでください。 次に、スライドのアニメーションのコードを記述しましょう (こことその下に 3 つのスライドのコードが表示されます。以下のコードには、多数のサイトのコードが含まれています)。

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15秒 無限; -webkit-animation: slider__item-autoplay_count_3 15秒 無限; -o-animation: slider__item-autoplay_count_3 15秒 無限; ) .item:nth -of-type(2) ( -moz-アニメーション遅延:5秒; -webkit-アニメーション遅延:5秒; -o-アニメーション遅延:5秒; アニメーション遅延:5秒; ) .item:nth-of-type (3) ( -moz-animation -遅延:10秒; -webkit-アニメーション遅延:10秒; -o-アニメーション遅延:10秒; アニメーション遅延:10秒; )

ご存知のとおり、最初のゼロのペアではキャンセルは変わりません。 なお、上記の情報はスライド枚数を網羅するものではないため、最大スライド枚数まで1回の記述で済みます。 次に、ユーザーがスライダーの上にマウス カーソルを置いたときにスライドが変化しないようにしてみましょう。

Slider:hover .item ( -moz-アニメーション再生状態: 一時停止; -webkit-アニメーション再生状態: 一時停止; -o-アニメーション再生状態: 一時停止; アニメーション再生状態: 一時停止; )

こんにちは、スライドのミキシングまでお届けしました。 どうやら、CSSを使用して要素のパワーを変更する方法はありません。 ターゲットをターゲットにするには、ページ要素の 1 つで疑似クラス :focus、:target、または :checked を使用できます。 疑似クラス :focus はページごとに 1 つの要素のみに含めることができます。 :target はブラウザの履歴を追跡し、タグを必要とします。 pseudo-class:checked はページを終了する前のステータスを記憶しており、各ラジオ ボタンについて、グループごとに 1 つの要素のみを選択できます。 スピードアップ。 前に挿入