Сова Карусель: Растянуть изображение на внутренний столбец визуального композитора - PullRequest
Новая
       10

Сова Карусель: Растянуть изображение на внутренний столбец визуального композитора

0 голосов
/ 02 июля 2018

Я хочу добавить «Сова карусель» для моей витрины.

Я использую визуальный компоновщик для конструктора страниц, есть 2 столбца для раздела продукта, я хочу растянуть изображение продукта до внутреннего столбца, вы можете проверить мой дизайн ниже.

Stretch Image Column

JS: 

$('.wrap-product-home').owlCarousel({
    loop:false,
    margin:50,
    items:1,
    autoWidth:true,
    singleItem:true,
    smartSpeed:700,
    nav:true,
    navText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"]

});

HTML: 

<div class="portico-product-home">
   <?php
   $params = array(
             'posts_per_page' => 5, 
             'post_type' => 'product',
             'order'=>'ASC'
             );
   $wc_query = new WP_Query($params);
   ?>
   <div class="wrap-product-home owl-carousel">
        <?php if ($wc_query->have_posts()) : ?>
        <?php while ($wc_query->have_posts()) :
                   $wc_query->the_post(); ?>

        <div class="portico-items">
          <div class="img-product-portico">
             <img src="<?php the_post_thumbnail_url(); ?>"/>
               </div>
                <div class="product-box-portico">
                  <div class="title-product">
                  <h4>
                    <?php the_title(); ?>
                </h4>
              </div>
              <div class="desc-product">
                  <p><?php the_excerpt(); ?></p>
              </div>
              <div class="buy-it-now">
                  <div class="btn-cta">
                      <a href="<?php the_permalink(); ?>" class="btn-buy-it">BUY IT NOW <i class="vc_btn3-icon fa fa-long-arrow-right"></i></a>
                  </div>
              </div>  
            </div>
        </div>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
        <?php else:  ?>

        <div class="no-product-txt">
            <p><?php _e( 'No Products' ); ?></p>  
        </div>

        <?php endif; ?>
     </div>
</div>

CSS: 

.portico-items {
    position:  relative;
}

.buy-product-row {
    margin-bottom: -90px;
}

.wrap-product-home .owl-stage-outer {
    padding: 40px 20px 10px;
}

Вы можете посмотреть демонстрацию, которую я сделал здесь

...