首页 文章

2个不同的猫头鹰旋转木马滑块在一页上具有不同的宽度

提问于
浏览
0

我最近遇到了猫头鹰旋转木马 . 我尝试在页面中使用2个不同宽度的滑块 .

我正在使用bootstrap网格系统 . 我使用Owl Carousel遇到了两个主要问题:

  • 使用 Container-fluid 而不是Owl Carousel的 container 时,左侧和右侧显示另一个图像的一小部分 . 我该如何处理?

猫头鹰Carousel jQuery:

$('#main-slider').owlCarousel({
            loop:true,
            nav: true,
            autoplay:true,
            lazyLoad:true,
            singleItem: true,
            slideSpeed : 300,
            paginationSpeed : 400,
            items : 1, 
            itemsDesktop : false,
            itemsDesktopSmall : false,
            itemsTablet: false,
            itemsMobile : false,
            dots: false,
            responsiveClass:true,
            navText: ["←","→"]
        });

猫头鹰轮播的HTML:

<div class="container-fluid">
<div id="main-slider" class="owl-carousel owl-theme">
<img  class=" " src="./images/slider-banner01.jpg" alt="" />
<img  class=" " src="./images/slider-banner02.jpg" alt="" />
<img  class=" " src="./images/slider-banner03.jpg" alt="" />
<img  class=" " src="./images/slider-banner04.jpg" alt="" />
<img  class=" " src="./images/slider-banner05.jpg" alt="" />
<img  class=" " src="./images/slider-banner06.jpg" alt="" />
</div>
</div>
  • 我想要一个 Banner 滑块和另一个滑块来显示我想要放置在 col-md-4 类引导程序中的Brand徽标 . 但是,即使我将它放在 col-md-4 下,滑块仍然会占用整个设备的宽度 .

猫头鹰Carousel jQuery:

$('#main-brand-slider').owlCarousel({
            loop:true,
            margin:10,
            nav:false,
            autoplay:true,
            lazyLoad:true,
            items : 1, 
            itemsDesktop : false,
            itemsDesktopSmall : false,
            itemsTablet: false,
            itemsMobile : false,
            dots: false,
        });

品牌滑块的HTML:

<div class="col-md-4">
<div class="section-text text-center">
<h3>Brands</h3>
<div class="container">
<div id="main-brand-slider" class="owl-carousel owl-theme">
<img class="img-responsive" src="./images/brandsSlider1.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider2.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider3.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider4.jpg" alt="" />
<img class="img-responsive" src="./images/brandsSlider5.jpg" alt="" />
</div>
</div>
</div>
</div>

2 回答

  • 0

    您需要使用 container-fluid 添加 padding-left:0px;padding-right:0px; ,因为 container-fluid 具有默认 padding-left:15px;padding-right:15px;

    Brand Slider Issue
    您需要删除 col-md-4 中的 container 类,因为 container 具有默认 width:1170px;

  • 0

    在这里你找到一个解决方案https://jsfiddle.net/dpnta0z9/

    $('#main-slider').owlCarousel({ 
    	loop:true, 
      nav: true, 
      autoplay:true, 
      lazyLoad:true, 
      singleItem: true, 
      slideSpeed : 300, 
      paginationSpeed : 400, 
      items : 2, 
      itemsDesktop : false, 
      itemsDesktopSmall : false, 
      itemsTablet: false, 
      itemsMobile : false, 
      dots: false, 
      responsiveClass:true, 
      navText: ["←","→"] 
    });
    
    $('#main-brand-slider').owlCarousel({ loop:true, margin:10, nav:false, autoplay:true, lazyLoad:true, items : 1, itemsDesktop : false, itemsDesktopSmall : false, itemsTablet: false, itemsMobile : false, dots: false, });
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
    <div class="container-fluid">
      <div class="row">
        
        <div class="col-md-12">
          <div id="main-slider" class="owl-carousel owl-theme">
            <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
            <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
            <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
            <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
            <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
            <img  class="item" src="http://via.placeholder.com/350x150" alt="" />
          </div>
          
        </div>
        
        <div class="col-md-4">
          <div class="section-text text-center">
            <h3>Brands</h3>
            <div id="main-brand-slider" class="owl-carousel owl-theme">
              <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
              <img class="img-responsive" src="http://via.placeholder.com/350x150g" alt="" />
              <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
              <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
              <img class="img-responsive" src="http://via.placeholder.com/350x150" alt="" />
            </div>
          </div>
        </div>
        
      </div>
    
    </div>
    

    希望这会帮助你 .

相关问题