SlidesJS가 작동하는 데 문제가 있습니다

SlidesJS를 사용하여 슬라이더를 설정하려고하는 간단한 웹 페이지가 있습니다.SlidesJS가 작동하는 데 문제가 있습니다

HTML 페이지에서 필요한 파일을 연결하는 방법입니다.

<head> 
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
    <script type="text/javascript" src="js/slides.min.jquery.js"></script> 
    <script type="text/javascript" src="js/common.js"></script> <!-- the JS function is in here --> 
</head>

그리고 나는 loading.gif 및 이미지 폴더에있는 이미지의 pagination.png을 뒀다.

이것은 페이지의 HTML입니다.

<div id="container"> 
<div id="slider-space"> 
    <div class="slides-container"> 
     <div> 
      <img src="http://i.imgur.com/kLMCP.png" /> 
     </div> 
     <div> 
      <img src="http://i.imgur.com/aX675.png" /> 
     </div> 
     <div> 
      <img src="http://i.imgur.com/UyE1g.png" /> 
     </div> 
     <div> 
      <img src="http://i.imgur.com/uzc7c.png" /> 
     </div> 
     <div> 
      <img src="http://i.imgur.com/Zh8sQ.png" /> 
     </div> 
    </div><!-- end of slides-container --> 
</div><!-- end of slider-space --> 
</div><!-- end of container -->

다음은 CSS를

#container { 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0px; 
    left:0px; 
} 

#slider-space { 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:10%; 
    width:500px; 
    height:260px; 
    background-color:#F96;  
} 

.slides-container img { 
    width:500px; 
    height:260px; 
} 

.slides-container div { 
    display:block; 
    width:500px; 
    height:260px; 
}

있어 그리고 여기에 자바 스크립트 코드

$(document).ready(function(e) { 
    $('#slider-space').slides({ 
     preload: true, 
     preloadImage: '/images/loading.gif', 
     play: 5000, 
     pause: 2500, 
     hoverPause: false, 
     pagination: true 
    }); 
});

이다 그러나 슬라이더는 전혀 표시되지 않습니다! 이미지는 이처럼 다른 하나 아래에 하나만 표시됩니다.

enter image description here 누구나 내가 여기에 무엇을 놓치고 있으며이를 수정해야하는지 알려주실 수 있습니까?

대단히 감사합니다.

너무 혼란스러운 경우. 더 나은 이해를 얻으려면 바이얼 here을 참조하십시오.

편집 :

좋아, 나는 그것을 작업 얻었다. 이제 슬라이딩이 잘 작동합니다. 그러나 페이지 매김에 약간의 문제가 있습니다. 나타나기로되어있는 작은 원이 나타나지 않습니다. 숫자 만. 아래를보십시오 enter image description here

페이지 넘김을 내 이미지 폴더에 넣었습니다. 스크립트 나 그 밖의 경로에서 경로를 설정할 수있는 방법이 있습니까?

출처

2012-11-14 Isuru

의 background-image 속성에 pagination.png 파일의 경로를 설정할 수 있습니다 ... – Jim

div 클래스는 "slides-container"대신 "slides_container"여야합니다.

페이지 매김의 새로운 문제를 해결하기위한 편집 : 페이지 매김과 관련된 모든 CSS가 누락되었습니다. global.css 파일의 "캡션이있는 이미지"예제를보십시오.

당신은 아래의 CSS 필요 : 당신이 볼 수 있듯이

/* 
    Pagination 
*/ 

.pagination { 
    margin:26px auto 0; 
    width:100px; 
} 

.pagination li { 
    float:left; 
    margin:0 1px; 
    list-style:none; 
} 

.pagination li a { 
    display:block; 
    width:12px; 
    height:0; 
    padding-top:12px; 
    background-image:url(../img/pagination.png); 
    background-position:0 0; 
    float:left; 
    overflow:hidden; 
} 

.pagination li.current a { 
    background-position:0 -12px; 
}

, 당신은 내 대답에 수정을 참조하십시오 .pagination li a

출처

2012-11-14 16:18:19 Jim

네, 그게 문제였습니다. 질문을 게시 한 후에 나는 그것을 알아 내었다. 그러나 새로운 문제가 발생했습니다. 내 질문을 업데이트했습니다. – Isuru

페이지 매김을위한 CSS가 있습니까? – SpoonIsBad

아니요. 위의 게시 된 CSS 코드는 현재 내 스타일 시트의 유일한 CSS 규칙입니다. – Isuru

SlidesJS가 작동하는 데 문제가 있습니다

답변

관련 문제