는 우선 여기에 슬라이더

Question

위한 통해 반복 슬라이더가 내가 첫 번째 슬라이드를 표시 할 수 없습니다 나는 반복 끝난 후, 나는 슬라이더를 만들려고하고있는 link

을합니다. 슬라이더에 모든 슬라이더를 중단없이 반복적으로 표시하고 싶습니다.

HTML 코드 : 사업부 '#mydiv'내부

<div class="main-container"> 
    <div class="main-slider"> 
     <div id="mydiv">  
     </div> 
    </div> 
</div> 

슬라이더가 추가됩니다.

JS 코드 : 어떤 도움을 주시면 감사하겠습니다

$(document).ready(function() { 
var screenHeight = $(window).height(); 
var screenWidth = $(document).width(); 

$(".main-slider").css("height", screenHeight + 4); 


var imageURLS = [ 
    "http://images6.fanpop.com/image/photos/36800000/Beautiful-Landscapes-image-beautiful-landscapes-36803145-1920-1080.jpg", 
    "http://www.cnmuqi.com/data/out/222/images-of-landscapes-7409399.jpeg", 
    "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS5cXFv_tmqWQFHllbUOvL9reoqTB9jQLWc-16Sj_r2vKPhNqobaQ", 
    "http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg", 
    "http://www.qqxxzx.com/images/images-of-landscapes/images-of-landscapes-8.jpg", 
    "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRNO6NIwG_n-pFppB_-DFN3Pt5M-sWe_-CMxR6MDz3eV9i38bA2", 
    "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyer4s2_wLSkH86aSggqXv5nXU6z6pQC_RNGYEcIgjuQAESwtG", 
    "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSwQAHl6_-8GpV7c86T_qSSWlF6bsyyl4JoYVh4flC2dcZDiZGL" 

]; 

$.each(imageURLS, function(k, v) { 
    $('#mydiv').append('<div class="image_block"><img src="' + v + '" /></div>'); 
}); 

$(".image_block img").css("width", screenWidth); 
$(".image_block img").css("height", screenHeight); 

function initial_call() { 

    $('.image_block img').eq(0).attr('src', imageURLS[0]); 
    $('.image_block img').eq(1).attr('src', imageURLS[1]); 
} 
// initial_call(); 
var count = 1; 
setInterval(function() { 

    translate_value = count * screenHeight + count * 4; 
    $("#mydiv").css("transform", "translate(0px,-" + translate_value + "px)"); 

    count++; 
}, 2000); 




}); //end of $(document).ready(); 

.

Answer 1

당신은 단순히 다음 줄을 추가 할 수 있습니다

count++; 
count%=imageURLS.length; 

카운트가 증가하지만 마지막에 도달하면 다음 포장 할 것입니다.

Answer 2

example 작업

는

나는 var finishNumber = imageHeight * imageURLS.length; 그래서이 변수 i가 마무리 지점을 확인하고 translate_value0에 설정할 수 있습니다 추가 할 수 있습니다.

if(translate_value == finishNumber){ 
    translate_value = 0; 
} 

최종 코드

jQuery를 :

$(document).ready(function() { 
var screenHeight = $(window).height(); 
var screenWidth = $(document).width(); 
var imageHeight = screenHeight; 
$(".main-slider").css("height", screenHeight); 

var imageURLS = [ 
    "http://images6.fanpop.com/image/photos/36800000/Beautiful-Landscapes-image-beautiful-landscapes-36803145-1920-1080.jpg", 
    "http://www.cnmuqi.com/data/out/222/images-of-landscapes-7409399.jpeg", 
    "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS5cXFv_tmqWQFHllbUOvL9reoqTB9jQLWc-16Sj_r2vKPhNqobaQ", 
    "http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg", 
    "http://www.qqxxzx.com/images/images-of-landscapes/images-of-landscapes-8.jpg", 
    "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRNO6NIwG_n-pFppB_-DFN3Pt5M-sWe_-CMxR6MDz3eV9i38bA2", 
    "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyer4s2_wLSkH86aSggqXv5nXU6z6pQC_RNGYEcIgjuQAESwtG", 
    "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSwQAHl6_-8GpV7c86T_qSSWlF6bsyyl4JoYVh4flC2dcZDiZGL" 
]; 

$.each(imageURLS, function(k, v) { 
    $('#mydiv').append('<div class="image_block"><img src="' + v + '" /></div>'); 
}); 

$(".image_block img").css("width", screenWidth); 
$(".image_block img").css("height", screenHeight); 

function initial_call() { 

    $('.image_block img').eq(0).attr('src', imageURLS[0]); 
    $('.image_block img').eq(1).attr('src', imageURLS[1]); 
} 
// initial_call(); 
var count = 1; 
var translate_value = 0; 
var finishNumber = imageHeight * imageURLS.length; 
setInterval(function() { 
    console.log(imageURLS.length) 
    translate_value = translate_value + screenHeight; 
    if(translate_value == finishNumber){ 
     translate_value = 0; 
    } 
    $("#mydiv").css("transform", "translate(0px,-" + translate_value + "px)"); 

    count++; 
}, 2000); 




}); //end of $(document).ready(); 

HTML :

<div class="main-container"> 
    <div class="main-slider"> 
     <div id="mydiv">  
     </div> 
    </div> 
</div> 

CSS :

html,body{ 
    padding: 0px; 
    margin: 0px; 
} 
.main-container{ 
    width: 100%; 
} 
.main-slider{ 
    height: 100%; 
    overflow: hidden; 
} 
.image_block img{ 
    display: block; 
} 
#mydiv{ 
    -webkit-transition: all 1s cubic-bezier(.77,0,.175,1); /* For Safari 3.1 to 6.0 */ 
    transition: all 1s cubic-bezier(.77,0,.175,1); 

    display: inline-block; 
} 
.primary-slide img, 
.followup-slide img, 
.slide img{ 
    width: 100%; 
} 

실제 사례 : https://jsfiddle.net/81jhnb5a/2/