WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

スライダーjQueryプラグイン slick

f:id:mmmmofu:20170320215720p:plain

http://efu.sakura.ne.jp/web/slick/

公式サイト
kenwheeler.github.io

ドットのページャーの横にPREV,NEXT(枚数が変化しても対応)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>slick</title>
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/slick-theme.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="slide_wrap">
    <div class="slider">
      <div class="slide__item"><img src="img/ph01.jpg" alt=""></div>
      <div class="slide__item"><img src="img/ph02.jpg" alt=""></div>
      <div class="slide__item"><img src="img/ph03.jpg" alt=""></div>
    </div>
    <div id="control">
      <div id="conrol_inner"></div>
    </div>
  </div>
</body>
</html>
*:focus {
  outline: none;
}
.slide_wrap {
  position: relative;
  width: 740px;
  margin: 50px auto 0;
}

.slider {
  width: 740px;
}

#control {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
}
#conrol_inner {
  position: relative;
  display: inline-block;
}

.slick-prev {
  right: 100%;
  margin-right: 10px;
}
.slick-next {
  left: 100%;
  margin-left: 10px;
}

.slick-dots {
  position: static;
}

.slick-dots li {
  vertical-align: top;
}
$(function(){
  $('.slider').slick({
    autoplay: true,
    dots: true,
    appendArrows: '#conrol_inner',
    appendDots: '#conrol_inner',
  });
});

#conrol_innerをinline-blockしposition:relativeで基準にする。
PREV,NEXTをposition:absolute;で左右に100%する。

centermodeで3枚スライダーを作成し、幅を固定

f:id:mmmmofu:20170320225359p:plain

http://efu.sakura.ne.jp/web/slick2/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>slick</title>
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/slick-theme.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/script.js"></script>
</head>
<div class="slide_wrap">
  <div class="slider">
    <div class="slide__item"><img src="img/ph01.jpg" alt=""></div>
    <div class="slide__item"><img src="img/ph02.jpg" alt=""></div>
    <div class="slide__item"><img src="img/ph03.jpg" alt=""></div>
  </div>
  <div class="pager"></div>
</div>
</body>
</html>
*:focus {
  outline: none;
}
.slide_wrap {
  position: relative;
}

.slider {
  position: relative;
  margin-top: 50px;
}

.slide__item {
  width: 750px;
}
$(function(){
  $('.slider').slick({
    autoplay: true,
    centerMode: true,
    variableWidth: true,
    appendArrows: '.pager',
  });
});

variableWidth: true(可変幅)にし、スライドの横幅(この場合slide__item)をCSSで設定