忍者ブログ
18 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

15 June

カルーセル スライダーには「slick」が一番いい！

http://kenwheeler.github.io/slick/
http://gimmicklog.main.jp/jquery/549/
http://gimmicklog.main.jp/demo/slick/slick.html
http://cly7796.net/wp/javascript/plugin-slick/

$(function() {
    $('.center-item').slick({
    infinite: true,
    dots:true,
    slidesToShow: 1,
    centerMode: true, //要素を中央寄せ
    centerPadding:'100px', //両サイドの見えている部分のサイズ
    autoplay:true, //自動再生
    responsive: [{
      breakpoint: 480,
        settings: {
          centerMode: false,
      }
    }]
  });
});



imgの入ったスライダーのを囲むdivかulには　max-width　を指定
以下のようにどっちか。

<div class="slick">
<div>img></div>
</div>

<div class="slick">
<li>img></li>
</div>


スライダー画像には　width:100%;　height:auto;　を指定しておく


カルーセルだけをやりたいならslickというjqueryプラグインがいい
レスポンシブ対応で、ブレイクポイントを定めてカルーセルの形を簡単に変えることもできる
これがすごいいい

PCサイズでは3枚表示1スライド
スマホサイズでは中央寄せ1表示1スライド

とか変幻自由。私でもわかりやすくコピペだけで可能。


カルーセルの形やオプションも豊富で、やりたいことはほぼ可能
公式もすごく見やすい
海外の公式サンプルって見難いとかどこかわかんねーとか多すぎ
PR
27 March

flexslider をフルスクリーンにしたい場合の下のコントロールボタン

http://egreen-p.com/blog/flexslider

どっかいっちゃうので上記のとおり
解決策は、.flex-sliderにoverflow:hiddenをかけたら直った。

無理やりabusoluteで動かしてたけど、上のcssでよくなった
それにしても検索して唯一書いてくれて助かる
マイナーっぽい悩みだし
普通のスライダーをフルスクリーンで使うってなかなかない
フルスクリーンだと背景スライダーか、divのページそのもののコンテンツスライダーになる

05 January

match-height.js　異なる高さの横並びボックスの高さを揃える

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery.matchHeight.js"></script>

<script type="text/javascript">
jQuery(function() {
    jQuery('.works_detail_03 li').matchHeight();
});
</script>





http://brm.io/jquery-match-height/

これが簡単でいい。

日本人が作ったやつもあったけど、レスポンシブのための指定をしても幅の伸び縮みで自動調整がうまくいかなかった。リロードすれば治るけど。