Flexslider - Thumbnails Vertically

Asked

Viewed 131 times

1

Hello, I’m using a Flexslider to do the listing of page images, but I wonder if there is the option to list the Carousel images vertically, at the moment, they are going through the horizontal.

Follow what I need to do:

inserir a descrição da imagem aqui

You can see that if I run the smaller images through the arrow, they should scroll vertically.

But when I use flex, it lists the smaller images horizontally, follows image:

inserir a descrição da imagem aqui

Has anyone ever needed to do this or has any hint as to how I can get smaller images to limit two and zoom down instead of sideways?

Follow the link of the script I’m using:

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

Follows code:

 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 answer

0


I managed to do otherwise, I just left as fixed the Transition that the flexslider makes and I set maximum height and rolled in the Thumbs, creating a vertical scroll bar in the images. Follows code:

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

As it turned out:

inserir a descrição da imagem aqui

Browser other questions tagged

You are not signed in. Login or sign up in order to post.