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

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

PR

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ] 価格：1,390円（税込、送料無料) (2023/5/23時点) 楽天で購入

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。