Question

我正在使用Flexslider进行图像列表，但我想知道是否可以选择垂直列出轮播的图像。

这是我需要做的事情：

您可以看到，如果我按箭头移动图像较小，则必须垂直滚动。

但是，使用flex时，它会在图像后面水平列出较小的图像：

有人曾经需要这样做或有任何关于如何为较小的图像保留两个限制器并增加而不是侧身的提示吗？

按照以下链接脚本使用：

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

怎么做：

Flexslider - 垂直缩略图

1 个答案: