2017-10-17 15 views
-2

Je veux faire un carrousel bootstrap avec du texte, au-dessus de ces 4 cercles où chaque cercle 1 est 'sélectionné/plané' le cercle droit et la ligne droite en dessous est montré. Quelque chose comme ceci: Have a look hereBootstrap curseur/carrousel

Qui peut m'aider avec ce problème?

+1

Il est prévu que vous au moins essayer de coder vous-même. Stack Overflow n'est pas un service d'écriture de code. Je suggère que vous fassiez un peu de [** recherche supplémentaire **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , soit via Google ou en cherchant SO, faire une tentative et. Si vous avez encore des problèmes, revenez avec ** votre code ** et expliquez ce que vous avez essayé. –

Répondre

0

Voici un carrousel JS à la vanille que vous pouvez regarder, cependant, comme d'autres l'ont souligné, Stack Overflow n'est pas un service pour créer vos projets pour vous. Vous aurez besoin de rechercher plus CSS afin que vous puissiez obtenir le carrousel à apparaître comme vous le souhaitez.

//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>