青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

スライダー

SwiperをWebpackで利用するときは設定をしないとIEでのみエラーになる

Swiperというスライダーを作るときに便利なプラグイン。 swiperjs.com もう超絶便利ですよね。 で、こいつをWebpackとかで使う際に注意が必要だと最近わかりました。 なぜかIEでだけ、普通に使ってるとJS全部機能しません。 【JS】スライダーのSwiperをwebpa…

SlickでAutoplayをtrueにしているのにhoverするとAutoplayが止まる

slick - the last carousel you'll ever need なんと、初期設定で、 pauseOnFocusとpauseOnHoverがtrueになっている。 なので、初期設定ではそのスライダーにフォーカスした時(フォーカスした時ってなんなのですかね、ホバーとなにが違うのか)と、スライダ…

slickを使ったスライダーでスライド切り替えのイベントを取得

ithat.me ここに書いてあります var $slider = $('.slider'); $slider.slick(); // スライド切り替えの度にスライド番号を取得 $slider.on('afterChange', function(slick, currentSlide){ var current_slide = $my_slide.slick('slickCurrentSlide'); conso…

slickを使ったスライダーで、.slick-dotsのdot部分の大きさがおかしいときに調整する方法

このページャー部分となるドット、大きさがおかしいときどうするか。 GoogleChrome DevToolでその部分を見て、 ここのfont-sizeっぽい。 ここの指定が.slick-dots li button:beforeなので、それをそのままエディタにコピペ。 .slick-dots li button:before {…

Swiperというライブラリで簡単にスライダーを実装する

www.willstyle.co.jp Swiperのバージョンとかによって微妙に書き方が異なる印象があるので注意。 idangero.us <link rel="stylesheet" href="<%= pathToAssets %>lib/swiper/css/swiper.min.css"> <script src="<%= pathToAssets %>lib/swiper/js/swiper.min.js"></script> これで読み込む。 </link>