<main>
  <ul class='slider'>
    <li class='item' style="background-image: url('https://www.zastavki.com/pictures/originals/2014/World___Australia_Whitehaven_Beach_in_Australia_060422_.jpg')">
      <div class='content'>
        <h2 class='title'>Whitehaven Beach, Australia</h2>
        <p class='description'>Located on Whitsunday Island, Whitehaven Beach is famous for its stunning white silica sand and turquoise waters. It's a perfect spot for swimming, sunbathing, and enjoying the natural beauty of the Great Barrier Reef.</p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://turksandcaicostourism.com/wp-content/uploads/2021/03/grace-bay-beach-turks-caicos-islands.jpg')">
      <div class='content'>
        <h2 class='title'>Grace Bay, Turks and Caicos</h2>
        <p class='description'>Grace Bay is known for its calm, clear waters and powdery white sand. This beach is ideal for snorkeling, diving, and enjoying luxury resorts that line its shore.</p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://edition.cnn.com/interactive/travel/best-beaches/baia-do-sancho/images/photo2.jpg')">
      <div class='content'>
        <h2 class='title'>Baia do Sancho, Brazil</h2>
        <p class='description'>Baia do Sancho, located on Fernando de Noronha island, offers stunning cliffs, vibrant marine life, and crystal-clear waters, making it a paradise for divers and nature lovers.</p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://wedding.beleon.com/media/8899-beleontoursgreeceweddingzakynthosbeachnavagio05.jpg')">
      <div class='content'>
        <h2 class='title'>Navagio Beach, Greece</h2>
        <p class='description'>
          Also known as Shipwreck Beach, Navagio Beach is famous for the rusting shipwreck that rests on its sands. Accessible only by boat, this secluded cove is surrounded by towering cliffs and azure waters.
        </p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://travel.usnews.com/images/playa_paraiso_MrXjJaO.jpg')">
      <div class='content'>
        <h2 class='title'>Playa Paraiso, Mexico</h2>
        <p class='description'>Playa Paraiso, located in Tulum, offers pristine white sands and turquoise waters against the backdrop of ancient Mayan ruins. It's a perfect blend of history and natural beauty.
        </p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://images.locationscout.net/2021/09/anse-source-dargent-seychelles-12eo.jpg')">
      <div class='content'>
        <h2 class='title'>Anse Source d'Argent, Seychelles</h2>
        <p class='description'>Anse Source d'Argent is renowned for its unique granite boulders, shallow clear waters, and soft white sand. This beach is perfect for photography, snorkeling, and relaxation.</p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://ik.imgkit.net/3vlqs5axxjf/external/http://images.ntmllc.com/v4/destination/Cayman-Islands/Seven-Mile-Beach/5683420_SCN_Seven-Mile-Beach_iStock24011818_ZCFE39.jpg?tr=w-1200%2Cfo-auto')">
      <div class='content'>
        <h2 class='title'>Seven Mile Beach, Cayman Islands</h2>
        <p class='description'>Stretching for seven miles, this beach offers soft coral sand, clear waters, and numerous activities such as snorkeling, paddleboarding, and enjoying beachside restaurants and bars.</p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://media.shermanstravel.com/cruises/thumb/larger/7631_istock_21340242_large-jpg.jpg')">
      <div class='content'>
        <h2 class='title'>Bora Bora, French Polynesia</h2>
        <p class='description'>Bora Bora is known for its stunning lagoon, overwater bungalows, and vibrant coral reefs. It's a perfect destination for honeymooners and those seeking luxury and tranquility.</p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://wpcdn.us-east-1.vip.tn-cloud.net/www.hawaiimagazine.com/content/uploads/2022/10/h/s/20221018-lanikaiparking-ctf-gettyimages-509805766-1024x683.jpg')">
      <div class='content'>
        <h2 class='title'>Lanikai Beach, Hawaii</h2>
        <p class='description'>Lanikai Beach features powdery white sand and calm, clear waters, making it a favorite for swimming, kayaking, and enjoying the scenic views of the Mokulua Islands.</p>
      </div>
    </li>
    <li class='item' style="background-image: url('https://hf-s3.hotelfriend.com/pages/288/pink-sands-beach-harbour-island-bahamas-90971.jpg')">
      <div class='content'>
        <h2 class='title'>Pink Sands Beach, Bahamas</h2>
        <p class='description'>Pink Sands Beach is famous for its unique pink-hued sand, clear waters, and serene atmosphere. It's an idyllic spot for beachcombing, swimming, and relaxing in paradise.</p>
      </div>
    </li>
  </ul>
  <nav class='nav'>
    <ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
    <ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
  </nav>
</main>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.item {
  width: 200px;
  height: 300px;
  list-style-type: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
  transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

  &:nth-child(1), &:nth-child(2) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
  }

  &:nth-child(3) { left: 50%; }
  &:nth-child(4) { left: calc(50% + 220px); }
  &:nth-child(5) { left: calc(50% + 440px); }
  &:nth-child(6) { left: calc(50% + 660px); }
  &:nth-child(7) { left: calc(50% + 880px); opacity: 0; }
  &:nth-child(8) { left: calc(50% + 1100px); opacity: 0; }
  &:nth-child(9) { left: calc(50% + 1320px); opacity: 0; }
  &:nth-child(10) { left: calc(50% + 1540px); opacity: 0; }
}

.content {
  width: min(30vw,400px);
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
  font: 400 0.85rem helvetica,sans-serif;
  color: white;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  opacity: 0;
  display: none;
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.8);

  & .title {
    font-family: 'arial-black';
    text-transform: uppercase;
  }

  & .description {
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
    font-size: 0.8rem;
  }

  & button {
    width: fit-content;
    background-color: rgba(0,0,0,0.1);
    color: white;
    border: 2px solid white;
    border-radius: 0.25rem;
    padding: 0.75rem;
    cursor: pointer;
  }
}

.item:nth-of-type(2) .content {
  display: block;
  animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(-50% + 75px));
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;

  & .btn {
    background-color: rgba(255,255,255,0.5);
    color: rgba(0,0,0,0.7);
    border: 2px solid rgba(0,0,0,0.6);
    margin: 0 0.25rem;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgba(255,255,255,0.3);
    }
  }
}

@media (width > 650px) and (width < 900px) {
  .content {
    & .title        { font-size: 1rem; }
    & .description  { font-size: 0.7rem; }
    & button        { font-size: 0.7rem; }
  }
  .item {
    width: 160px;
    height: 270px;

    &:nth-child(3) { left: 50%; }
    &:nth-child(4) { left: calc(50% + 170px); }
    &:nth-child(5) { left: calc(50% + 340px); }
    &:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
    &:nth-child(7) { left: calc(50% + 680px); opacity: 0; }
    &:nth-child(8) { left: calc(50% + 850px); opacity: 0; }
    &:nth-child(9) { left: calc(50% + 1020px); opacity: 0; }
    &:nth-child(9) { left: calc(50% + 1190px); opacity: 0; }
  }
}

@media (width < 650px) {
  .content {
    & .title        { font-size: 0.9rem; }
    & .description  { font-size: 0.65rem; }
    & button        { font-size: 0.7rem; }
  }
  .item {
    width: 130px;
    height: 220px;

    &:nth-child(3) { left: 50%; }
    &:nth-child(4) { left: calc(50% + 140px); }
    &:nth-child(5) { left: calc(50% + 280px); }
    &:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
    &:nth-child(7) { left: calc(50% + 560px); opacity: 0; }
    &:nth-child(8) { left: calc(50% + 700px); opacity: 0; }
    &:nth-child(9) { left: calc(50% + 840px); opacity: 0; }
    &:nth-child(10) { left: calc(50% + 980px); opacity: 0; }
  }
}
const slider = document.querySelector('.slider');

function activate(e) {
  const items = document.querySelectorAll('.item');
  e.target.matches('.next') && slider.append(items[0])
  e.target.matches('.prev') && slider.prepend(items[items.length-1]);
}

document.addEventListener('click',activate,false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.