1. Zuhause
  2. Frage und Antwort
  3. Wie man mehr als zehn Elemente in ein Karussell einfügt

Wie man mehr als zehn Elemente in ein Karussell einfügt

2016-11-11 3 views
0

Ich versuche, mehr als zehn Elemente in ein Bootstrap-Karussell zu setzen, aber wenn ich auf das Miniaturbild über der Zahl zehn klicke, kehrt ich zu Folie Nummer eins zurück.Wie man mehr als zehn Elemente in ein Karussell einfügt

Beispiel und Quelle: 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>

Ich hoffe, dass Sie mir helfen können, und im Voraus vielen Dank.

Quelle

2016-11-11 Cesar Ortiz ElPatox

Antwort

0

Offensichtlich scheint dieser Fehler wegen Daumensteuerung in Ihrem index.js Datei:

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

Sie immer nur ein letztes Symbol von Daumen id grabing, aber nach 9nth Daumen gibt es bereits zwei Symbole greifen benötigt. Dieser Fehler kann behoben werden, indem Sie Ihre thumb IDs in Name mit statischer Symbollänge umbenennen.

Quelle

2016-11-11 19:25:57

+0

Hallo! Vielen Dank @Artem Die Lösung war: 'var id = id_selector.substr (id_selector.length -2);' in den index.js und fügen Sie eine 0 im HTML '

...
...
' & '
    • ' ** Erstaunlich;) ** –

    +0

    der Tat. Bitte schön! –

    Verwandte Themen

     Verwandte Themen