2016-07-22 171 views
3

我使用的Flexslider图像列表,但我不知道是否有选项垂直列出旋转木马的图像。Flexslider - 垂直缩略图

这就是我需要做的:

enter image description here

你可以看到,如果我移动箭头较小的图像,他们必须垂直滚动。

然而,使用柔性的时候,它会列出较小的图像水平,如下图:

enter image description here

有人曾经需要做到这一点或对我如何能为更小的图像始终做任何提示与两个限制器,而不是侧身增加下降?

按照我使用的链接脚本:

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> 
+0

我只是想告诉你。 firefox将于8月关闭Flash支持。所以要小心使用flex。 – eronax59

回答

1

解决了,只是我留下来保护过渡到flexslider做和我配置最大高度,我滚动拇指。下面的代码:

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

如何做的:

enter image description here

相关问题