レスポンシブデザインに対応した軽量カルーセル
owl-carousel
を使ってみました。

PCで見た時も横にドラッグしてスライドさせることができ
スマホで見た時はフリックでスライドさせることができます。

サンプルは、
http://www.suzaka.ne.jp/

使い方は、
http://owlgraphic.com/owlcarousel/
ここからダウンロードして、適当な場所に配置。

ヘッダーにCSSを

<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

jQuery 1.7以上の下にjavascriptファイルを

<script src="jquery-1.9.1.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>

HTMLは、

<div id="owl-example" class="owl-carousel">
<div class="item"> 写真など </div>
<div class="item"> 写真など </div>
<div class="item"> 写真など </div>
...
</div>

最後に、javascriptで

$(document).ready(function() {
$("#owl-example").owlCarousel();
});

オプションは次のように指定します。

$("#owl-example").owlCarousel({
autoPlay: 5000,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
itemsMobile : [479,2]
});

autoPlay は、1000で1秒。
items は、一度に表示させる数。
itemsDesktop は、ウィンドウのサイズによって表示させる数を指定します。[1199,3]はウィンドウサイズ1199px以下では、3つのアイテムを表示させるってことです。
itemsMobile で、スマホでは、2個表示させるように指定しています。

CSSはお好みで

#owl-example.item{
margin: 3px;
}
#owl-example.item img{
display: block;
width: 100%;
height: auto;
}

長野県白馬村（白馬五竜スキー場）、大町市（木崎湖）にて、パラグライダータンデムフライト受付中！
長野パラグライダースクールADDS

いけいけすざかの「須坂市グルメ＆観光マップ」がバージョンアップしました。

http://www.suzaka.ne.jp/map/

グルメ、観光マップはもちろん、文化財、学校、保育園など、色々突っ込んでみました。

トップページでは、地図をドラッグすると、緯度・経度がリアルタイムに変わるようにし、
「ここですURL」もつけましたので、須坂市内の場所を伝えるときのURLとして、ご利用下さい。

長野県白馬村（白馬五竜スキー場）、大町市（木崎湖）にて、パラグライダータンデムフライト受付中！
http://www.paraglider.net/
長野パラグライダースクールADDS

簡単な設定で、アニメーションができるので、試してみました。

http://www.suzaka.ne.jp/

１．CSSファイルをダウンロードし、head内部に下記を記入

<link rel="stylesheet" href="animate.css"></link>

２．下記コードを記入

$('#yourElement').addClass('animated bounceOutLeft');

yourElement はアニメーションにしたい id 。
bounceOutLeft の部分を違うタイプにするだけで、色んなアニメーションを設定できます。

使いすぎるとちょっと、、、

長野県白馬村（白馬五竜スキー場）、大町市（木崎湖）にて、パラグライダータンデムフライト受付中！
長野パラグライダースクールADDS

いけいけすざかをレスポンシブデザインにしてから、やりたかったことの一つ

デフォルトスライドダウンメニューをサイドからのスライドイン形式にする

ポイントは、

１．sidrを使う

２．ボタンが右にあるので、

side: 'right'

を使う

３．スライドダウンを止めるため、

.attr('data-toggle', '')
.attr('data-target', '')

を使う

スマホでよくある3本線のボタンをPush！

右からスマホみたいなサイドメニューが登場します。

やりたかった理由は、Cookpadのスマホサイトがこうなってるから！

http://www.suzaka.ne.jp/
↑スマホで確認

スライドメニューの中身はPC版とは切り離せるので、自由にレイアウト可能。

長野県白馬村（白馬五竜スキー場）、大町市（木崎湖）にて、パラグライダータンデムフライト受付中！
長野パラグライダースクールADDS

須坂の素敵な空間「能登忠」さんの動画が完成しました。

須坂の方にも、市外の方にも、素敵な空間を味わっていただきたいですね。