0

Olá, Estou utilizando um Flexslider para fazer a listagem de imagens da página, porém gostaria de saber se há a opção de listar as imagens do carousel verticalmente, no momento, elas estão passando pela horizontal.

Segue o que eu necessito fazer:

inserir a descrição da imagem aqui

Pode perceber que se eu passar as imagens menores pela seta, elas devem rolar verticalmente.

Porém quando utilizo o flex, ele lista as imagens menores horizontalmente, segue imagem:

inserir a descrição da imagem aqui

Alguém já precisou fazer isto ou tem alguma dica de como posso fazer para as imagens menores ficarem com limitador de duas e aumentar para baixo ao invés de para os lados?

Segue link do script que estou utilizando:

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

Segue código:

 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>

1 Resposta 1

0

Consegui fazendo de outra forma, apenas deixei como fixa o transition que o flexslider faz e setei altura máxima e dei rolagem nas thumbs, criando uma barra de rolagem vertical nas imagens. Segue código:

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

Como ficou:

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .