【jQuery】slick内にaタグで囲んだ画像をクリックした時に枠線がでる現象の対策

1 slickに関するテクニックの内容
2 CSS,JavaScriptの記述内容

slickに関するテクニックの内容

今回はWeb制作でjQueryのプラグインを使用したスライダー（slick）の実装に関する内容です。slickは定番のスライダーjQueryプラグインですが、初期設定のままだとスライド内にあるaタグで囲んだ画像をクリックした時に枠線がでてしまう問題が派生します。

カルーセルでマウスによるスライドをした時などに、画像周辺に枠線が表示されてしまい非常に目立ちます。解決法は簡単で、slick-slideというクラスがついた要素の中身のaタグにoutline:none;を指定するだけです。

>> 対策のDEMO（View Demo）

CSS,JavaScriptの記述内容

実装に必要なスクリプトとスタイルはこれだけです。

$(function() {
  $('.slide').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToShow: 3,
    arrows: false,
  });
});

.wrap {
  position: relative;
  width: 768px;
  margin: 70px auto 0;
}

.slide a {
  display: block;
  margin: 20px;
  padding: 20px;
}

.slider02 .slick-slide a {
  outline:none;
}

@media screen and (max-width:640px){
  .wrap {
    width: 100%;
  }
}