Question

我有一个jQuery Cycle 2 Slider滑块here，我需要将它放在页面中。

我尝试了几种不同的方法，但似乎没有任何效果。

这是html：

<div class="slider">
  <div id=outside>

    <!-- slideshow -->
    <div class="cycle-slideshow" 
        data-cycle-fx=fade
        data-cycle-timeout=4000
        data-cycle-center-horz=true
        data-cycle-center-vert=true
        data-cycle-prev="<"
        data-cycle-next="#next"
        >
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <div class="cycle-overlay"></div><!-- empty element for overlay -->

        <img class="img-responsive" src="http://72.249.63.244/~develplights/images/uploads/slider_1-blue-lights1.jpg" 
            alt="Blue Lights" data-cycle-title="New Items Now In Stock" 
            data-cycle-desc="20% Off at Checkout<br />
            Enter Code ELP ">

        <img class="img-responsive" src="http://72.249.63.244/~develplights/images/uploads/Screen_Shot_2016-09-07_at_4.49_.32_PM_.jpg" 
            alt="Blue Lights" data-cycle-title="LED LIGHTING SALE" 
            data-cycle-desc="SHOP NOW<br />
            ">


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

这是CSS：

.slider { 
  height: auto; 
  padding: 20px 0;
  margin: auto; 
  background: #e5f1fb 
  }

.cycle-slideshow { 
  margin: 0 auto !important; 
}  

.cycle-slideshow img { 
    height: auto;
    opacity: 0; 
    filter:alpha(opacity=0);
    margin: 0 auto; 
}

/* overlay */
.cycle-overlay { 
    position: absolute; 
    top: 100px;
    left: 90px; 
    width: 80%; 
    z-index: 600;
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 500;
    color: white; 
    padding: 15px;
}

对此有任何指导意见。

Answer 1

一种可能的解决方案。将其添加到CSS中的#outside div：

#outside{
    display: flex;
}

如何将jQuery Cycle 2 Slider置于中心位置？

1 个答案: