3

전체 화면 jquery 슬라이더를 설정하려고합니다. 나는 두 단계로 프로젝트를 깨뜨렸다. 1) css와 2) js.jQuery 슬라이더로 CSS 가로 스크롤 오버 플로우

1) CSS은 아래의 사진은 제가 고정 된 높이가 아닌 것입니다. 그리고 아래 코드는 제가 작동하지 않는 코드입니다. 가능하면 jQuery Coda Slider처럼 ... 그들에 클릭 할 때 왼쪽을 슬라이드로 된 div 싶습니다 jQuery를 사용

Example http://i43.tinypic.com/a1ocxj.jpg

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css"> 

     /* Positioning */ 
     #container { width: 2500px; } 
     .block { display: inline; } 

     /* Styling */ 
     .block img { padding: 5px; } 

    </style> 
</head> 
<body> 
    <div id="container"> 
     <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div> 
     <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div> 
     <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div> 
    </div> 
</body> 
</html> 

2) 자바 스크립트.

감사합니다. 도움을 주시면 감사하겠습니다.

+0

깨진 링크, 새로운 링크 가능성이있다 : http://kevinbatdorf.github.io/codaslider/ –

답변

0

당신은 고정 폭과 오버 플로우가 이렇게 영역 만이 나타 내에 어떤 숨겨진으로 설정하도록 컨테이너 사업부의 CSS를 설정하여 시작해야합니다 :

#container{ 
    width:500px; 
    height:200px; 
    overflow:hidden; 
} 

당신은 어떻게 슬라이더를 원하는 않았다 일하다? 오토매틱? 버튼 누르면? 아마 자동으로

+0

다음 div를 클릭하여 왼쪽으로 슬라이드 할 수있게하고 싶습니다 (위 그림과 비슷합니다). 또한 컨테이너 바깥에 div 링크가 있어야합니다. – Jeffrey

+0

위의 그림처럼 보이게하려면 다음 슬라이드를 표시하는 것이 중요하며 모든 슬라이드가 다른 높이가 될 것입니다. 그래서 overflow-x를 숨기고 clip으로 설정해 보겠습니다. – Jeffrey

0

알아서 그 일을 봐 수있는 몇 가지 플러그인이 있습니다 : http://apirocks.com/html5/html5.html (크롬 시험)

+0

니스. 내가 필요한 것에 아주 가깝다. 컨테이너가 슬라이드되고 머리글과 바닥 글이 일정하게 유지되도록 설정할 수 있는지 궁금합니다. – Jeffrey

+0

절대 배치 된 div 두 개가 있다고 생각하면 –

+0

괜찮아요, 주위를 엉망으로 만들고 상대 슬라이드를 절대 슬라이딩 컨테이너 아래에 머물게하는 데 어려움을 겪고 있습니다. – Jeffrey