slick.jsスライダーで、画像を中央配置 / 矢印の位置変更をするには?

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 1,617

EXIT

score 17

前提

カルーセルを取り入れようと思っていて、jQueryプラグイン slick を入れています。

問題

① jQueryのslickを動かすまでは、ちゃんと画像が「中央配置」になってたのに、slick動かしたら全部「左寄り」になってしまった。
: → 画像を中央配置にしたい

② slickの矢印(arrows)やドットナビゲーション(dots)の「位置変更」がわからない。
(よく調べても appendArrows:$('') とかがうまく使えない)
: → 位置を変更したい

③ 「windowサイズが変わっても 真ん中を基準に可変する」方法がわからない。
: → 普通に「margin: 0 auto;で中央配置」した時みたいにしたい
: 【この方のJSコードへ代入するには?で代入できれば実装できそうです。JS始めたてで代入の仕方がわかりません。助けてください、、】

全てたくさん調べたり色々やってみましたが、JSプラグインが初めてなこともあり、よくわからなくて複数質問でごめんなさい!

やりたい感じ

こんな感じにしたい

『真ん中の box から ○pxの所に 矢印/ドットナビゲーション』みたいにしたい。
ちなみに box はCSSで書いてる & 各 section の width は統一。

|ー|の幅だけ変わる
= つまりwindowサイズが変わっても、左右の『チラ見せ』幅が変わるだけ

現状

色々おかしい

▼ windowサイズを変えた時 ▼
windowサイズ変えた時

コード

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

<div id="hero">
   <div class="box"></div>
 <div id="carousel">
  <section>
   <img src="http://placehold.jp/180x255.png" alt="1" />
   <h1>タイトル</h1>
   <p>
     説明
   </p>
  </section>

  <section>
   <img src="http://placehold.jp/361x255.png" alt="2" />
   <h1>タイトル</h1>
   <p>
     説明
   </p>
  </section>

  <section>
   <img src="http://placehold.jp/255x255.png" alt="3" />
   <h1>タイトル</h1>
   <p>
     説明
   </p>
  </section>

  <section>
  <img src="http://placehold.jp/180x255.png" alt="4" />
  <h1>タイトル</h1>
  <p>
    説明
  </p>
 </section>

  <section>
  <img src="http://placehold.jp/361x255.png" alt="5" />
  <h1>タイトル</h1>
  <p>
    説明
  </p>
 </section>
 </div>
</div>
$box-size: 430px;
#hero {
  position: relative;
  width: 100%;
  height: $box-size + 40px + 91px + 52px;
  // (boxの高さ+boxの上下の誤差(20+20px)+top+bottom)
  margin: 0 auto;
}
 .box {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: calc(20px + 91px);
  background: #fff;
  width: $box-size;
  height: $box-size;
  box-shadow:
   0 -10px #fff, 0 -20px #000, 10px 0 #fff, 10px -10px #000, 20px 0 #000, 0 10px #fff, 0 20px #000, -10px 0 #fff, -10px 10px #000, -20px 0 #000, -10px -10px #000, 10px 10px #000;
 }

 @mixin hero-p {
   width: 332px;
 }
 @mixin hero-img {
   height: 255px;
 }
 #carousel {
   position: absolute;
   left: 0;
   right: 0;
   margin: auto;
   margin-top: calc(20px + 91px);
   height: $box-size;
   display: flex;
   display: -webkit-flex;
   justify-content: space-around;
   text-align: center;
   z-index: 10;
    h1,p {
      flex: none;
      @include hero-p;
      text-align: left;
    }
    h1 {
      margin-top: 13px;
      margin-bottom: 12px;
      font-size: 15px;
    }
    p {
      font-size: 12px;
      line-height: 17px;
    }
    img {
      @include hero-img;
    }
  }
#hero {
  position: relative;
  width: 100%;
  height: 613px;
  margin: 0 auto; }

.box {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: calc(20px + 91px);
  background: #fff;
  width: 430px;
  height: 430px;
  box-shadow: 0 -10px #fff, 0 -20px #000, 10px 0 #fff, 10px -10px #000, 20px 0 #000, 0 10px #fff, 0 20px #000, -10px 0 #fff, -10px 10px #000, -20px 0 #000, -10px -10px #000, 10px 10px #000; }

#carousel {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: calc(20px + 91px);
  height: 430px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  text-align: center;
  z-index: 10; }
  #carousel h1, #carousel p {
    flex: none;
    width: 332px;
    text-align: left; }
  #carousel h1 {
    margin-top: 13px;
    margin-bottom: 12px;
    font-size: 15px; }
  #carousel p {
    font-size: 12px;
    line-height: 17px; }
  #carousel img {
    height: 255px; }
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
 <script type="text/javascript" src="slick/slick.min.js"></script>

 <script type="text/javascript">
  $(document).ready(function(){
    $('#carousel').slick({

      // slidesToShow: 1,
      // centerPadding: '332px',
      // centerMode: true,
      // // センターモード時

      slidesToShow: 3,
      slideToScroll: 1,
      focusOnSelect: true,
      pauseOnFocus: false,
      infinite: true,
      autoplay: true,
      autoplaySpeed: 5000,
      dots: true,
      // appendArrows: $('.pxArrow'),
    // appendArrows読み込むと、矢印が消えてしまうので今はコメントにしてます…
      // appendDots: $(.pxDot),
      prevArrow: '<img src="img/Lpx.svg" alt="prev" class="Lpx" />',
      nextArrow: '<img src="img/Rpx.svg" alt="next" class="Rpx" />',

      responsive: [   //例
      { breakpoint: 1024,     // 600〜1023px
        settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      }},
     { breakpoint: 600,      // 480〜599px
       settings: {
       slidesToShow: 2,
       slidesToScroll: 1,
       infinite: true,
      }},
     { breakpoint: 480,      // 〜479px
       settings: {
       slidesToShow: 1,
       slidesToScroll: 1,
       infinite: true,
      }}
    ],
    });
  });
 </script>
/* slick.scss (後ろの方は自分でカスタマイズしてます)*/

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
.slick-arrow.slick-hidden {
    display: none;
}

// ▼ ここからカスタム ▼

// .pxArrow {
//   position: absolute;
//   top: 50%;
// }

$pxarrowsize: 13px;
$pxarrowgap: -31px;
.Lpx {
  width: $pxarrowsize;
  left: $pxarrowgap;
  z-index: 10;
}
.Rpx {
  width: $pxarrowsize;
  right: $pxarrowgap;
  z-index: 10;
}

// .pxDot {
//
// }

どうすれば ①画像の中央配置や ②矢印/ドットナビゲーションの位置が変更できますか…?
どうぞよろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yu-smc

    2019/02/14 13:00

    課題①〜③ともに、JSではなくslick-theme.cssのカスタマイズの問題かと思うのですが、
    cssに関して試した事はありますか?

    キャンセル

  • EXIT

    2019/02/14 20:16

    >>yu-smcさん
    slick-theme.cssは使ってなくて(入れてない)、
    ①:slickは元々画像のみをカルーセルにするやつで、slick.cssも触ろうにも 2つの要素(画像と文)を別々に効果入れて、まとめる(ドットナビゲーションは画像と文で1つにする)方法が分からなくて詰
    ②:( https://jsfiddle.net/aox1cb4y/11/ )も参考にして、この矢印が真ん中の要素の外側ver.にしたいけど、計算がどうなってるのか分からなくて詰
    です。
    プログラミング触りたてで、自分の知識(リファレンス見て試したりググりまくりましたが)や頭が足りてなく質問した次第です。

    キャンセル

回答 1

checkベストアンサー

+2

①画像の中央配置ですが、例示コードを取り込んで以下のCSSを追加したところ動作しましたがどうでしょうか。

//slick.css
.slick-slide img {
    margin: 0 auto;
}

②CSSでposition: absoluteを使って調整可能かと思います。

③slickにcenterModeというオプションがありますがそれとは違いますかね?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/15 14:00 編集

    それか〜!できました、ありがとうございます!!
    ②は、( https://www.puzzle-web.jp/archive/1240/ )を参考にして位置調整することができました^ - ^
    やっぱりslick-theme.css入れた方がやりやすかったです。笑
    ③ はい、centerModeにしても▼windowサイズ変えた時▼の画像と一緒になります。
    もしよければ( https://teratail.com/questions/173809 )の「JSの1200px → 300px ver.に変える方法」も教えていただけるととてもありがたいです…!(質問で、ここで実装できそうですと書いた場所と同じです)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる