Flexslider

Question

我正在使用 Flexslider 作为图像列表，但我想知道是否有垂直列出轮播图像的选项。

这是我需要做的：

你可以看到，如果我用箭头将图像变小，它们必须垂直滚动。

但是，当使用 flex 时，它会水平列出较小的图像，如下图：

有人曾经需要这样做，或者有任何关于如何让较小的图像保持两个限制器并向下而不是横向增加的提示吗？

遵循我正在使用的 link 脚本：

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 并配置最大高度并滚动拇指。以下代码：

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

怎么样：

Flexslider - 垂直缩略图

Flexslider - Thumbnails Vertically

html

css

jquery