放大猫头鹰轮播中的活动中心项不起作用

时间:2018-08-15 22:27:32

标签: html css web carousel owl-carousel

我已经看到了很多与此主题有关的问题,但是没有一个问题可以解决我的问题,所以我不认为这会是“重复的”。

所以,我正在尝试放大Owl Carousel 2中间的项目 先前问题提供的答案不能解决我的问题,因此这是我的代码

  <div class="owl-carousel ftco-owl">

          <div class="item" style="text-align:center;">
            <div class="media d-block mb-4 text-center ftco-media ftco-animate border-0" style="background-image:url(images/events/1.png);text-align:center;">

              <div class="media-body p-md-5 p-4" style="text-align:center;">
              <div style="background:rgba(245,245,245,0.9);padding:15px;height:350px;text-align:center;">
              <div style="border-style:solid;border-width:1px;border-color:#af6e4c;padding-top:150px;height:315px;text-align:center;">
                <h5 style="color:#af6e4c">Cocktail</h5>
                </div>
                </div>

              </div>
            </div>
          </div>

还有其他项目,我只是复制了一个。

我的JS代码

    var carousel = function() {
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        stagePadding: 5,
        center:true,


        navText: ['<span class="icon-chevron-left">', '<span class="icon-chevron-right">'],
        responsive:{
            0:{
                items: 1
            },
            600:{
                items: 2
            },
            1000:{
                items: 3
            }
        }
    });
};
carousel();

我的CSS无法正常工作

.owl-item.active.center{transform: scale(1.3);}

谢谢您的帮助

0 个答案:

没有答案