jQuery Cycle2 슬라이드 쇼 (응답 너비 및 너비는

)

브라우저의 너비가 이고 인 높이로 조정하면 jQuery Cycle2 플러그인을 사용하여 슬라이드 쇼를 만들려고합니다. 나는 너비가 잘 작동되도록 Auto Height 기능의 Dynamic Container Sizing 문서를 사용할 수있었습니다.jQuery Cycle2 슬라이드 쇼 (응답 너비 및 너비는

필자는 here을 만들었습니다. 이는 작업중인 웹 사이트 빌드의 단순화 된 표현입니다.

.cycle-slideshow div의 max-height:100%;을 슬라이드에 어떻게 제공 할 수 있습니까?

일반적으로 직면하는 문제는 긴 세로 이미지가 내 사이트 디자인에 실제로 들어 가지 않으며 사용자가 전체 이미지를 보려면 스크롤해야한다는 점입니다. 환상적이지 않습니다.

감사합니다.

출처

2013-04-02 Sam Baldwin

조금 늦었지만 한 번 시도해 보겠습니다.

모든 이미지가 동일한 높이가 아닌 것으로 가정합니다. 이것은 다른 치수 이미지가있는 경우에도 항상 컨테이너를 동일한 크기로 유지하는 약간의 트릭입니다.

의사 조건 :

는 이미지 대신 내에 위치의 슬라이드의 '배경'을합니다.
{background-size : 표지}를 CSS에 추가하십시오.
Cycle2의 맞춤 템플릿을 사용하여이를 시작하십시오. (해킹 무슨 소리, 정말?)

가의 몇 가지 새로운 CSS 규칙하자 :

.cycle-overlay { 
    position:absolute; 
    bottom:auto; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:0; 
    background:#333; 
    padding:0; 
    opacity:1 
} 
.banner-background { 
    width:100%; 
    height:100%; 
    background-position:center; 
    background-size:cover; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:10; 
} 
.cycle-slideshow { 
    width:100%; 
    max-height:400px; 
    background-position:center; 
    background-size:cover; 
    color:#fff; 
    overflow:hidden; 
}

html로

<div class="cycle-slideshow" 
    data-cycle-slides='li' 
    data-cycle-fx='scrollHorz' 
    data-cycle-speed='700' 
    data-cycle-timeout='7000'  
    data-cycle-overlay-template="<div class=banner-background style=background-image:url(http://domain.tld/images/{{background}})></div>" 
> 
    <ul> 
     <li data-cycle-background="slide1.jpg"></li> 
     <li data-cycle-background="slide2.jpg"></li> 
     <li data-cycle-background="slide3.jpg"></li> 
    </ul> 
    <div class="cycle-overlay"></div> 
     </div>

을 JS

$('.cycle-slideshow').on('cycle-before', function (opts) { 
    var slideshow = $(this); 
    var img = slideshow.find('.banner-background').css('background-image'); 
    slideshow.css('background-image', img); 
});

을 그것은 당신이 찾고있는 것이 아니다 내가 Cycle2

와 animate.css 통합에 대한 몇 달 다시 예를 쓴하지만 예는 전체를 제공합니다 :

가정의 모든 이미지는 같은 높이 -width 자동 높이 솔루션.

코드를 확인하면 필요한 것을 얻을 수 있습니다.

피들 here!

또한,이 가운데로 추가 플러그인을 추가 할 필요가 Cycle2 으로 기억 환호를이 도움이 jquery.cycle2.center.js

희망을 슬라이드!

출처

2013-08-21 05:03:16

jQuery Cycle2 슬라이드 쇼 (응답 너비 및 너비는

답변

관련 문제