Adjust the middle slide according to the proposed layout

Asked

Viewed 60 times

2

I’m trying to adjust the slides according to the proposed layout, but I’m having difficulties.

I’m using the Owl Carousel plugin, I searched some plugin ready on the internet that contains this option, but I found nothing.

Follows the layout: inserir a descrição da imagem aqui

Follows my code: Code (click here)

$('.owl-carousel.vitrine').owlCarousel({
  center: true,
  items: 3,
  loop: true,
  //autoWidth:true,
  margin: 10,
  responsive: {
    600: {
      items: 3
    }
  }
});
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
  font-family: 'Montserrat', sans-serif;
}

.divider {
  height: 3px;
  display: block;
  margin: 30px auto;
  background: #970202;
}

#produtos {
  padding: 130px 0;
}

#produtos .produto {
  background: #dcdcdc;
  margin: 10px 0;
}

#produtos .produto .img_produto {
  width: 100%;
}

#produtos .divider {
  height: 6px;
  width: 100%;
}

#produtos .divider.top {
  margin-top: -6px;
}

#produtos .divider.bottom {
  margin-bottom: -6px;
}

#produtos .produto h3 {
  color: #970202;
  margin: 0;
  display: block;
}

#produtos .produto .titulo {
  margin-top: 28px;
  font-size: 32px;
  font-size: 2rem;
}

#produtos .produto .sub_titulo {
  text-align: center;
  font-weight: 700;
  margin-bottom: 36px;
  font-size: 35px;
  font-size: 2.1875rem;
}

#produtos .produto .desc_produto {
  margin: 25px 0;
  display: block;
  padding: 0;
}

#produtos .produto .btn_orcamento {
  color: #fff;
  width: 100%;
  padding: 18px 0;
  font-size: 19px;
  font-size: 1.1875rem;
  background: #000;
  display: block;
}

#produtos .produto .btn_orcamento:hover {
  color: #fff;
  text-decoration: none;
}

#produtos .col-3.produto {
  height: fit-content;
}

#produtos .produto.center {
  margin-top: -45px;
  -ms-flex: 0 0 33.333333%!important;
  flex: 0 0 33.333333%!important;
  max-width: 33.333333%!important;
}

.center .produto {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
}

#produtos .center .row .col-2 {
  -ms-flex: 0 0 25%!important;
  flex: 0 0 25%!important;
  max-width: 25%!important;
}

#produtos .center .row .col-8 {
  -ms-flex: 0 0 50%!important;
  flex: 0 0 50%!important;
  max-width: 50%!important;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://www.metaferragens.com.br/assets/js/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://www.metaferragens.com.br/assets/css/owl.carousel.css">

<section id="produtos">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <div class="d-none d-md-block col-md-1"></div>

      <div class="col-10 owl-carousel vitrine owl-theme">

        <div class="col-12 produto">
          <div class="row">
            <!-- CABECALHO -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider top"></span>
            </div>
            <div class="col-2"></div>

            <div class="col-2"></div>
            <div class="col-8">
              <h3 class="titulo">churrasqueira</h3>
              <h3 class="sub_titulo">ROTATIVA</h3>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CABEÇALHO -->

            <!-- CORPO -->
            <div class="col-12 p-0">
              <img src="https://metaferragens.com.br/produto1.png" class="img-fluid img_produto">
            </div>

            <div class="col-2"></div>
            <div class="col-8 text-center">
              <p class="desc_produto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, seLorem ipsum dolor sit</p>
              <a href="#" class="btn_orcamento">ORÇAMENTO</a>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CORPO -->

            <!-- RODAPÉ -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider bottom"></span>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO RODAPÉ -->
          </div>
        </div>
        <div class="col-12 produto">
          <div class="row">
            <!-- CABECALHO -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider top"></span>
            </div>
            <div class="col-2"></div>

            <div class="col-2"></div>
            <div class="col-8">
              <h3 class="titulo">churrasqueira</h3>
              <h3 class="sub_titulo">ROTATIVA</h3>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CABEÇALHO -->

            <!-- CORPO -->
            <div class="col-12 p-0">
              <img src="https://metaferragens.com.br/produto1.png" class="img-fluid img_produto">
            </div>

            <div class="col-2"></div>
            <div class="col-8 text-center">
              <p class="desc_produto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, seLorem ipsum dolor sit</p>
              <a href="#" class="btn_orcamento">ORÇAMENTO</a>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CORPO -->

            <!-- RODAPÉ -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider bottom"></span>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO RODAPÉ -->
          </div>
        </div>
        <div class="col-12 produto">
          <div class="row">
            <!-- CABECALHO -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider top"></span>
            </div>
            <div class="col-2"></div>

            <div class="col-2"></div>
            <div class="col-8">
              <h3 class="titulo">churrasqueira</h3>
              <h3 class="sub_titulo">ROTATIVA</h3>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CABEÇALHO -->

            <!-- CORPO -->
            <div class="col-12 p-0">
              <img src="https://metaferragens.com.br/produto1.png" class="img-fluid img_produto">
            </div>

            <div class="col-2"></div>
            <div class="col-8 text-center">
              <p class="desc_produto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, seLorem ipsum dolor sit</p>
              <a href="#" class="btn_orcamento">ORÇAMENTO</a>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CORPO -->

            <!-- RODAPÉ -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider bottom"></span>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO RODAPÉ -->
          </div>
        </div>

      </div>

      <div class="d-none d-md-block col-md-1"></div>
    </div>
  </div>
</section>

I appreciate the help!

jquery front-end owl-carousel

1 answer

3


Dude I made an adaptation with transform and transition, until it turned out pretty cool, you might have to adjust a padding or margin to adjust it in its final layout.

inserir a descrição da imagem aqui

Follow the code referring to the image above:

$('.owl-carousel.vitrine').owlCarousel({
  center: true,
  items: 3,
  loop: true,
  //autoWidth:true,
  margin: 10,
  responsive: {
    600: {
      items: 3
    }
  }
});
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
  font-family: 'Montserrat', sans-serif;
}

.divider {
  height: 3px;
  display: block;
  margin: 30px auto;
  background: #970202;
}

#produtos {
  padding: 130px 0;
}

#produtos .produto {
  background: #dcdcdc;
  margin: 10px 0;
}

#produtos .produto .img_produto {
  width: 100%;
}

#produtos .divider {
  height: 6px;
  width: 100%;
}

#produtos .divider.top {
  margin-top: -6px;
}

#produtos .divider.bottom {
  margin-bottom: -6px;
}

#produtos .produto h3 {
  color: #970202;
  margin: 0;
  display: block;
}

#produtos .produto .titulo {
  margin-top: 28px;
  font-size: 32px;
  font-size: 2rem;
}

#produtos .produto .sub_titulo {
  text-align: center;
  font-weight: 700;
  margin-bottom: 36px;
  font-size: 35px;
  font-size: 2.1875rem;
}

#produtos .produto .desc_produto {
  margin: 25px 0;
  display: block;
  padding: 0;
}

#produtos .produto .btn_orcamento {
  color: #fff;
  width: 100%;
  padding: 18px 0;
  font-size: 19px;
  font-size: 1.1875rem;
  background: #000;
  display: block;
}

#produtos .produto .btn_orcamento:hover {
  color: #fff;
  text-decoration: none;
}

#produtos .col-3.produto {
  height: fit-content;
}

#produtos .produto.center {
  margin-top: -45px;
  -ms-flex: 0 0 33.333333%!important;
  flex: 0 0 33.333333%!important;
  max-width: 33.333333%!important;
}

.center .produto {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
}

#produtos .center .row .col-2 {
  -ms-flex: 0 0 25%!important;
  flex: 0 0 25%!important;
  max-width: 25%!important;
}

#produtos .center .row .col-8 {
  -ms-flex: 0 0 50%!important;
  flex: 0 0 50%!important;
  max-width: 50%!important;
}

/* classes custom */
.owl-item.active {
  transition: all 500ms;
}
.owl-item.active.center {
  transform: scale(1.1);
  transform-origin: center;
  margin-top: -15px !important;
  z-index: 100;
}
.owl-carousel .owl-stage-outer {
  padding: 55px 0 !important;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://www.metaferragens.com.br/assets/js/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://www.metaferragens.com.br/assets/css/owl.carousel.css">

<section id="produtos">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <div class="d-none d-md-block col-md-1"></div>

      <div class="col-10 owl-carousel vitrine owl-theme">

        <div class="col-12 produto">
          <div class="row">
            <!-- CABECALHO -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider top"></span>
            </div>
            <div class="col-2"></div>

            <div class="col-2"></div>
            <div class="col-8">
              <h3 class="titulo">churrasqueira</h3>
              <h3 class="sub_titulo">ROTATIVA</h3>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CABEÇALHO -->

            <!-- CORPO -->
            <div class="col-12 p-0">
              <img src="https://metaferragens.com.br/produto1.png" class="img-fluid img_produto">
            </div>

            <div class="col-2"></div>
            <div class="col-8 text-center">
              <p class="desc_produto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, seLorem ipsum dolor sit</p>
              <a href="#" class="btn_orcamento">ORÇAMENTO</a>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CORPO -->

            <!-- RODAPÉ -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider bottom"></span>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO RODAPÉ -->
          </div>
        </div>
        <div class="col-12 produto">
          <div class="row">
            <!-- CABECALHO -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider top"></span>
            </div>
            <div class="col-2"></div>

            <div class="col-2"></div>
            <div class="col-8">
              <h3 class="titulo">churrasqueira</h3>
              <h3 class="sub_titulo">ROTATIVA</h3>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CABEÇALHO -->

            <!-- CORPO -->
            <div class="col-12 p-0">
              <img src="https://metaferragens.com.br/produto1.png" class="img-fluid img_produto">
            </div>

            <div class="col-2"></div>
            <div class="col-8 text-center">
              <p class="desc_produto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, seLorem ipsum dolor sit</p>
              <a href="#" class="btn_orcamento">ORÇAMENTO</a>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CORPO -->

            <!-- RODAPÉ -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider bottom"></span>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO RODAPÉ -->
          </div>
        </div>
        <div class="col-12 produto">
          <div class="row">
            <!-- CABECALHO -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider top"></span>
            </div>
            <div class="col-2"></div>

            <div class="col-2"></div>
            <div class="col-8">
              <h3 class="titulo">churrasqueira</h3>
              <h3 class="sub_titulo">ROTATIVA</h3>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CABEÇALHO -->

            <!-- CORPO -->
            <div class="col-12 p-0">
              <img src="https://metaferragens.com.br/produto1.png" class="img-fluid img_produto">
            </div>

            <div class="col-2"></div>
            <div class="col-8 text-center">
              <p class="desc_produto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, seLorem ipsum dolor sit</p>
              <a href="#" class="btn_orcamento">ORÇAMENTO</a>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO CORPO -->

            <!-- RODAPÉ -->
            <div class="col-2"></div>
            <div class="col-8">
              <span class="divider bottom"></span>
            </div>
            <div class="col-2"></div>
            <!-- FIM DO RODAPÉ -->
          </div>
        </div>

      </div>

      <div class="d-none d-md-block col-md-1"></div>
    </div>
  </div>
</section>

  • 1

    Thank you so much for helping Ugo! Tu manja ein!! Congratulations.

  • @Lucas me que agradeço rss. This is the kind of question I like to solve, because the Ctrl+C/V class never answers these things....

Browser other questions tagged jquery front-end owl-carousel

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