マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

レスポンシブにも対応!③ フリックスライダーを作成してみました。

投稿日:2014年12月22日 更新日:

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。
ただ、レスポンシブに対応しているだけでなく、
スマホに便利なフリックも可能なものをご紹介致します。

前回までの関連記事です。
『レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。』
『レスポンシブにも対応!② グローバルナビゲーションを作成してみました。』

その前にフリックとは?

簡単にご説明しますと指先でスマホの画面上を素早く動かしたり弾くような操作のことを指します。
フリックでスライドさせることが可能であれば、とても便利かと思います。

デモ

設置方法

まずjQueryを読み込ませます。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

そのあとに「jQueryResponsiveFlickSlider.js」を読み込みます。
配布サイトではソースが書かれているだけなので、それをコピペして「jQueryResponsiveFlickSlider.js」という名前のファイルを作成しました。

<script src=”[ファイルへのパス]/jQueryResponsiveFlickSlider.js”></script>

htmlソースの記述

<div class=”flickSlider”>
<div class=”flickView”>
<ul>
<li><img src=”[ファイルへのパス]/011.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/021.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/031.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/041.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/051.jpg” alt=””></li>
</ul>
</div>

<div class=”flickThumb”>
<ul>
<li><img src=”[ファイルへのパス]/011.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/021.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/031.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/041.jpg” alt=””></li>
<li><img src=”[ファイルへのパス]/051.jpg” alt=””></li>
</ul>
</ul>
</div>
</div>

flickView内の画像がメインビジュアル部分になります。
flickThumb内の画像はナビゲーションとなっています。

CSSの記述

.flickSlider {
margin: 0 auto;
text-align: left;
display: none;
}
.flickSlider .flickView {
width: 100%;
text-align: left;
position: relative;
overflow: hidden;
}
.flickSlider .flickView ul {
top: 0;
left: 0;
width: 100%;
position: absolute;
overflow: hidden;
}
.flickSlider .flickView ul li {
width: 100%;
float: left;
display: inline;
overflow: hidden;
}
.flickSlider .flickView ul li img {
width: 100%;
}
.flickSlider .flickThumb {
width: 100%;
overflow: hidden;
}
.flickSlider .flickThumb ul {
width: 110%;
}
.flickSlider .flickThumb ul li {
float: left;
cursor: pointer;
display: inline;
}
.flickSlider .flickThumb ul li img {
width: 100%;
}
.flickSlider .flickThumb ul li.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
.flickSlider .btnPrev, .flickSlider .btnNext {
top: 0;
width: 5%;
height: 100%;
position: absolute;
cursor: pointer;
}
.flickSlider .btnPrev {
left: 0;
background: #ccc url([ファイルへのパス]/btnPrev.png) no-repeat center center;
}
.flickSlider .btnNext {
right: 0;
background: #ccc url([ファイルへのパス]/btnNext.png) no-repeat center center;
}

設定の変更方法

JS内の下記部分で設定が変更可能です。

var setWrap = $(‘.flickSlider’),
setMainView = $(‘.flickView’),
setThumbNail = $(‘.flickThumb’),
setMaxWidth = 500,
setMinWidth = 200,
thumbNum = 5,
thumbOpc = 0.5,
scrollSpeed = 500,
delayTime = 5000,
easing = ‘linear’,
sideNavi = ‘on’, // ‘on’ or ‘off’
autoPlay = ‘on’; // ‘on’ or ‘off’

setMainView:メインビジュアル部分の設定
setThumbNail:ナビゲーション部分の設定
setMaxWidth:メインビジュアルの最大横幅の設定
setMinWidth:メインビジュアルの最少横幅の設定
thumbNum:スライド画像の枚数の設定
thumbOpc:ヒアクティブ時のナビゲーションの透過度
scrollSpeed:スライドのスピード
delayTime:1枚ごとの待機時間
easing:スライド時のアニメーションの種類
sideNavi:サイドナビ(NEXTとPREV)の表示/非表示
autoPlay:自動でスライドショーを再生

となります。

機能面でも申し分ありませんので、ぜひご活用ください。
配布元は下記になります。
http://black-flag.net/jquery/20130514-4588.html


-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

手作り感溢れる癒しのWEBデザイン

手作り感溢れる癒しのWEBデザイン

フラットデザインやシンプル系、クール系のデザインとは違った手作り感溢れるデザインは気持ちが伝わりほっこりさせてくれます。 トレンドのデザインは進んでゆきますが、手作り系のデザインは今も昔もずっと残って …

普通の写真も一風変わった感じに!【Photoshopで写真をミニチュア風に加工】

普通の写真も一風変わった感じに!【Photoshopで写真をミニチュア風に加工】

デザインする時、「この素材写真イマイチだなー」と思ったことありませんか? ここで普通の写真をミニチュア風に加工するPhotoshopの小技をご紹介します。 STEP1 まず加工する写真をPhotosh …

戦略なきWEBブランディングは効果なし

戦略なきWEBブランディングは効果なし

ブランディングとうい視点で、日本酒について考えてみたいと思います。 旅人・中田英寿 たどり着いた先は「日本酒ビジネス」のなぜ? “旅人”のたどりついた先は酒蔵だった。元サッカー日本代表の中田英寿(37 …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …