2014-01-17 3 views
0

포럼에 새로 오셨습니다 - 오해를 용서하십시오. 스 와이프 쇼/슬라이드 쇼 사용. 쇼는 작동하지만 쇼 아래의 "점들"은 사용자가 스 와이프 할 때 따라야하는 것입니다. 목록 항목 내에 "a"태그를 추가하려했지만 "on"클래스로 스팬을 시도했습니다.스 와이프 쇼 탐색 "점들"

HTML

<div class="dots"> 
    <ul id='position'> 
     <li class='on'></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</div> 

CSS

.dots { 
    margin: 7px auto 0px; 
    position: relative; 
    max-width: 680px; 
} 
.dots a { 
    color: rgb(205, 205, 205) !important; 
    font-style: normal; 
} 
.dots #position { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 
.dots #position li { 
    background: rgb(255, 255, 255); 
    margin: 0px 2px; 
    border-radius: 10px; 
    width: 10px; 
    height: 10px; 
    display: none; 
    cursor: pointer; 
    box-shadow: inset 0px 1px 3px grey, 0px 0px 1px 1px #8b8989; 
} 
.dots #position li.on { 
    box-shadow: inset 0px 1px 3px -1px #7EC153, 0px 1px 2px rgba(0, 0, 0, 0.5); 
    background-color: rgb(126, 193, 83); 
} 

라이브 사이트 데모 : 여기 Swipeshow의 http://192.185.168.157/~rylex658/mobile/residential-cabinets.html

+0

스 와이프? 모바일 개발과 같이 사용자가 슬라이드 쇼를 회전시키기 위해 손가락을 '슬라이드'할 수있게 ...? –

+0

@Nicholas Hazel 예, 슬라이드 쇼 진행을 위해 손가락을 쓸어 넘깁니다. 쇼 아래의 점들은 이미지를보기와 일치시키고 사용자가 슬라이드 쇼를 이동할 수있게합니다. – BSim

답변

0

저자.

.dots #position.dots#position이어야합니다. 또한 <li>의 데이터를 채울 필요가 없습니다. 라이브러리에서 완료됩니다.