如何在旋转木马上放十几个元素

时间：2016-11-11 18:21:08

标签： jquery html carousel

我正在尝试在引导旋转木马中放置十个以上的元素，但当我点击十号上方的缩略图时，它会将我返回到第一个幻灯片。

示例和来源：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>

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

我希望你能帮助我，并且事先非常感谢你。

1 个答案:

答案 0 :(得分：0)

显然，由于index.js文件中的拇指控制而出现此错误：

var id = id_selector.substr(id_selector.length -1);

你总是只从拇指id中抓取最后一个符号，但是在第9个拇指之后，已经有2个符号需要抓取。 可以通过将拇指ID重命名为静态符号长度的名称来修复此错误。

相关问题
最新问题