👻서론

퍼블리셔 포트폴리오 사이트에 들어간 슬라이드입니다. 포트폴리오 사이트 제작하면서 두번째로 시간을 많이 잡아먹은 파트입니다. (첫번째는 디자인..😨😭)

기능을 설명하자면..

• 갤러리의 썸네일을 클릭하면 썸네일에 걸려있는 원본 이미지 링크들을 팝업창에 띄움
• 원본 이미지의 수만큼 슬라이드 밑에 버튼(bullet)들이 생성되고 몇번째 이미지인지 표시됨
• 슬라이드 밑 버튼을 클릭하면 해당 번호의 이미지로 슬라이딩됨
• 이전, 다음 슬라이드로 넘어가는 버튼
• 무한 슬라이드

정도가 되겠습니다.

이것도 저번 포스트처럼 codepen에 간단한 데모버전을 만들었습니다. 코드펜에 작성한 내용을 바탕으로 설명하겠습니다.

https://codepen.io/soonmac/pen/ZEXoKLR

👻HTML

    <h2>Gallery</h2>
    <ul class="box__gallery">
        <li>
            <a href="<https://picsum.photos/id/237/500/300>">
                <img src="<https://picsum.photos/id/237/150/150>" alt="이미지1"></li>
            </a>
            <li>
                <a href="<https://picsum.photos/id/238/500/300>">
                    <img src="<https://picsum.photos/id/238/150/150>" alt="이미지2"></li>
                </a>
            <li>
                <a href="<https://picsum.photos/id/239/500/300>">
                    <img src="<https://picsum.photos/id/239/150/150>" alt="이미지3"></li>
                </a>
            <li>
                <a href="<https://picsum.photos/id/240/500/300>">
                    <img src="<https://picsum.photos/id/240/150/150>" alt="이미지4"></li>
                </a>
            <li>
                <a href="<https://picsum.photos/id/241/500/300>">
                    <img src="<https://picsum.photos/id/241/150/150>" alt="이미지5"></li>
                </a>
            <li>
                <a href="<https://picsum.photos/id/242/500/300>">
                    <img src="<https://picsum.photos/id/242/150/150>" alt="이미지5"></li>
                </a>
    </div>
</section>

    <!--팝업창-->
<div class="slide-overlay">
    <button class="close-btn">close</button>
    <button class="slide-btn --prev">
        prev
    </button>
    <button class="slide-btn --next">
        next
    </button>
    <div class="slide__container">
        <ul class="slides">
            <li><img src="" alt="이미지1"></li>
            <li><img src="" alt="이미지2"></li>
            <li><img src="" alt="이미지3"></li>
            <li><img src="" alt="이미지4"></li>
            <li><img src="" alt="이미지5"></li>
            <li><img src="" alt="이미지6"></li>
        </ul>
    </div>
</div>

갤러리 썸네일 li 요소에 앵커로 이미지 원본(큰 사진) 주소를 걸어주고 img 태그에는 썸네일(작은 사진) 주소를 집어넣습니다. 그리고 슬라이드 이미지 주소는 비우거나 임시 이미지를 넣어줍니다. 나중에 자바스크립트로 이미지 원본 주소를 슬라이드 이미지 주소에 집어넣을거임

👻CSS

slide

.slide__container {
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.slides {
  width: 600%;
  position: relative;
  left: 0;
}
.slides::after {
  content: "";
  display: block;
  clear: both;
}
.slides > li {
  float: left;
}

길어서 중요한 슬라이드 부분만! slide의 li들을 float을 이용해 일자로 정렬해줍니다. ul 요소인 slides는 이미지의 개수만큼 너비를 지정해줍니다. 여기서는 slide__container의 크기 = 이미지 하나의 크기이기 때문에 너비를 600%로 했습니다.

👻javaScript

썸네일을 눌렀을 때 팝업창이 등장하는 함수