Flexslider - 세로로 썸네일

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

어떻게했다 :

난 그냥 말하고 싶은