32. 웹 표준 사이트 만들기(2019) - 갤러리 스크립트

32. 웹 표준 사이트 만들기(2019) - 갤러리 스크립트

https://kenwheeler.github.io/slick/에 접속한다. 

 

아래와 같이 마크업 세팅을 다시한다.

※ 위에 배너와 같이 slick 플러그인을 쓰기 때문에 class명 겹치지 않도록 주의힌다.

 

소스

index.html

<!-- 갤러리 -->

<div class="gallery">

           <h4>포트폴리오</h4>

           <div class="gallery_btn">

<!--

                      <ul>

                                 <li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>

                                 <li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>

                                 <li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>

                                 <li class="gb_icon4"><a href="#"><span class="ir_pm">다음이미지</span></a></li>

                      </ul>

-->

             <!-- slick에서 컨트롤할 수 있게 아래와 같이 변경한다. -->

              <button class="gb_icon1 play"><span class="ir_pm">시작</span></button>

              <button class="gb_icon2 pause"><span class="ir_pm">정지</span></button>

              <button class="gb_icon3 prev"><span class="ir_pm">이전이미지</span></button>

              <button class="gb_icon4 next"><span class="ir_pm">다음이미지</span></button>

           </div>

           <div class="gallery_img">

<!--

                      <ul>

                                 <li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>

                                 <li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>

                                 <li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>

                                 <li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>

                                 <li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>

                      </ul>

-->

                      <div><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></div>

                      <div><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></div>

                      <div><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></div>

                      <div><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></div>

                      <div><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></div>

           </div>

</div>

<!-- //갤러리 -->

...

//갤러리

$(".gallery_img").slick({

           fade: true,

           //이미지 위에 마우스 커서가 있으면 멈추게

           pauseOnHover: true,

           //양 옆에 화살표 안보이게

           arrows: false,

           //무한으로 움직이게

           infinite: true,

           autoplay: true,

           autoplaySpeed: 3000,

           speed: 300,

           slidesToShow: 1

});

 

$(".play").click(function(){

           $(".gallery_img").slick("slickPlay");

});

 

$(".pause").click(function(){

           $(".gallery_img").slick("slickPause");

});

 

$(".prev").click(function(){

           $(".gallery_img").slick("slickPrev");

});

 

$(".next").click(function(){

           $(".gallery_img").slick("slickNext");

});

...

 

style.css

/* 갤러리 */

/* overflow: hidden은 잡힌 영역외에는 자른다.(혹은 영역을 잡아준다.또는 자식태그에 float:left시 height가 0이되는 것을 방지할떄 사용) */

.gallery {position: relative; border: 1px solid #ccc; height: 255px; overflow: hidden;}

...

 

/* 슬릭 갤러리 */

.gallery .gallery_btn button {float: left; margin: 1px 2px; display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;}

.gallery .gallery_btn .gb_icon1 {background-position: -150px -120px;}

.gallery .gallery_btn .gb_icon2 {background-position: -150px -143px;}

.gallery .gallery_btn .gb_icon3 {background-position: -150px -166px;}

.gallery .gallery_btn .gb_icon4 {background-position: -150px -189px;}

.gallery .gallery_btn .gb_icon1:hover {background-position: -173px -120px;}

.gallery .gallery_btn .gb_icon2:hover {background-position: -173px -143px;}

.gallery .gallery_btn .gb_icon3:hover {background-position: -173px -166px;}

.gallery .gallery_btn .gb_icon4:hover {background-position: -173px -189px;}