- 締切済み
jquery slickに関して教えて下さい。
jquery初学者です。 slickのシングルモードは動作するのですが、 センターモードの実装が上手くできないため、対処法を教えて下さい。 ////code//// <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト用</title> <script src="js/jquery-1.11.2.min.js"></script> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('.your-class').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] }); }); </script> </head> <body> <div class="your-class"> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> </div> <style> .your-class{ width:350px; margin-left:50px; } .test{ background-color: #00f; } </style> </doby> </html> scriptのファイル等はシングルモードが動作済みであるため、 ダウンロード等は済んでいると思われます。 よろしくお願い致します。 補足 参考としたサイトはこちらです。 http://kenwheeler.github.io/slick/ よろしくお願い致します。
- sato_tokutoku
- お礼率0% (0/16)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- Hanagefactory
- ベストアンサー率58% (42/72)
参考サイトでいえば、 http://kenwheeler.github.io/slick/css/style.css の18行目に .center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform と記載があります。 ※FireFoxやChromeでもデベロッパーツールの虫眼鏡を使えば発見できますよ。 css/style.cssはそのサイト用の記述なので、 「センターが飛び出て見えるような効果」はなく、 やはり「自分でCSSをいじる」ことになると思います。 ちなみに私が scale(1.08) を scale(1.20) にしたのはわかりやすくするためです。 ※CSS3のスケールについては以下を参照 http://www.htmq.com/css3/transform_scale.shtml
- Hanagefactory
- ベストアンサー率58% (42/72)
> しかし、slickサイトのようにセンターが飛び出て見えるような効果が見えません。 > これは、初期設定ではなく、自分でCSSをいじるのでしょうか？ 参考サイトでも .slick-center h3に transform: scale(1.08);がついています。 なので今回のケースでいえば .test{ margin: 5px; } .slick-center{ transform: scale(1.20); } とかを追記すれば飛び出た風味になる気がします。
- Hanagefactory
- ベストアンサー率58% (42/72)
どのあたりの制御がうまくいかないのでしょうか？ 動作をわかりやすくするために、 .slick-active{ border:1px solid gray; } .slick-center{ background-color: #fee; } を追記して確認しましたが、 手元で動かした感じは普通に動いてる気がします。 ※ちなみに<body>の閉じタグが </doby>になってますヨ。
補足
画像を追加して実行を行いました。 しかし、slickサイトのようにセンターが飛び出て見えるような効果が見えません。 これは、初期設定ではなく、自分でCSSをいじるのでしょうか？ その場合、大変申し訳ありませんが、 どのように行えばいいのか教えて頂けないでしょうか。 よろしくお願い致します。
補足
ありがとうございます。 何度も申し訳ありませんが、 transform: scale(1.20);のような記述はどうすれば見る事ができるのでしょうか？ デベロッパーツールやコードを拝見しても、そのようなコードを見る事はできませんでした。 ご回答よろしくお願い致します。