width: 100% 이미지 슬라이드

0 투표
1,715 조회
6월까지 자바스크립트&제이쿼리 수업을 들었던 학생입니다.

수업 마지막 날 레시피 수업 중 알려주셨던 이미지 슬라이드 코드를 이용하여 홈페이지를 만들려 합니다.

그런데 슬라이드를 줄 이미지 가로 크기가 화면에 꽉 찰 경우, 어떻게 코드를 변경해야 할지 몰라 문의 드립니다.

<html>

   <div di="slider">

        <div>

            <div class="slide slide1"></div>

            <div class="slide slide2"></div>

            <div class="slide slide3"></div>

        </div>

   </div>

</html>

<css>

#slider {

    width: 100%; height: 400px; overflow: hidden; position: relative;

}

.slide {

    position: absolute; top: 0; left: 0;

}

.slider1 {

    background: url('슬라이드 줄 이미지 경로');

}

<javaScript>

$(function() {
    doSlider("#slider");
});

function doSlider(slider) {
  var slider = slider;
  var itemWidth = $(slider).width();
  var itemCount = $(slider + "> div > div").length;
  var intervalID;
  
  _init();
  intervalID = setInterval(_animate, 2000);
  
  function _init() {
      $(slider + "> div").css({
        width : (itemWidth * itemCount) + "px"
    }).mouseover(function() {
        clearInterval(intervalID);
    }).mouseout(function() {
        intervalID = setInterval(_animate, 2000);
    });
  }
  
  function _animate() {
      $(slider + "> div").animate({
        "left" : "-=" + itemWidth + "px"
    }, "slow", function() {
        $(slider + "> div div:first-child").clone().appendTo(slider + ">div");
        $(slider + "> div div:first-child").remove();
       $(slider + "> div").css("left", "0");
    });
  }
}
요청 : 2016년 8월 25일 웹프로그래밍 분류 내 작성자 loria (140 포인트)
수정일시 : 2016년 8월 25일 작성자 loria

1 개의 답변

0 투표
슬라이더를 웹브라우저의 뷰포트에 대응하는 식의 작업은 다른 방식으로 작업을 해야합니다.

결국 슬라이더의 가로 크기가 웹브라우저의 크기에 따라 달라진다는 이야기인데 슬라이딩 처리할 이미지를 달라질수 있는 뷰포트의 가로 크기에 맞춰 동적으로 변경해야 합니다. 이것은 자바스크립트를 이용해서 적용할 가로 크기를 알아내어서 이미지 및 이미지를 보여주는 뷰의 크기도 동적으로 변경해야 하겠지요.

이 방법 말고 슬라이더 이미지를 배경 이미지로 처리하는 방식이 있습니다. 이 경우에는 가로 크기 변동에 좀더 유연하게 대처할 수 있습니다.

알고 계신 코드를 좀더 검토해 보신다면 위에 설명 드린 방식으로 처리가 가능할 것입니다.

답변으로 당장 샘플 코드를 작성해 보여드리기는 시간적으로 어렵고요. 시간이 가능할 때 샘플 코드를 작성해서 이곳에 추가 답변으로 달아드려보도록 하겠습니다.
답변: 2016년 8월 25일 작성자 qsadmin (2,100 포인트)