[jquery] 슬라이드 고인물

회사에 웹디자이너분이 담주 토욜에

웹디자인기능사 실기를 보신다고 하는데,

슬라이드가 너무 어렵고 이해가 안가신다고 해서

중간중간 작업 끝내고 짬나는 시간에 간단하게 예시를 만들어 드렸다

근데, 나 생각보다 정성스러운 느낌 ㅎㅋ

 

그래서 블로그에 남겨두려고 한다.

 

요건 css

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ol,
      ul {
        list-style: none;
      }
      .wrap > div {
        height: 300px;
      }
      .wrap {
        display: flex;
      }
      .left,
      .right {
        border: 3px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .left {
        background: chartreuse;
        width: 100px;
      }
      .right {
        background: cornflowerblue;
        width: 150px;
      }

      .center {
        width: calc(100% - 100px - 150px);
      }
      .center .slide {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
      }
      .center ul {
        width: 300%;
        display: flex;
        height: 100%;
        transition: margin-left 0.3s;
      }
      .center li {
        width: 33.333%;
        height: 100%;
      }
      .center li a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        color: #fff;
      }
      .center li img {
        width: 100%;
      }
      .center li span {
        position: absolute;
        font-size: 30px;
        font-weight: bold;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
      }
      .btn_prev {
        left: 10px;
      }
      .btn_next {
        right: 10px;
      }
 </style>

 

요건 html

<div class="wrap">
      <div class="left">left</div>
      <!--왼쪽 박스-->

      <div class="center">
        <div class="slide">
          <ul>
            <li style="background: skyblue;">
              <a href="#">
                <img src="https://picsum.photos/600/300" alt="" />
                <span>1</span>
              </a>
            </li>
            <li style="background: coral;">
              <a href="#">
                <img src="https://picsum.photos/610/300" alt="" />
                <span>2</span>
              </a>
            </li>
            <li style="background: pink;">
              <a href="#">
                <img src="https://picsum.photos/620/300" alt="" />
                <span>3</span>
              </a>
            </li>
          </ul>
          <!--슬라이드-->

          <button type="button" class="btn_prev btn"><</button>
          <button type="button" class="btn_next btn">></button>
          <!--버튼-->
        </div>
      </div>
      <!--가운데 슬라이드 박스-->

      <div class="right">right</div>
      <!--오른쪽 박스-->
  </div>

 

제이쿼리 cdn 추가한 뒤 스크립트 삽입

<script>
      //jquery start
      var num = 0;
      var width = 100; //100%
      var margin;

      // prev 버튼
      $(".btn_prev").click(function () {
        num--; // --은 1씩 감소
        if (num < 0) {
          num = 2;
        }
        margin = num * width;
        $(".slide ul").css("margin-left", `-${margin}%`);
      });

      //next 버튼
      $(".btn_next").click(function () {
        num++; // ++은 1씩 증가
        if (num == 3) {
          num = 0;
        }
        margin = num * width;
        $(".slide ul").css("margin-left", `-${margin}%`);
      });
  </script>

 

혼자 포트폴리오 준비할 때 머리 지끈지끈 끙끙 앓아본 적이 있어서

내 설명으로 디자이너분이 슬라이드는 개껌처럼 쉽게 만들수있었으면 좋겠당

설명해주러가야지~.~ 총총

 

한번에 빡 합격하셔서 나한테 빠삐코 사주셨으면 좋겠당