부트 스트랩 슬라이더/캐 러셀

Question

이 원 4 개 위에 텍스트가있는 부트 스트랩 캐 러셀을 만들고 싶습니다. 매번 1 개의 원이 오른쪽 원을 '선택/호버'하고 아래 오른쪽 선이 표시됩니다. 이 같은 것을 :

누가이 문제를 해결할 수 있습니까?

Answer 1

당신이 볼 수있는 바닐라 JS 캐 러셀이 있습니다.하지만 다른 사람들은 스택 오버플로가 프로젝트를 생성하는 서비스가 아니라고 지적했습니다. 캐 러셀에 원하는 모양을 표시 할 수 있도록 CSS를 더 연구해야합니다.

//Changed index so 1 is actually first image, rather than starting at 0 index 
 
var index = 1; 
 
var paused = false; 
 
var slideShow = []; 
 

 
for (i=0; i<document.getElementsByClassName("slideShow").length; i++) { 
 
    slideShow[i] = document.getElementsByClassName("slideShow")[i]; 
 
    slideShow[i].style.display = "none"; 
 
} 
 

 
slideShow[0].style.display = "inline"; 
 

 
var slides = setInterval(function() { 
 
    if (index < slideShow.length) { 
 
    index++; 
 
    showDivs(); 
 
    } 
 
    else { 
 
    index = 1; 
 
    showDivs(); 
 
    } 
 
},1000); 
 

 
function control(n) { 
 
    clearInterval(slides); 
 

 
    if (index+n > slideShow.length) { 
 
    index = 1; 
 
    } 
 
    else if (index+n <= 0) { 
 
    index = slideShow.length; 
 
    } 
 
    else { 
 
    index += n; 
 
    } 
 
    showDivs(); 
 
} 
 

 
function showDivs() { 
 
    //Hide all slideShow elements, and then show only the targeted element 
 
    for (let i=1; i<=slideShow.length; i++) { 
 
    slideShow[i-1].style.display = "none"; 
 
    } 
 
    slideShow[index-1].style.display = "inline"; 
 
}

<button onclick="control(-1)" class="arrows" id="left"><</button> 
 
<p class="slideShow">1</p> 
 
<p class="slideShow">2</p> 
 
<p class="slideShow">3</p> 
 
<p class="slideShow">4</p> 
 
<p class="slideShow">5</p> 
 
<button onclick="control(1)" class="arrows" id="right">></button>