portfolioと記述されたロゴ

portfolioと記述されたロゴ

- スライダー -

装飾

コーディングスキル一覧

Navigation・Pagination

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="global-container">
    <div id="container">
      <header class="header"></header>
      <main>
        <div id="main-container" class="wrap">
        <div class="swiper">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=1" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=2" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=3" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=4" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=4" alt=""></div>
          </div>
          <!-- If we need pagination -->
          <div class="swiper-pagination"></div>
          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          <!-- If we need scrollbar -->
          <div class="swiper-scrollbar"></div>
        </div>
        </div><!-- /#main-container -->
      </main>
      <div class="footer"></div><!-- /.footer -->
    </div><!-- /#container -->
  </div><!-- /#global-container -->
  <!-- Slider main container -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="./script.js"></script>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.wrap {
  width: 95%;
  margin: 0 auto;
}

#main-container {
  padding: 100px 0;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
次へ
  1. step3

もう少しです。

Javascript

var swiper = new Swiper(".swiper", {
  loop: true,
  centeredSlides: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints: {
    768: {
      slidesPerView: 2.5,
      spaceBetween: 10,
    },
  },
});
次へ
装飾

完成です。

お疲れ様です。

Autoplay progress

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="global-container">
    <div id="container">
      <header class="header"></header>
      <main>
        <div id="main-container" class="wrap">
          <div class="swiper mySwiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=1" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=2" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=3" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=4" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=5" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=6" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=7" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=8" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=9" alt=""></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
            <div class="autoplay-progress">
              <svg viewBox="0 0 48 48">
                <circle cx="24" cy="24" r="20"></circle>
              </svg>
              <span></span>
            </div>
          </div>
        </div><!-- /#main-container -->
      </main>
      <div class="footer">

      </div><!-- /.footer -->
    </div><!-- /#container -->
  </div><!-- /#global-container -->
  <!-- Slider main container -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <script src="./script.js"></script>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.wrap {
  width: 95%;
  margin: 0 auto;
}

#main-container {
  padding: 100px 0;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--swiper-theme-color);
}

.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--swiper-theme-color);
  fill: none;
  stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}
次へ
  1. step3

もう少しです。

Javascript

const progressCircle = document.querySelector(".autoplay-progress svg");
const progressContent = document.querySelector(".autoplay-progress span");
var swiper = new Swiper(".mySwiper", {
  loop: true,
  spaceBetween: 30,
  slidesPerView: 1.5,

  centeredSlides: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  on: {
    autoplayTimeLeft(s, time, progress) {
      progressCircle.style.setProperty("--progress", 1 - progress);
      progressContent.textContent = `${Math.ceil(time / 1000)}s`;
    },
  },
});
次へ
装飾

完成です。

お疲れ様です。

Fade

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="global-container">
    <div id="container">
      <header class="header"></header>
      <main>
        <div id="main-container" class="wrap">
          <div class="swiper mySwiper2">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=1" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=2" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=3" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=4" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=5" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=6" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=7" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=8" alt=""></div>
              <div class="swiper-slide"><img src="https://picsum.photos/1000/500?random=9" alt=""></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>

          </div>
        </div><!-- /#main-container -->
      </main>
      <div class="footer">

      </div><!-- /.footer -->
    </div><!-- /#container -->
  </div><!-- /#global-container -->
  <!-- Slider main container -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="./script.js"></script>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.wrap {
  width: 95%;
  margin: 0 auto;
}

#main-container {
  padding: 100px 0;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
次へ
  1. step3

もう少しです。

Javascript

var swiper = new Swiper(".mySwiper2", {
  loop: true,
  effect: "fade",

  centeredSlides: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

});
次へ
装飾

完成です。

お疲れ様です。

Coverflow

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="global-container">
    <div id="container">
      <header class="header"></header>
      <main>
        <div id="main-container" class="wrap">
          <div class="swiper mySwiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=1" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=2" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=3" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=4" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=5" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=6" />
              </div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>


          </div>
        </div><!-- /#main-container -->
      </main>
      <div class="footer">

      </div><!-- /.footer -->
    </div><!-- /#container -->
  </div><!-- /#global-container -->
  <!-- Slider main container -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <script src="./script.js"></script>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

.wrap {
  width: 95%;
  margin: 0 auto;
}

#main-container {
  padding: 100px 0;
}

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
次へ
  1. step3

もう少しです。

Javascript

var swiper = new Swiper(".mySwiper", {
  loop: true,
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: ".swiper-pagination",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints: {
    768: {
      slidesPerView: 3,
      spaceBetween: 10,
    },

  },
});
次へ
装飾

完成です。

お疲れ様です。

無限ループ

  1. step1

コードをテキストエディタにコピーしましょう

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="global-container">
    <div id="container">
      <header class="header"></header>
      <main>
        <div id="main-container" class="wrap">
          <div class="swiper mySwiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=1" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=2" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=3" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=4" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=5" />
              </div>
              <div class="swiper-slide">
                <img src="https://picsum.photos/1000/500?random=6" />
              </div>
            </div>

          </div>
        </div><!-- /#main-container -->
      </main>
      <div class="footer">

      </div><!-- /.footer -->
    </div><!-- /#container -->
  </div><!-- /#global-container -->
  <!-- Slider main container -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <script src="./script.js"></script>
</body>

</html>
次へ
  1. step2

もう少しです。

CSS

@charset "UTF-8";
/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear;
}

/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}
次へ
  1. step3

もう少しです。

Javascript

const swiper = new Swiper(".swiper", {
  loop: true, // ループ有効
  slidesPerView: 3, // 一度に表示する枚数
  speed: 6000, // ループの時間
  allowTouchMove: false, // スワイプ無効
  autoplay: {
    delay: 0, // 途切れなくループ
  },
});
次へ
装飾

完成です。

お疲れ様です。

©️ Souichi_Kimura All Rights Reserved.