HTMLとCSSとJSのコピペでできるカルーセル・スライダーのデザイン3種_その2

カルーセル・スライダーのアイキャッチ

カルーセルは、画像などの複数の項目をスライドさせることで、メインで表示する項目を切り替えることができる仕組みで、限られたスペースで展開するのに便利なUIです。

カルーセルのイラスト カルーセルの基本的な使い方とデザイン

今回は、HTMLとCSSとJSのコピペでできるカルーセル・スライダーのデザイン3種_その2についてご紹介します。

画像とちょっとしたタイトル付きのカルーセル・スライダー

各スライドに画像とタイトルを表示して、左上にナンバーを表示させるカルーセル・スライダーです。

slide-01
slide-02
slide-03
slide-04


htmlのslide-001 のclassが1つのスライドのセットなので、まるっとコピペをして書き換えれば、任意で簡単にスライドを追加することができます。

このカルーセル・スライダーはjsを使用しています。

JSの読み込みはbodyのクロージングの前に<script>〜</script>で書くか、header の外部ファイルの場合、deferオプションを使って記述しましょう。

コードを表示する

HTML

<div class="slider-001">

  <div class="slide-001">
    <div class="slide-content-001"><img src="https://dubdesign.net/wp-content/uploads/2020/12/googleoptimaze_eyecatch-520x300.jpg"></div>
    <div class="slide-caption-001">slide-01</div>
  </div>

  <div class="slide-001">
    <div class="slide-content-001"><img src="https://dubdesign.net/wp-content/uploads/2020/12/afcimage_eyecatch.jpg"></div>
    <div class="slide-caption-001">slide-02</div>
  </div>

  <div class="slide-001">
    <div class="slide-content-001"><img src="https://dubdesign.net/wp-content/uploads/2020/12/googleanaly_eyecatch-520x300.jpg"></div>
    <div class="slide-caption-001">slide-03</div>
  </div>

  <div class="slide-001">
    <div class="slide-content-001"><img src="https://dubdesign.net/wp-content/uploads/2020/12/googleanaly_eyecatch-520x300.jpg"></div>
    <div class="slide-caption-001">slide-04</div>
  </div>

</div>

CSS

/*スライダー001*/
.slider-001 {
  width: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  border-radius: 6px;
}

.slide-001 {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  top: 0;
  left: 0;
  transition: all 0.6s ease-in-out;
}

.slide-content-001 {
  width: 100%;
  height: 400px;
  background-color: #c8e4ff;
}

.slide-content-001 img {
  width:100%;
  object-fit: cover;
  height: 100%;
}

.prev-001,
.next-001 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  height: 65px;
  padding: 16px;
  margin-top: -28px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.2s ease;
  border-radius: 0 4px 4px 0;
  user-select: none;
}

.next-001 {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.prev-001:hover,
.next-001:hover {
  background-color: rgba(107, 182, 255, 0.8);
}

.slide-caption-001 {
  color: white;
  font-size: 15px;
  padding: 0;
  position: absolute;
  bottom: 31px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 16px;
  position: absolute;
  top: 0;
}

.dots {
  height: 15px;
  padding: 0;
  position: absolute;
  bottom: 22px;
  width: 100%;
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 10px 4px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.2s ease;
}

.dot:hover {
  background-color: rgba(107, 182, 255, 0.8);
}

JS

<script>
const sliders = document.querySelectorAll(".slider-001");

sliders.forEach((slider, cont_slider) => {
  let slideIndex = 1;
  let slides = slider.querySelectorAll(".slide-001");
  let prev = document.createElement("span");
  prev.classList.add("prev-001");
  prev.innerHTML = "&#10094;";
  slider.append(prev);
  let next = document.createElement("span");
  next.classList.add("next-001");
  next.innerHTML = "&#10095;";
  slider.append(next);

  let dots = document.createElement("div");
  dots.classList.add("dots");
  slider.append(dots);

  slides.forEach((slide, cont_slide) => {
    let dot = document.createElement("span");
    dot.classList.add("dot");
    dots.append(dot);
    dot.addEventListener("click", (e) => {
      slideIndex = cont_slide + 1;
      slides.forEach((slide, cont_slide) => {
        slide.style = "left: -" + (slideIndex - 1) * 100 + "%;";
      });
    });

    let numberText = document.createElement("div");
    numberText.classList.add("numbertext");
    numberText.innerText = cont_slide + 1 + "/" + slides.length;
    slide.insertAdjacentElement("afterbegin", numberText);
  });

  next.addEventListener("click", (e) => {
    slideIndex == slides.length ? (slideIndex = 1) : slideIndex++;
    slides.forEach((slide, cont_slide) => {
      slide.style = "left: -" + (slideIndex - 1) * 100 + "%;";
    });
  });

  prev.addEventListener("click", (e) => {
    slideIndex == 1 ? (slideIndex = slides.length) : slideIndex--;
    slides.forEach((slide, cont_slide) => {
      slide.style = "left: -" + (slideIndex - 1) * 100 + "%;";
    });
  });
});
</script>

バックグラウンドで画像を表示するカルーセル・スライダー

背景に5つの画像を指定して、画像のみ横に流れていくカルーセル・スライダーです。

カルーセル

ダミーテキストダミーテキストダミーテキスト


背景で流す画像はbackgroudで指定しているので、書き換えることで表示の画像を変更できます。

コードを表示する

HTML

<div class="css-slider">
  <p class="title">カルーセル</p>
  <p class="lead">ダミーテキストダミーテキストダミーテキスト</p>
</div>

CSS

/*スライダー002*/
.css-slider .title {
    font-size: 3rem;
    color: #fff;
    text-align: center;
    margin-bottom: 0.8em;
}

.css-slider .lead {
   font-size: 1.2rem;
   color: #fff;
   text-align: center;
   margin-bottom: 2.8em;
}

.css-slider {
  overflow: hidden;
  padding: 7% 0 0%;
  position: relative;
  z-index:1;
}
.css-slider:before,
.css-slider:after {
   content: "";
   z-index: -1;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
}
.css-slider:before {
  width: 500%; /* (n+1)*100% */
  background: url(https://dubdesign.net/wp-content/uploads/2020/12/afcimage_eyecatch-520x300.jpg) no-repeat,  url(https://dubdesign.net/wp-content/uploads/2020/12/afcimage_eyecatch-520x300.jpg) no-repeat,  url(https://dubdesign.net/wp-content/uploads/2020/12/afcimage_eyecatch-520x300.jpg) no-repeat,
     url(https://dubdesign.net/wp-content/uploads/2020/12/afcimage_eyecatch-520x300.jpg) repeat-x;
  background-position: 75% top, 50% top, 25% top, 0% top; /* (n-1)/n*100%, (n-2)/n*100% ... 0% */
  background-size:  20% auto; /* 100/(n+1)% */
  animation: slide 20s ease-in-out  infinite;
}
.css-slider:after {
  right: 0;
  background:rgba(0, 0, 0, .25);
}
@keyframes slide {
  0%, 20% {
    transform: translate3d(0,0,0);
  }
  25%, 45% {
    transform: translate3d(-20%,0,0);
     /* -1/n+1 * 100% */
  }
  50%, 70% {
    transform: translate3d(-40%,0,0);
  }
  75%, 95% {
    transform: translate3d(-60%,0,0);   
  }
  100% {
    transform: translate3d(-80%,0,0);
    /* -n/n+1 * 100% */
    animation-timing-function: steps(1, end);
  }
}
.title:after {
  content: "";
  display: block;
  width: 48px;
  height: 0;
  margin: 24px auto 0;
  border-bottom: 2px solid;  
}

画像ギャラリーのカルーセル・スライダー

通販サイトなどに使えそうな画像ギャラリー型のカルーセル・スライダーです。

タイトルとテキスト部分は固定で、写真の部分をページネイションで切り替えすることができます。

ここにタイトル

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

このカルーセル・スライダーはjsを使用しています。

JSの読み込みはbodyのクロージングの前に<script>〜</script>で書くか、header の外部ファイルの場合、deferオプションを使って記述しましょう。

コードを表示する

HTML

<div class="product-slider-wrap">

  <div class="slider" id="ns-slider1">

    <div style="background-image:url(https://dubdesign.net/wp-content/uploads/2020/12/dropdown_eyecatch.jpg)"></div>
    <div style="background-image:url(https://dubdesign.net/wp-content/uploads/2020/12/include_eyecatch.jpg)"></div>
    <div style="background-image:url(https://dubdesign.net/wp-content/uploads/2020/12/timedate_eyecatch.jpg)"></div>

    <i class="left" class="arrows" style="z-index:2; position:absolute;">
      <svg viewBox="0 0 100 100">
        <path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z"></path>
      </svg>
    </i>
    <i class="right" class="arrows" style="z-index:2; position:absolute;">
      <svg viewBox="0 0 100 100">
        <path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path>
      </svg>
    </i>

  </div>

  <div class="slider-text-wrap">
    <div class="slider-text">
      <h3>ここにタイトル</h3>
      <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
  </div>

</div>

CSS

/*スライダー003*/
.slider,
.slider > div {
  /* Images default to Center Center. Maybe try 'center top'? */
  background-position: center center;
  display: block;
  width: 100%;
  height: 500px;
  /* height: 100vh; */ /* If you want fullscreen */
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
  overflow: hidden;
  -moz-transition: transform 0.4s;
  -o-transition: transform 0.4s;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}

.slider > div {
  position: absolute;
}

.slider > i {
  color: #5bbd72;
  position: absolute;
  font-size: 60px;
  margin: 20px;
  top: 40%;
  text-shadow: 0 10px 2px #223422;
  transition: 0.3s;
  width: 30px;
  padding: 10px 13px;
  background: #fff;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  line-height: 0;
  box-sizing: content-box;
  border-radius: 3px;
  z-index: 4;
}

.slider > i svg {
  margin-top: 3px;
}

.slider > .left {
  left: -100px;
}
.slider > .right {
  right: -100px;
}
.slider:hover > .left {
  left: 0;
}
.slider:hover > .right {
  right: 0;
}

.slider > i:hover {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(-2px);
}

.slider > i.right:hover {
  transform: translateX(2px);
}

.slider > i.right:active,
.slider > i.left:active {
  transform: translateY(1px);
}

.slider:hover > div {
  transform: scale(1.01);
}

.hoverZoomOff:hover > div {
  transform: scale(1);
}

.slider > ul {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 4;
  padding: 0;
  margin: 0;
  transform: translateX(-50%);
  border: none;
}

.slider > ul > li {
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  list-style: none;
  float: left;
  margin: 10px 10px 0;
  cursor: pointer;
  border: 1px solid #fff;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.slider > ul > .showli {
  background-color: #7ec03d;
  -moz-animation: boing 0.5s forwards;
  -o-animation: boing 0.5s forwards;
  -webkit-animation: boing 0.5s forwards;
  animation: boing 0.5s forwards;
}

.slider > ul > li:hover {
  background-color: #7ec03d;
}

.slider > .show {
  z-index: 1;
}

.hideDots > ul {
  display: none;
}

.showArrows > .left {
  left: 0;
}

.showArrows > .right {
  right: 0;
}

.titleBar {
  z-index: 2;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translateY(100%);
  padding: 20px 30px;
  transition: 0.3s;
  color: #fff;
}

.titleBar * {
  transform: translate(-20px, 30px);
  transition: all 700ms cubic-bezier(0.37, 0.31, 0.2, 0.85) 200ms;
  opacity: 0;
}

.titleBarTop .titleBar * {
  transform: translate(-20px, -30px);
}

.slider:hover .titleBar,
.slider:hover .titleBar * {
  transform: translate(0);
  opacity: 1;
}

.titleBarTop .titleBar {
  top: 0;
  bottom: initial;
  transform: translateY(-100%);
}

.slider > div span {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  color: #fff;
  text-align: center;
  padding: 0;
  width: 100%;
}

@keyframes boing {
  0% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* -------------------------------------- */

#ns-slider1 {
  min-width: 60%;
}
.slider-text {
  min-width: 35%;
  padding-left: 20px;
}
.product-slider-wrap {
  display: flex;
}

.slider-text-wrap .slider-text h3 {
    margin: 0 0 20px;
}

JS

(function ($) {
  "use strict";
  $.fn.sliderResponsive = function (settings) {
    var set = $.extend(
      {
        slidePause: 5000,
        fadeSpeed: 800,
        autoPlay: "on",
        showArrows: "off",
        hideDots: "off",
        hoverZoom: "on",
        titleBarTop: "off"
      },
      settings
    );

    var $slider = $(this);
    var size = $slider.find("> div").length; //number of slides
    var position = 0; // current position of carousal
    var sliderIntervalID; // used to clear autoplay

    // Add a Dot for each slide
    $slider.append("<ul></ul>");
    $slider.find("> div").each(function () {
      $slider.find("> ul").append("<li></li>");
    });

    // Put .show on the first Slide
    $slider.find("div:first-of-type").addClass("show");

    // Put .showLi on the first dot
    $slider.find("li:first-of-type").addClass("showli");

    //fadeout all items except .show
    $slider.find("> div").not(".show").fadeOut();

    // If Autoplay is set to 'on' than start it
    if (set.autoPlay === "on") {
      startSlider();
    }

    // If showarrows is set to 'on' then don't hide them
    if (set.showArrows === "on") {
      $slider.addClass("showArrows");
    }

    // If hideDots is set to 'on' then hide them
    if (set.hideDots === "on") {
      $slider.addClass("hideDots");
    }

    // If hoverZoom is set to 'off' then stop it
    if (set.hoverZoom === "off") {
      $slider.addClass("hoverZoomOff");
    }

    // If titleBarTop is set to 'on' then move it up
    if (set.titleBarTop === "on") {
      $slider.addClass("titleBarTop");
    }

    // function to start auto play
    function startSlider() {
      sliderIntervalID = setInterval(function () {
        nextSlide();
      }, set.slidePause);
    }

    // on mouseover stop the autoplay
    $slider.mouseover(function () {
      if (set.autoPlay === "on") {
        clearInterval(sliderIntervalID);
      }
    });

    // on mouseout starts the autoplay
    $slider.mouseout(function () {
      if (set.autoPlay === "on") {
        startSlider();
      }
    });

    //on right arrow click
    $slider.find("> .right").click(nextSlide);

    //on left arrow click
    $slider.find("> .left").click(prevSlide);

    // Go to next slide
    function nextSlide() {
      position = $slider.find(".show").index() + 1;
      if (position > size - 1) position = 0;
      changeCarousel(position);
    }

    // Go to previous slide
    function prevSlide() {
      position = $slider.find(".show").index() - 1;
      if (position < 0) position = size - 1;
      changeCarousel(position);
    }

    //when user clicks slider button
    $slider.find(" > ul > li").click(function () {
      position = $(this).index();
      changeCarousel($(this).index());
    });

    //this changes the image and button selection
    function changeCarousel() {
      $slider.find(".show").removeClass("show").fadeOut();
      $slider.find("> div").eq(position).fadeIn(set.fadeSpeed).addClass("show");
      // The Dots
      $slider.find("> ul").find(".showli").removeClass("showli");
      $slider.find("> ul > li").eq(position).addClass("showli");
    }

    return $slider;
  };
})(jQuery);

//////////////////////////////////////////////
// Activate each slider - change options
//////////////////////////////////////////////
$(document).ready(function () {
  $("#ns-slider1").sliderResponsive({
    fadeSpeed: 300,
    autoPlay: "off",
    showArrows: "on",
    hideDots: "off"
  });
});

その他のカルーセル・スライダー

その他のカルーセル・スライダーのデザインが以下にあります。

主にjsを使わずに、HTMLとCSSだけなのでコピペも簡単なので、よかったらご覧ください。

スライダー・カルーセルのイラスト HTMLとCSSのコピペでできるカルーセル・スライダーのデザイン2種