WEBデザインの勉強

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

カルーセルスライダー

f:id:mmmmofu:20170627220143p:plain

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カルーセルスライダー</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="carousel01_wrap">
    <div class="carousel01_inner">
      <ul class="carousel01">
        <li class="carousel01__item"><img src="img/ph01.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph02.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph03.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph04.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph05.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph06.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph07.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph08.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph09.jpg" alt=""></li>
        <li class="carousel01__item"><img src="img/ph10.jpg" alt=""></li>
      </ul>
    </div>
  </div>
  <div class="carousel02_wrap">
    <div class="carousel02_inner">
      <ul class="carousel02">
        <li class="carousel02__item"><img src="img/ph01.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph02.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph03.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph04.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph05.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph06.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph07.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph08.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph09.jpg" alt=""></li>
        <li class="carousel02__item"><img src="img/ph10.jpg" alt=""></li>
      </ul>
    </div>
  </div>
</body>
</html>
@charset "utf-8";

img {
  vertical-align: bottom;
}

body {
  width: 100%;
  overflow: hidden;
  background: #f2f2f2;
}

.carousel01_wrap {
  position: relative;
  top: 0;
  left: -10%;
  width: 120%;
  height: 200px;
  margin: 100px 0;
  padding: 20px 0;
  background: #FFF;
  transform: rotate(-5deg);
  overflow: hidden;
  -moz-box-shadow:0px 0px 6px 3px #d9d9d9;
  -webkit-box-shadow:0px 0px 6px 3px #d9d9d9;
  box-shadow:0px 0px 6px 3px #d9d9d9;
}

.carousel01_inner {
  position: relative;
  top: 0;
  left: 0;
  letter-spacing: -0.4em;
  -webkit-animation: carousel01 30s linear infinite;
  animation: carousel01 30s linear infinite;
}

.carousel01, .carousel02 {
  display: inline-block;
  letter-spacing: -0.4em;
  vertical-align: top;
}

.carousel01 .carousel01__item, .carousel02 .carousel02__item {
  display: inline-block;
  vertical-align: top;
}

-webkit-keyframes carousel01 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-3400px);
    transform: translateX(-3400px);
  }
}

@keyframes carousel01 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-3400px);
    transform: translateX(-3400px);
  }
}

.carousel02_wrap {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  margin: 100px 0;
  padding: 20px 0;
  background: #FFF;
  overflow: hidden;
  -moz-box-shadow:0px 0px 6px 3px #d9d9d9;
  -webkit-box-shadow:0px 0px 6px 3px #d9d9d9;
  box-shadow:0px 0px 6px 3px #d9d9d9;
}

.carousel02_inner {
  position: relative;
  top: 0;
  left: 0;
  letter-spacing: -0.4em;
}
$(function(){
  var slideElm = $('.carousel01_inner');
  var slideUl = $('.carousel01_inner .carousel01');
  var slideLi = $('.carousel01_inner .carousel01 .carousel01__item');
  var slideNum = slideLi.length;
  var slideLi_width = $('.carousel01_inner .carousel01 .carousel01__item img').width();
  slideUl.clone().appendTo(slideElm);
  $(slideUl).css({'width': slideLi_width * slideNum});
  $(slideElm).css({'width': slideUl.width() * 2});

  var slideElm2 = $('.carousel02_inner');
  var slideUl2 = $('.carousel02_inner .carousel02');
  var slideLi2 = $('.carousel02_inner .carousel02 .carousel02__item');
  var slideNum2 = slideLi2.length;
  var slideLi_width2 = $('.carousel02_inner .carousel02 .carousel02__item img').width();

  slideUl2.clone().appendTo(slideElm2);
  $(slideUl2).css({'width': slideLi_width2 * slideNum2});
  $(slideElm2).css({'width': slideUl2.width() * 2});

  $('#carousel').each(function(){

  });


});