animare slider con select option

[Giuseppe1987]

Salve a tutti volevo chiedere se era possibile animare una slider con le option di una select, cioè ho una slider di bootstrap vorrei che invece dei cursori sotto, la slide cambiasse immagine con le option di una select è possibile fare una cosa del genere ?
Grazie a tutti

<div id="myCarousel" class="carousel slide" data-ride="carousel">              
  <!-- Indicators -->              
  <ol class="carousel-indicators">                
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>                
    <li data-target="#myCarousel" data-slide-to="1"></li>                
    <li data-target="#myCarousel" data-slide-to="2"></li>                
    <li data-target="#myCarousel" data-slide-to="3"></li>              
  </ol>                          
  <!-- Wrapper for slides -->              
  <div class="carousel-inner" role="listbox">                
     <div class="item active">                  
       <img class="center-block" src="img/slideInfo1.png">                
     </div>                
     <div class="item">                  
       <img class="center-block" src="img/slideInfo2.png">                 
     </div>                            
     <div class="item">                  
       <img class="center-block" src="img/slideInfo3.png">              
     </div>                
     <div class="item">                  
        <img class="center-block" src="img/slideInfo4.png">              
     </div>             
   </div>        
</div>

<select class="form-control">    
   <option>Cerca per File</option>    
   <option>Prima</option>    
   <option>Seconda</option>    
   <option>Terza</option>
</select>    

[m4rko80]

Il modo più semplice per farlo è nascondere da css la barra del carousel indicator e sul change della select con javascript ovviamente simulare il click rispettivo di questi.

Avrai per esempio ogni option con value = al data-slide-to corrispondente, al change leggerai il valore e farai cliccare sul rispettivo.

$(function(){
 $('#id-tua-select').on('change',function(){
    $('.carousel-indicators li[data-slite-to="'+$(this).val()+'"]').click();
});
});

Così dovrebbe già andare, non ho provato.
Per farlo ancora più semplice potresti creare N option quanti carousel-indicator( i dot delle varie slide) presenti e basarti semplicemente sull indice del dom delle option che sarà uguale a quello del carousel-indicator.

[Giuseppe1987]

Il modo più semplice per farlo è nascondere da css la barra del carousel indicator e sul change della select con javascript ovviamente simulare il click rispettivo di questi.

Avrai per esempio ogni option con value = al data-slide-to corrispondente, al change leggerai il valore e farai cliccare sul rispettivo.

$(function(){
 $('#id-tua-select').on('change',function(){
    $('.carousel-indicators li[data-slite-to="'+$(this).val()+'"]').click();
});
});

Così dovrebbe già andare, non ho provato.
Per farlo ancora più semplice potresti creare N option quanti carousel-indicator( i dot delle varie slide) presenti e basarti semplicemente sull indice del dom delle option che sarà uguale a quello del carousel-indicator.

Grazie per la risposta proverò la tua soluzione e ti farò sapere
al momento avevo optato per questa alternativa ma non mi convinceva volendo sfruttare la slider di bootstrap con il responsive annesso.

  <div class="container-outer">
    <div class="container-inner"> 
      <!-- Your images over here -->
      <div id="1" class="w1280"> <img src="img/001.jpg" class="img-responsive" /> </div>
      <div id="2" class="w1280"> <img  src="img/002.jpg" class="img-responsive" /> </div>
      <div id="3" class="w1280"> <img src="img/003.jpg" class="img-responsive" /> </div>
      <div id="4" class="w1280"> <img src="img/004.jpg" class="img-responsive" /> </div>
      <div id="5" class="w1280"> <img  src="img/005.jpg" class="img-responsive" /> </div>
      <div id="6" class="w1280"> <img src="img/006.jpg" class="img-responsive" /> </div>
      <div id="7" class="w1280"> <img src="img/007.jpg" class="img-responsive" /> </div>
      <div id="8" class="w1280"> <img src="img/008.jpg" class="img-responsive" /> </div>
      <div id="9" class="w1280"> <img src="img/009.jpg" class="img-responsive" /> </div>
      <div id="10" class="w1280"> <img src="img/010.jpg" class="img-responsive" /> </div>
      <div id="11" class="w1280"> <img src="img/011.jpg" class="img-responsive" /> </div>
      <div id="12" class="w1280"> <img src="img/012.jpg" class="img-responsive" /> </div>
      <div id="13" class="w1280"> <img src="img/013.jpg" class="img-responsive" /> </div>
    </div>
  </div>
  <div class="text-center"> <a href="#1">capitolo 1</a> <a href="#2">capitolo 2</a> <a href="#3">capitolo 3</a> <a href="#4">capitolo 4</a> <a href="#5">capitolo 5</a> <a href="#6">capitolo 6</a> <a href="#7">capitolo 7</a> <a href="#8">capitolo 8</a> <a href="#9">capitolo 9</a> <a href="#10">capitolo 10</a> <a href="#11">capitolo 11</a> <a href="#12">capitolo 12</a> <a href="#13">capitolo 13</a> </div>
  <hr style="margin-left:20px; margin-right:20px;">
  <div class="container">
    <div class="searchBoxInfo">
      <div class="row">
        <h1 class="mainTitle text-center">Cerca</h1>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <select id="info" class="form-control">
            <option value="1"><a href="#1">Prima</a></option>
            <option value="2"><a href="#2">Seconda</a></option>
            <option value="3"><a href="#3">Terza</a></option>
            <option value="4"><a href="#4">Quarta</a></option>
            <option value="5"><a href="#5">Quinta</a></option>
            <option value="6"><a href="#6">Sesta</a></option>
            <option value="7"><a href="#7">Settima</a></option>
            <option value="8"><a href="#8">Ottava</a></option>
            <option value="9"><a href="#9">Nona</a></option>
            <option value="10"><a href="#10">Decima</a></option>
            <option value="11"><a href="#11">Undicesima</a></option>
            <option value="12"><a href="#12">Dodicesima</a></option>
            <option value="13"><a href="#13">Tredicesima</a></option>
          </select>
        </div>
      </div>
      <div class="row">
        <button type="button" class="searchButton">Cerca</button>
      </div>
    </div>
  </div>

$(function(){
   $("#info").change(function(){
    var data= $(this).val();
    window.location.href = "#" +data;
   })
});

.container-outer {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: auto;
    max-width: 1280px;
    margin: 0 auto;
    display: block;
}
.w1280 {
    position: relative;
    display: block;
    float: left;
    width: auto;
    max-width: 1280px;
}
.container-inner {
    width: 16700px;
}