Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here.
I've attempted multiple methods to center it, but none have been successful.
Check out the HTML code:
<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>
And here is the CSS code:
.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;
}
If you have any advice or tips on how to solve this issue, I'd greatly appreciate it!