0
私はブートストラップカルーセルに10個以上の要素を入れようとしていますが、番号10の上のサムネイルをクリックするとスライド番号1に戻ります。カルーセルに10個以上の要素を入れる方法
例およびソース：http://dinamo-abc.com/ingredientes-home/
@import url('https://fonts.googleapis.com/css?family=Raleway');
h1, h2, h3 {font-family: 'Raleway', sans-serif; text-transform: uppercase; color:#585858;}
}
.list-inline {
text-align: center;
}
.list-inline > li {
margin: 10px 5px;
padding: 0;
}
.list-inline > li:hover {
cursor: pointer;
}
.list-inline .selected img {
opacity: 1;
border-radius: 15px;
}
.list-inline img {
opacity: 0.5;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.list-inline img:hover {
opacity: 1;
}
.item > img {
/*@extend .img-responsive;*/
max-width: 100%;
height: auto;
display: block;
}
.carousel-control.left,
.carousel-control.right {
background: transparent !important;
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #169900 !important;
text-align: center;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="slider">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item" data-slide-number="0"><center><h3>Manzana<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/01.png" width="250"></center>
</div>
<div class="item" data-slide-number="1"><center><h3>Ingrediente<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/02.png" width="250"></center>
</div>
<div class="item" data-slide-number="2"><center><h3>Zanahoria<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/03.png" width="250"></center>
</div>
<div class="item" data-slide-number="3"><center><h3>Calabaza<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/04.png" width="250"></center>
</div>
<div class="item" data-slide-number="4"><center><h3>Ajo<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/05.png" width="250"></center>
</div>
<div class="item" data-slide-number="5"><center><h3>Arroz<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/06.png" width="250"></center>
</div>
<div class="item" data-slide-number="6"><center><h3>Ingrediente<br></h3>
<br> <img src="http://dinamo-abc.com/img/Big/07.png" width="250"></center>
</div>
<div class="item" data-slide-number="7"><center><h3>Cebolla<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/08.png" width="250"></center>
</div>
<div class="item" data-slide-number="8"><center><h3>Ingrediente<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/09.png" width="250"></center>
</div>
<!-- //End Fila 1 - Star Fila 2-->
<div class="item" data-slide-number="9"><center><h3>Ingrediente<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/10.png" width="250"></center>
</div>
<div class="item" data-slide-number="10"><center><h3>Ejote<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/11.png" width="250"></center>
</div>
<div class="item" data-slide-number="11"><center><h3>Once<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/12.png" width="250"></center>
</div>
<div class="item" data-slide-number="12"><center><h3>Flor de Calabaza<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/13.png" width="250"></center>
</div>
<div class="item" data-slide-number="13"><center><h3>Frijol<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/14.png" width="250"></center>
</div>
<div class="item" data-slide-number="14"><center><h3>Queso<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/15.png" width="250"></center>
</div>
<div class="item" data-slide-number="15"><center><h3>Aguacate<br></h3>
<br> <img src="http://dinamo-abc.com/img/Big/16.png" width="250"></center>
</div>
<div class="item" data-slide-number="16"><center><h3>Mango<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/17.png" width="250"></center>
</div>
<div class="item" data-slide-number="17"><center><h3>Ingrediente<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/18.png" width="250"></center>
</div>
<!-- //End Fila 2 - Star Fila 3-->
<div class="item" data-slide-number="18"><center><h3>Manzana<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/19.png" width="250"></center>
</div>
<div class="item" data-slide-number="19"><center><h3>Pollo<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/20.png" width="250"></center>
</div>
<div class="item" data-slide-number="20"><center><h3>Nopal<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/21.png" width="250"></center>
</div>
<div class="item" data-slide-number="21"><center><h3>Ingrediente<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/22.png" width="250"></center>
</div>
<div class="item" data-slide-number="22"><center><h3>Brócoli<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/23.png" width="250"></center>
</div>
<div class="item" data-slide-number="23"><center><h3>Champiñon<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/24.png" width="250"></center>
</div>
<div class="item" data-slide-number="24"><center><h3>Camarón<br></h3>
<br> <img src="http://dinamo-abc.com/img/Big/25.png" width="250"></center>
</div>
<div class="item" data-slide-number="25"><center><h3>Jitomate<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/26.png" width="250"></center>
</div>
<div class="item" data-slide-number="26"><center><h3>Manzana<br></h3>
<br><img src="http://dinamo-abc.com/img/Big/27.png" width="250"></center>
</div>
<!-- //End Filas -->
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-12" id="slider-thumbs">
<ul class="list-inline">
<li>
<a id="carousel-thumb-0" class="selected">
<img src="http://dinamo-abc.com/img/medium/01.png">
</a>
</li>
<li>
<a id="carousel-thumb-1">
<img src="http://dinamo-abc.com/img/medium/02.png">
</a>
</li>
<li>
<a id="carousel-thumb-2">
<img src="http://dinamo-abc.com/img/medium/03.png">
</a>
</li>
<br>
<li>
<a id="carousel-thumb-3">
<img src="http://dinamo-abc.com/img/medium/04.png">
</a>
</li>
<li>
<a id="carousel-thumb-4">
<img src="http://dinamo-abc.com/img/medium/05.png">
</a>
</li>
<li>
<a id="carousel-thumb-5">
<img src="http://dinamo-abc.com/img/medium/06.png">
</a>
</li>
<br>
<li>
<a id="carousel-thumb-6">
<img src="http://dinamo-abc.com/img/medium/07.png">
</a>
</li>
<li>
<a id="carousel-thumb-7">
<img src="http://dinamo-abc.com/img/medium/08.png">
</a>
</li>
<li>
<a id="carousel-thumb-8">
<img src="http://dinamo-abc.com/img/medium/09.png">
</a>
</li>
\t \t <br>
<li>
<a id="carousel-thumb-9">
<img src="http://dinamo-abc.com/img/medium/10.png">
</a>
</li>
<li>
<a id="carousel-thumb-10">
<img src="http://dinamo-abc.com/img/medium/11.png">
</a>
</li>
<li>
<a id="carousel-thumb-11">
<img src="http://dinamo-abc.com/img/medium/12.png">
</a>
</li>
<br>
<li>
<a id="carousel-thumb-12">
<img src="http://dinamo-abc.com/img/medium/13.png">
</a>
</li>
<li>
<a id="carousel-thumb-13">
<img src="http://dinamo-abc.com/img/medium/14.png">
</a>
</li>
<li>
<a id="carousel-thumb-14">
<img src="http://dinamo-abc.com/img/medium/15.png">
</a>
</li>
<br>
<li>
<a id="carousel-thumb-15">
<img src="http://dinamo-abc.com/img/medium/16.png">
</a>
</li>
<li>
<a id="carousel-thumb-16">
<img src="http://dinamo-abc.com/img/medium/17.png">
</a>
</li>
<li>
<a id="carousel-thumb-17">
<img src="http://dinamo-abc.com/img/medium/18.png">
</a>
</li>
<br>
<li>
<a id="carousel-thumb-18">
<img src="http://dinamo-abc.com/img/medium/19.png">
</a>
</li>
<li>
<a id="carousel-thumb-19">
<img src="http://dinamo-abc.com/img/medium/20.png">
</a>
</li>
<li>
<a id="carousel-thumb-20">
<img src="http://dinamo-abc.com/img/medium/21.png">
</a>
</li>
<br>
<li>
<a id="carousel-thumb-21">
<img src="http://dinamo-abc.com/img/medium/22.png">
</a>
</li>
<li>
<a id="carousel-thumb-22">
<img src="http://dinamo-abc.com/img/medium/23.png">
</a>
</li>
<li>
<a id="carousel-thumb-23">
<img src="http://dinamo-abc.com/img/medium/24.png">
</a>
</li>
<br>
<li>
<a id="carousel-thumb-24">
<img src="http://dinamo-abc.com/img/medium/25.png">
</a>
</li>
<li>
<a id="carousel-thumb-25">
<img src="http://dinamo-abc.com/img/medium/26.png">
</a>
</li>
<li>
<a id="carousel-thumb-26">
<img src="http://dinamo-abc.com/img/medium/27.png">
</a>
</li>
<!-- //End bloques -->
</ul>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src="http://dinamo-abc.com/ingredientes-home/js/index.js"></script>
</body>
</html>私はあなたが私を助けることを願って、事前にどうもありがとうございました。あなたはいつも親指IDから一つだけ最後のシンボルをgrabing
var id = id_selector.substr(id_selector.length -1);
が、9nth親指の後につかむために必要な2つのシンボルがすでに存在している：
こんにちは！多くのおかげで を@Artem溶液であった： 'のvar ID = id_selector.substr（id_selector.length -2）;' index.jsに とはHTMLに0を追加 '
確かに。どういたしまして！ –