여러 요소가있는 슬라이더

이미지 갤러리와 같은 슬라이더를 만들고 싶습니다. 다음 이미지와 같이
그것은, 한 번에 여러 항목을 표시해야합니다 : 여러 요소가있는 슬라이더

http://i.stack.imgur.com/nTBPw.png

가 (죄송 @ILMV, 나 자신에 의해 배치 할 수 아니에요 ..)

내가 클릭하면 오른쪽 화살표는 5, 6, 7 및 8을 볼 수 있도록 왼쪽으로 ("아이폰과 같은") 움직여야합니다.
숫자로 이미지화 된 항목은 동적으로 만들어집니다.

<div> 
    <ul> 
     <li>1</li> <!-- ← visible --> 
     <li>2</li> <!-- ← visible --> 
     <li>3</li> <!-- ← visible --> 
     <li>4</li> <!-- ← visible --> 
     <li>5</li> <!-- ← not visible --> 
     <li>6</li> <!-- ← not visible --> 
     <li>7</li> <!-- ← not visible --> 
     <li>8</li> <!-- ← not visible --> 
    </ul> 
</div>

나는

미리

에 감사드립니다 .. 어떻게 슬라이더 작동하는 자신 하나를 만들 수있을 것입니다,하지만 난 그 (CSS-) 레이아웃을 만드는 방법을 알아낼 수 없습니다

EDIT 분명히 말하면 : 주문은 관련성이 있습니다. "모든 고객"그리드와 같은보기를 작성하고 제목을 기준으로 정렬하고 싶습니다.

출처

2010-08-23 scherii

* 해당 주문의 목록 항목이 필요합니까? 당신이'ul'을 사용했기 때문에 당신은 순서가 매겨지지 않았고, 당신이 그것을 원한다면 아마 좀 더 복잡 할 것입니다. 원하는 경우 'ol'을 사용하십시오. 또한, (나는 그것이 당신이 서둘러 왔기 때문에)라고 생각합니다. 그러나 당신은'li'에 당신의 닫는 슬래쉬를 잊어 버렸습니다! –

좋아요, 이것으로 무엇을 달성해야하는지 명확히 해두세요 :) 숫자는 이름별로 정렬 된 고객 로고를 나타냅니다. 시스템 자체가 Quicksand Sort-Plugin (http://razorjack.net/quicksand/demos/one-set-clone.html)에 의해 이미 정렬 되었기 때문에 목록을 사용했기 때문에 정말 중요하지 않습니다. 그리고 바쁘다. 물론 li 태그를 제대로 닫아야한다. :) 고맙습니다. – scherii

문제는 특정 순서로 목록 요소가 필요한지 여부가 명확하지 않다는 것입니다. 물론 jQuery를 이미 사용하고 있다면 주어진 방식으로 삽입 할 수없는 이유가 없습니다.

어쨌든, 나는 float으로 간단한 것을 만들었습니다. 다음은 간단한 데모는 다음과 같습니다 http://jsfiddle.net/vPGbf/ 정말 간단한 float 에드 li 있습니다 (내가 거기에 갇혀 한 정말 멋진 CSS를 무시하고) 모든 일의 핵심은, 절대이 ol 숨겨진 overflow 세트와 외부 div에 위치

아직 필요하지 않은 다른 li을 숨 깁니다. 그게 진짜입니다. 더 많은 요소를 추가 할 때 ol의 너비를 늘려야하고 슬라이딩을 수행하려면 ol의 left 값을 변경해야한다는 것을 기억하십시오.

출처

2010-08-23 10:08:08

@scherii 코드를 디버깅하는 데 도움을 줄 사람을 부탁하는 경우 더 적절하다고 생각합니다. 다른 질문을 열면이 질문의 범위를 벗어날 것입니다. –

div에서 8 개 요소를 모두 래핑하여 javascript/jQuery로 솔루션을 생성 할 수있었습니다. 도와 주셔서 감사합니다. 나는 내가 정말로 필요로하는 것이 있는지 물을 수 없다는 것에 대해 사과한다. 나는 그것에 대해 확신하지 못했다. 누군가 내가 어떻게했는지 알고 싶다면 저에게 연락하십시오. – scherii

여러 요소주기 플러그인

는 목록 항목의 패널을 스크롤 간단한 미리보기를 제공합니다. 가운데에서 li 항목의 지정된 범위를 표시하고 (가장자리 항목을 숨김) 목록에서 왼쪽 및 오른쪽으로 스크롤 할 수 있습니다. 자동 스크롤 또는 항목 배치를 처리하지 않습니다.

https://github.com/willrossi/jQuery-Multiple-Elements-Cycle

출처

2011-01-31 06:35:26 nasavietnam

URI가 다음으로 변경되었습니다. https://github.com/wilr/jQuery-Multiple-Elements-Cycle – Mathias

여러 요소가있는 슬라이더

답변

관련 문제