바로가기 버튼이 있는 이미지 슬라이드 만들기

부트 스트랩을 사용해서 바로가기 버튼이 있는 슬아이드 만들기

가끔 홈페이지 보면 첫 화면에 이미지 3~5개가 순서대로 슬라이드 되면서 예쁘게 나오는 부분이 있다. 거기에 바로가기 버튼 까지 있으면 그럴 싸한 웹페이지 메인 화면이 될 것 같아서 만들어 봤다.

이미지 출처는 나무 위키의 청설 포스터이다.

예재 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>slide with bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://1번이미지.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
        <span style="border:solid 1px white;padding:2px 30px;font-size:22px; cursor:pointer;" onclick="javascript:location.href='https://wdofoz.qhop.org'">바로가기1</span>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://2번이미지.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
                <span style="border:solid 1px white;padding:2px 30px;font-size:22px; cursor:pointer;" onclick="javascript:location.href='https://wdofoz.qhop.org'">바로가기2</span>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://3번이미지.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
                <span style="border:solid 1px white;padding:2px 30px;font-size:22px; cursor:pointer;" onclick="javascript:location.href='https://wdofoz.qhop.org'">바로가기3</span>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

기본 코드는 겟부트스트랩 에서 가져왔다. https://getbootstrap.kr/docs/5.0/components/carousel/

지연 시간 및 디졸브등 기타 옵션을 추가 하고 싶다면 링크로 가서 참고하면되겠다.

제공 된 코드에서 이미지를 넣고

<span style="border:solid 1px white;padding:2px 30px;font-size:22px; cursor:pointer;" onclick="javascript:location.href='https://wdofoz.qhop.org'">바로가기</span>

코드를 추가해서 바로가기 버튼을 만들었다.

입맛에 맞게 수정해서 사용하면 되겠다.

IT 7