-2
このサークルの上にテキスト付きのブートストラップカルーセルを作成したいときは、毎回1つのサークルが右のサークルを選択/ホバウンドし、その下の右の線が表示されます。次のようなもの: ブートストラップスライダ/カルーセル
この問題を解決するにはどうすればよいですか?
このサークルの上にテキスト付きのブートストラップカルーセルを作成したいときは、毎回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>
あなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されます。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします(http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –