Slickで作ったSliderで画像とdots間の大きな隙間を強引に解決した方法

2020年10月8日 2020年10月8日

akinori

Slickで作ったSliderで画像とdots間の大きな隙間を強引に解決した方法

今ドメイントップの作り変えを行ってまして、TOPページにsliderを置こうと。
で、簡単だからSlickでいいかなと思い作業をしたら、画像とページ送りのドットとの間に超でかい隙間が発生。

スマホで見ると隙間更にデカいし。
色々とスマートな方法探したのですが、解決に至らなかったので力業で解決しました。

まずは基本コード

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
  </head>
  <body>
    <div class="container col-lg-12 col-lg-offset-0">
      <div class="single-item">
        <div>
          <a href="">
            <img src = "画像1.png" style="width:100%;">
          </a>
        </div>
        <div>
          <a href="">
            <img src = "画像2.png" style="width:100%;">
          </a>
        </div>
        <div>
          <a href="">
            <img src = "画像3.png" style="width:100%;">
          </a>
        </div>
        <div>
          <a href="">
            <img src = "画像4.png" style="width:100%;">
          </a>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="qolkk/js/slick.min.js"></script>
  </body>
</html>

sliderの前でCSSを読み込んで、jqueryの後にslickのjs読み込んで、スライドを<div>とか<li>とかで囲って。

そんなに難しい事はなく「おしまい」なはずだったんですよね。

書いた結果発生した事態

この隙間、スマホで確認すると画像の3倍ほどの高さを持つようになってました。
これはダメダメすぎる...。

色々やってみた事

Laaravelから移植したCSSを外す　=>　×
<div>を<li>で書いてみる　=>　×
JSの置き場所をheaderにしてみる　=>　×
aタグを外す　=>　×
Slick.jsをWeb上の公開JSに置き換える　=>　×

まぁ出来ないのあたりまえなんですけど、迷走してましたね。

Heightを誤認しているのは何処かを探し出す

Heithtをautoにしてもマッチしてこないと言う事は、何処かのパーツが高さを誤認識していると考えてOKです。
なので、解決のためにはまずどこが誤認識しているかを探し出すことがスタートになります。

私の場合は【 <div class="single-item"> 】にstyle="height:50%;" を加えた所、ドットとの距離が縮まりました。
このクラスはsliderの画像を格納する親になります。

「画像を100%表示にしてるから、何かがきっかけで改行されて下に来てる値がある？」
そう思って80%にしても50%にしても症状は変わらず。
でも、ここで高さを明示すれば調整できる事が解りました。

レスポンシブデザインで画面サイズに合わせて画像サイズは可変するので固定値指定はNG

スマホに合わせれば画像は縮小されるのでPCに合わせた固定値(例えばHeitght:400px)ではスマホの時に大きな空白になります。かといってスマホに合わせればPC表示で画像の全貌が見えない状態に...。

だったら画面サイズに合わせて高さを変えればいいんじゃね？
と言う事で、実装です。

画面サイズに合わせて指定Divの高さを可変させる

■HTML

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
  </head>
  <body>
    <div class="container col-lg-12 col-lg-offset-0">
      <!--<div class="single-item">-->
      <div id="sliders" class="single-item col-lg-12 col-lg-offset-0" style="">
        <div>
          <a href="">
            <img src = "画像1.png" style="width:100%;">
          </a>
        </div>
        <div>
          <a href="">
            <img src = "画像2.png" style="width:100%;">
          </a>
        </div>
        <div>
          <a href="">
            <img src = "画像3.png" style="width:100%;">
          </a>
        </div>
        <div>
          <a href="">
            <img src = "画像4.png" style="width:100%;">
          </a>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
    <script type="text/javascript">
      //読み込み時の表示
      window_load();
      //ウィンドウサイズ変更時に更新
      window.onresize = window_load;
      //サイズの表示
      function window_load() {
        var sW; 
        sW = window.innerWidth;

        //ID：sliderのstyleに height=計算値を書き入れる
        document.getElementById("sliders").style.height = Math.round(sW*0.40); 
      }
    </script>
  </body>
</html>

【 id="sliders" 】を振り当てて、このIDの styleをJSで計算した値に置き換えると言うスクリプトです。

JavaScript内の【sW = window.innerWidth; 】で画面サイズ(横幅)を取得
スライダー用の画像の縦横比は固定しているので、そこから算出した係数 0.4 をsWに乗算。
小数点面倒なので、【 Math.round()】で丸めてstyleに渡してMAXの高さを調整します。

【 style="" 】は本来必要ないのだけど、可変させてるよという目印で書いてあります。
強引なやり方ではあるけど、これでとりあえず見た目は整いました。

まとめ

プログラミングの面白いのは道筋さえ正しければ色んなルートで構築できるところです。

でもこの隙間、他の人は出来てないの？
ググっても明確な答えにたどり着けなかったんだよねぇ...。

＼最新情報をチェック／

“Slickで作ったSliderで画像とdots間の大きな隙間を強引に解決した方法” に対して2件のコメントがあります。

レイより:

2023年10月25日 12:05 AM

同じ状況が出ていて、初心者なものでさっぱりでした！おかげで助かりました

返信
1. akinori より:
  
  2023年12月5日 2:37 PM
  
  コメントありがとうございます。
  私の試行錯誤がお役に立てたのであればありがたいです。
  最近は忙しく仕事をさせていただいており、反応が遅れてしまいましたこと、申し訳ございませんでした。
  
  返信