<header class="header">
  <h1>PENGIN BLOG</h1>
  <nav>
    <ul class="menu-group">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </nav>
</header>

<div class="container fade">
  <img src="https://images.unsplash.com/photo-1658937301378-8a3e7cd5db57?ixlib=rb-1.2.1&ixid=1DqoBtc_edF_9Ni1JCVNpJKD6hGrPh0sO" alt="" />
</div>
<div class="container fade">スクロールしてね</div>
<div class="sample1 splide" aria-label="動き続けるループスライダー" data-aos="fade-up">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658901742238-08b63f05e7f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1818&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658937301378-8a3e7cd5db57?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658847133295-1693456b858c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658784566751-95382f065d71?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1659039807594-358e61bdfb5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1642320009030-ff80041e25ed?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1829&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658901097742-98954bfd9b4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1782&q=80" />
      </li>
    </ul>
  </div>
</div>
<div class="container fade">動き続けるループスライダーが表示されたよ！</div>
<div class="splide sample2" data-aos="fade-up" aria-label="Splideの基本的なHTML">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658901742238-08b63f05e7f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1818&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658937301378-8a3e7cd5db57?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
      </li>
      <li class="splide__slide">
        <img src="https://images.unsplash.com/photo-1658847133295-1693456b858c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80" />
      </li>
    </ul>
  </div>
</div>

<div class="container fade">スライダーがふわっと表示されたよ！</div>

@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap");

* {
  box-sizing: border-box;
  font-family: "Arial", "Zen Maru Gothic", sans-serif;
}
body,
h1,
ul,
p {
  margin: 0;
  padding: 0;
  color: #212121;
}

h1 {
  font-size: clamp(20px, 4vw, 40px);
}

a {
  text-decoration: none;
  color: #212121;
  font-size: clamp(14px, 3vw, 24px);
}

.header {
  display: flex;
  justify-content: space-between;
  z-index: 100;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  padding: max(16px, 2vw);
  font-size: 24px;
}

.menu-group {
  display: flex;
  height: 100%;
  list-style: none;
  align-items: center;
  gap: 1.5em;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container {
  margin: 0 auto;
  width: 100%;
  min-height: 300px;
  height: auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
}
.container img {
  width: 100%;
  height: auto;
}

.item {
  margin: 15px;
  padding: 5px;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #000;
  color: #fefefe;
  font-size: 0.2em;
}

// --------------------
// splideここから
const options1 = {
  mediaQuery: "min",
  fixedWidth: "24rem",
  heightRatio: 0.5,
  gap: 16,
  type: "loop",
  arrows: false,
  drag: "free",
  flickPower: 100,
  pagination: false,

  autoScroll: {
    speed: 0.5,
    pauseOnHover: false,
    pauseOnFocus: true
  },
  breakpoints: {
    1025: {
      gap: 24,
      fixedWidth: "36rem"
    }
  }
};

const options2 = {
  cover: true,
  heightRatio: 0.5
};
const splide1 = new Splide(".sample1", options1);

splide1.mount(window.splide.Extensions);

const splide2 = new Splide(".sample2", options2);
splide2.mount();
// splideここまで
// --------------------

// AOS.js
AOS.init();