進化するモコモコ(PC版)

練習問題(基礎)

サンプル通りに実装してみてください。多少の記述の差異は、問題ありません。主要であるブラウザで問題なくレイアウトが整っていることが到達点です。

【お題】モコモコ・・・・矢印に使用する

● 完成サンプルを見る(PC版対応のみ)

分かりやすくワイヤーで解説しています。▶ PDF資料を見る

jQuery Cycle Plugin

今回は、こちらのサイトのプラグインを使用させていただきました。とても手軽にスライドが利用できます。様々な動きのサンプルがあり必見です。
http://jquery.malsup.com/cycle/

「進化するRWDモコモコ」レスポンシブバージョン

大変お待たせいたしました。スマートフォンの普及により、モコモコはレスポンシブデザインに対応する基本練習サイトとして、バージョンアップいたしました。(2018年9月リリース)

▶　レスポンシブ対応のモコモコを見る

slick Slider

レスポンシブ対応のスライダー
今回は、こちらのサイトのプラグインを使用させていただきました。

http://kenwheeler.github.io/slick/

● slick Sliderに必要なデータ

アクションの記述

<script>
$(function(){
$('.slider').slick(
{autoplay:true,/*自動で再生*/
autoplaySpeed:4000,/*サンプルのため切り替え早めてあります*/
dots:true,/*ドットを入れる*/
fade:true,/*フェイドインアウト(デフォルトは、スライドです。)*/}
);
});
</script>

$(function(){

$('.slider').slick(

{autoplay:true,/*自動で再生*/

autoplaySpeed:4000,/*サンプルのため切り替え早めてあります*/

dots:true,/*ドットを入れる*/

fade:true,/*フェイドインアウト(デフォルトは、スライドです。)*/}

);

});

</script>

slick sliderの設置法

詳しくは、こちらにも掲載しています。

slick sliderの豊富なオプション！

slick sliderには、実に豊富なオプションが用意されています。様々な実行処理の記述を紹介します。
▶　slicksliderオプションサンプルを見る