2013-08-20 2 views
7

오전 Flexslider 회전 목마 구축을 위해 노력 - 오프 스크린가는 양쪽에 다음/이전 이미지로, 여러 개의 이미지를 가지고 있지만 현재 이미지가 중심 -이 사이트가 마음에 http://www.ncad.ie/flexslider

지금까지 내가 하나의 이미지로있어 : http://jsfiddle.net/Y3kx5/

Lookign이 하나를 해결하기 위해 주장하는 다른 문제를 해결하지만 난 그게 작동시킬 수 없습니다 FlexSlider: Center current image

다른 flexslider를 시도했다 같은 JS : 화면에

$('.flexslider').flexslider({ 
animation: "slide", 
controlNav: false, 
itemWidth: 800, 
minItems: 3, 
maxItems: 3 
}); 

하지만 3 개 이미지 - I는 현재 하나가 다음/이전은 많은 윈도우가 허용하는 표시와 완벽하게 화면되고 싶어 반면.

미리 감사드립니다. .ben.

답변

1

일부 CSS 규칙을 추가하여 슬라이더의 모양을 변경하고 탐색기를 슬라이더 이미지의 경계 밖으로 이동시킬 수 있습니다.

코드 :

.content { 
    background: #f2f2f2; 
    max-width: 800px; 
    display: block; 
    margin: 0 auto 
} 
.flex-direction-nav .flex-next { 
    right: 0 !important; 
    margin-right: -30px; 
    opacity: 1 !important; 
} 
.flex-direction-nav .flex-prev { 
    left: 0 !important; 
    opacity: 1 !important; 
    margin-left: -30px; 
} 
.flexslider { 
    width: 90%; 
    margin: 0 auto; 
} 

데모 : CSS를 함께 완료 http://jsfiddle.net/Y3kx5/2/

: http://jsfiddle.net/IrvinDominin/899SD/ 사실은 단지 그것을 해결 한

+0

안녕하세요 - 답변을 주셔서 감사합니다.하지만 다음은 현재 이미지 옆에 다음/이전 이미지 (화살표가 아님)가 있지만 화면에 공간이있는 것만 보여줍니다. http : //www.ncad.ie/ – topiman

+0

이 플러그인을 사용하는 것이 가능한지 모르겠지만 좀 살펴 보겠습니다. 결국 다른 플러그인으로 이동할 수 있습니까? –

+0

잠재적으로 다른 것으로 옮길 수는 있지만 Flexslider는 스 와이프/반응 형 크기 등의면에서 최고이며 거기에 대한 Drupal 모듈이 있습니다. 솔루션의 관점에서 Flexslider의 저자는 여기에서 내가 시도한 것을 언급하고 결과적으로 수평 스크롤을 생성한다는 점만 제외하면 작동합니다. https://github.com/woothemes/FlexSlider/issues/212 – topiman

10

여기 마지막 조각입니다 :-)

.container {overflow: hidden; width: 100%} 
.flexslider {max-width: 800px; width: 800px; margin: 0 auto} 
.content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto} 
.flex-viewport {overflow: visible !important} 
+0

topiman 공유 주셔서 감사합니다. – FatalMojo