代码之家  ›  专栏  ›  技术社区  ›  Cesar Ortiz ElPatox

如何在旋转木马中放置超过十个元素

carousel html jquery
  •  0
  • Cesar Ortiz ElPatox  · 技术社区  · 9 年前

    我试图将超过十个元素放在引导转盘中,但当我单击数字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>

		<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 回复  |  直到 9 年前
        1
  •  0
  •   Artem Y.    9 年前

    显然,这个错误是由于索引中的拇指控制而出现的。js文件: 

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

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

    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    9 月前
    Dr.0000FF  ·  jQuery按钮点击不显示/隐藏内容
    10 月前
    user28928120  ·  如何在jquery中选择所有类?
    10 月前
    LauraNMS  ·  如何使用Waypoints js实现粘性元素和偏移量
    10 月前
    Eliable  ·  使点击计数器和进度条协同工作
    11 月前
    mlri  ·  从不同的onclick事件执行相同的javascript函数
    11 月前
    Cymro  ·  如何将jquery$(this)与$(document).keyup一起使用
    11 月前
    Jack Maessen  ·  在处理程序上使用时如何获取输入类型
    11 月前
    BlueDogRanch  ·  使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)
    11 月前
    Jameel  ·  Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)
    11 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号