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

/*スライダー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);
}

<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>

/*スライダー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;  
}

/*スライダー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;
}

(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"
  });
});