あなたのキモチ つなげるカタチ

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

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

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

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

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%;
  }
}

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク