テーマ：jQuery (flexslider)/CSS3
難易度：中級
所要時間：30分
今回は、Impressionist UIを用いた魅力的なスライダーの作成方法をご説明します。
機能面でのコードはFlexSliderのプラグイン、スタイリングはCSS3を使用しております。
ぜひ楽しくご覧ください。
あなたのプロジェクトにも活用できれば幸いです。
それでは始めましょう。
ステップ1―マークアップ
スライダーを作成するHTMLのマークアップ言語は、非常に簡単です。
“flex-container”というフレックスボックスの階層に＜div＞を作成し、この＜div＞の中に別の”flex-slider”という階層を追加します。
このdivというのは、全てのスライダーの中に入っているものです。
また、各スライドには要素のリストが必要です。
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="img/slide1.jpg" /></a&
スポンサーリンク
簡単に実装できるjQueryとCSS3を使用して、レスポンシブ対応のイメージスライダーを作る方法
マーケティング最新
コメント