フレックススライダー - 縦にサムネイル

Question

イメージリストにフレックススライダーを使用していますが、カルーセルの画像を垂直方向にリストするオプションがあるのだろうかと思います。

は、ここで私は何をする必要があるかです：

あなたは、私が矢印によって小さい画像を移動した場合、彼らは垂直方向にスクロールしなければならないことがわかります。

フレックスを使用している場合しかし、それは画像以下、水平に小さい画像を示しています。今までにこれを行うか、小さい画像が滞在のために私が行うことができますどのように上の任意のヒントを持っている必要

誰か2つのリミッタを使用し、横方向ではなく下方向に増加しますか？

私が使用しているリンクのスクリプトを実行します：

http://flexslider.woothemes.com/thumbnail-slider.html

次のコード：

vm.flex_interna = function(){ 
     $('#carousel').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: false, 
      direction: "vertical", 
      slideshow: false, 
      itemWidth: 210, 
      itemMargin: 5, 
      asNavFor: '#slider' 
     }); 
     $('#slider').flexslider({ 
      animation: "fade", 
      controlNav: false, 
      animationLoop: false, 
      slideshow: false, 
      sync: "#carousel" 
     }); 
     } 
    vm.flex_interna(); 

HTML：解決済み

<div class="flex_conteudo"> 
    <div class="col-lg-6"> 
    <div id="carousel" class="flexslider"> 
     <ul class="slides"> 
     <li> 
      <img src="app/template/img/conteudo.png" /> 
     </li> 
     <li> 
      <img src="app/template/img/conteudo.png" /> 
     </li> 
     <li> 
      <img src="app/template/img/conteudo.png" /> 
     </li> 
     <li> 
      <img src="app/template/img/conteudo.png" /> 
     </li> 
     <!-- items mirrored twice, total of 12 --> 
    </ul> 
</div> 
</div> 
     <div class="col-lg-6"> 
     <div id="slider" class="flexslider"> 
      <ul class="slides"> 
      <li> 
       <img src="app/template/img/conteudo.png" /> 
      </li> 
      <li> 
       <img src="app/template/img/conteudo.png" /> 
      </li> 
      <li> 
       <img src="app/template/img/conteudo.png" /> 
      </li> 
      <li> 
       <img src="app/template/img/conteudo.png" /> 
      </li> 
      <!-- items mirrored twice, total of 12 --> 
     </ul> 
    </div> 
</div> 

</div> 

Answer 1

を、ちょうど私が保護するために左にflexslider doに移行し、最大の高さに設定して、親指をスクロールします。次のコード：

HTML：

<div class="flex_conteudo"> 
    <div class="col-lg-2 col-md-2 col-xs-12 col-sm-12"></div> 
    <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 no_right"> 
     <div class="posicionador_flex_interno"> 
     <div class="redes_sociais_interna"> 
      <a href="" ng-click="vm.facebook(baseurl + 'conteudo/' + slug)"> 
       <div class="img-circle compartilhar_icones"> 
        <i class="fa fa-facebook" aria-hidden="true"></i> 
       </div> 
      </a> 
      <a href="" ng-click="vm.twitter(baseurl + 'conteudo/' + slug, nome, 'o2 Multicomunicação')"> 
       <div class="img-circle compartilhar_icones"> 
        <i class="fa fa-twitter" aria-hidden="true"></i> 
       </div> 
      </a> 
      <a href="#" target="_blank"> 
       <div class="img-circle compartilhar_icones terceiro"> 
        <i class="fa fa-linkedin icone_linkedin" aria-hidden="true"></i> 
       </div> 
      </a> 
     </div> 
     <div class="imagem_borda"></div> 
     <div class="custom-navigation"> 
      <a href="#" class="flex-prev prev_img hvr-wobble-horizontal"></a> 
      <div class="custom-controls-container"></div> 
      <a href="#" class="flex-next next_img hvr-wobble-horizontal"></a> 
     </div> 
    </div> 
    <div id="carousel" class="flexslider"> 
     <ul class="slides slides_carousel"> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
     <li> 
      <div class="cem_auto img_li" style="background-image: url('app/template/img/interna_conteudo.png');"> 
      </div> 
     </li> 
    </ul> 
</div> 
</div> 
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no_left"> 
    <div id="slider" class="flexslider"> 
     <ul class="slides"> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
      <li> 
       <div class="auto_cem img_li_maior" style="background-image: url('app/template/img/interna_conteudo.png');"> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 

CSS：

.flex_conteudo{ 
    float: left; 
    width: 100%; 
    margin-bottom: 70px; 
    .slides_carousel{ 
     width: 100%!important; 
     max-height: 495px!important; 
     overflow: auto; 
     margin-top: 173px; 
     transition-duration: 0s; transform: translate3d(0px, 0px, 0px)!important; 
     li{ 
      cursor: pointer; 
      .img_li{ 
       width: 100%; 
       height: 165px; 
       -webkit-transition: all 0.5s; 
       transition: all 0.5s; 
      } 
      &:hover{ 
       .img_li{ 
        opacity: 0.5; 
        -webkit-transition: all 0.5s; 
        transition: all 0.5s; 
       } 
      } 
     } 
    } 
    .img_li_maior{ 
     width: 100%; 
     height: 670px; 
    } 
} 

ましたか：私はちょうどあなたに伝えたい