jquery UI 슬라이더 이미지 너비

슬라이더가 움직일 때 이미지를 표시하려고합니다. 그래서 예를 들어, 나는 2 개의 이미지가 있고 하나의 이미지는 오버플로되어 있습니다 : 숨김과 너비 : 0 %. 슬라이더를 움직이면 첫 번째 이미지의 너비가 두 번째 이미지의 너비보다 커야합니다. JSFIDDLE jquery UI 슬라이더 이미지 너비

경우 : 여기

여기

<body> 
    <div class="puppy"><img src="images/dog.jpg" /></div> 
    <div class="kitten"><img src="images/cat.jpg" /></div> 

    <div id="slider"></div> 
</body>

가 JSFIDDLE 내 JS

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

입니다 그리고 여기 내 CSS를

.puppy { 
overflow: hidden; 
position: absolute; 
width: 0; 
}

입니다 그리고 여기 내 HTML입니다 어떤 것이 있나? 명확하지 않은 것을 알려주세요

출처

2014-03-26 user3323889

나는 일 필요는 것을 얻을 관리했다. 다음은 작동하는 버전입니다 : [JSFIDDLE] (http://jsfiddle.net/92ytK/12/) – user3323889

슬라이더 스크롤에 강아지 이미지의 너비 변경을 첨부해야합니다. 그리고 너는 이것을하지 않았다.

내가 갤러리에 라인 당 이미지 수에 대한 형식의 내용의 변경이 사용한

$("#Slider").slider({ 
    value: $("#ImagesNumber").val(), 
    min: 1, 
    max: 10, 
    slide: function(event, ui) { 
     $("#ImagesNumber").val(ui.value); 
    } 
});

여기서

min: 1,

이 설정

value: $("#ImagesNumber").val(),

세트 초기 번호 최소 번호

max: 10,

가장 높은 번호를 슬라이더의 스크롤에 번호

slide: function(event, ui) {$("#ImagesNumber").val(ui.value);}

관계 변화를 설정한다. 귀하의 경우에는

은 다음과 같습니다

$("#Slider").slider({ 
    value: $(".puppy").css('width'), 
    min: 0, 
    max: 100, 
    slide: function(event, ui) { 
     $(".puppy").css('width', ui.value); 
    } 
});

내가 100 %의 의미로 100을 제안 - 이미지 (물론 픽셀 다양한 크기를했을 경우는 경우에 조금 더 나은이기 때문에, 내가한다고 가정 처음에 보이는 이미지와 처음에 숨겨진 이미지는 같은 크기를 가짐). 따라서 퍼센트를 픽셀로 변환하려면 추가 계산이 필요합니다.

전체 텍스트에 절대적으로 위치하지 않는 한 절대 위치와 숨겨진 오버플로를 CSS에서 지울 것을 제안합니다. 그리고 표시 할 공간이 매우 좁습니다. 그렇다면 절대 위치와 css에 숨겨진 오버플로를 허용 할 수 있습니다.

그리고 당신은 강아지을 표시하고 슬라이더를 스크롤 할 고양이을 숨길하려는 경우, 당신은 너무 폭의 추가 계산을 할 것입니다.

출처

2014-03-26 09:27:43

이와 유사한 접근법이 FIDDLE입니다.

하나의 그림을 div의 배경으로 설정하고 div의 다른 그림을 슬라이더로 변경하십시오.

JS는

$("#slider").slider({ 
         value: 1, 
         min: 1, 
         max: 100, 
         step: 1, 
         slide: function(event, ui) { 
                $("#slidevalue").html(ui.value); 
                $('#mydog').css('width', (ui.value * 4)); 
                } 
         });

출처

2014-03-26 10:08:43 TimSPQR

jquery UI 슬라이더 이미지 너비

답변

관련 문제