2021.08.31

풀페이지 슬라이더

페이지에 전체 들어오게 하기 위해 %단위의 너비로 슬라이더를 구성하면 된다.

let count = $('.slide>li').length; // 이미지 총 갯수
let slideWidth = (count*100)+"%";  // 부모박스의 너비% -> 이미지갯수 * 100%
$('.slide').width(slideWidth); // 부모박스의 너비를 이미지 갯수 만큼 늘어나게
console.log(count, slideWidth); // 3, 300%
let slideListWidth = (100 / count)+"%"; // 부모박스/이미지 갯수 너비 %계산
$('.slide>li').width(slideListWidth);

위처럼 이미지로 추가될 리스트의 개수에 100을 곱하고 %단위를 주어 이미지가 가로로 늘어질 박스의 너비를 지정해주고 이미지가 늘어진 박스에 균등하게 이어지기 위해 100을 이미지 갯수로 나누고 %단위로 주어주어 가변되는 슬라이더를 설계해놓는다.

이후 높이도 같이 가변될수 있게 부모박스에 높이를 따로 설정하지 않고 크기가 같은 이미지만 넣어준다.

setInterval(function(){
    $('.slide').animate({'margin-left': "-100%"}, 1000, function(){
      $('.slide>li:first').insertAfter('.slide>li:last');
      $('.slide').css({'margin-left': 0});
      let num = $('.slide>li:first').children("img").attr("alt");
      $("ul.dot>li").eq(num).addClass('on').siblings("li").removeClass('on');
            });
}, 2000);

그리고 이동시에서는 늘어놓은 이미지박스에 position을 준것이 아니기때문에 이미지를 margin-left로 이동시킨다.

css 변수 지정

사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 var() 함수를 지정하고, 그 매개변수로는 사용자 지정 속성의 이름을 제공한다.

사용예시

:root {
  --main-bg-color: brown;
}
.bg {
   background-color: var(--main-bg-color);
}

중복으로 사용되는 css 속성 값이면 변수에 담아 사용하고 추후 변경시에도 한번에 변경할 수 있게 되어 편하게 사용할 수 있다.

슬라이더 플러그 인 사용

boxslider

jQuery의 여러 플러그인 중에서 슬라이더에 많이 사용했던 플러그인이다.

현재는 스와이프라는 플러그인이 옵션이 많아 더 사용하는 추세이다.

플러그인 주소

사용방법
JS

$(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',
    captions: true,
    slideWidth: 600
  });
});

HTML

<div class="bxslider">
  <div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

위처럼 html과 js를 적어주어 사용하면된다.

필요파일은 bxslider의 css파일과 js파일이고 슬라이더 적용을 원하는 이미지들의 부모요소에 클래스를 bxslider로 적용하고 js에서 jQuery를 사용해 해당 클래스를 선택 후 bxSlider라는 플러그인에서 정의한 함수를 사용해 슬라이더를 구현한다.

옵션은 상당히 많기 때문에 링크 홈페이지에서 확인하는 것을 추천한다.

옵션사용예시

$(".boxslider").bxSlider({
            auto:true,
            pager: true,
            autoControls: true,
            adaptiveHeight: true,
            controls: true,
            captions: true
});