.ipsupply-banner { display: inline-block; width: 100%; height: 585px; overflow: hidden; } /* Slideshow container */ .ipsupply-banner .slideshow-container { width: 100%; position: relative; margin: auto; } .ipsupply-banner .slideshow-container .previous-btn { position: absolute; height: 550px; background-color: black; color: white; opacity: .3; z-index: 110; width: 70px; } .ipsupply-banner .slideshow-container .next-btn { position: absolute; height: 550px; background-color: red; z-index: 110; background-color: black; color: white; opacity: .3; right: 0; width: 70px; } .ipsupply-banner .slideshow-container .previous-btn img, .ipsupply-banner .slideshow-container .next-btn img { margin-top: 220px; } .ipsupply-banner .slideshow-container .next-btn:hover, .ipsupply-banner .slideshow-container .previous-btn:hover{ opacity: .8; } .ipsupply-banner .dots { text-align: center; margin-top: 570px; } /* The dots/bullets/indicators */ .ipsupply-banner .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .ipsupply-banner .dot-active { background-color: #717171; } .ipsupply-banner .slideshow-container .mySlides { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; z-index: 10; transition: left 0s 0.75s; background-color: white; } .ipsupply-banner .slideshow-container .mySlides .slide-elements { width: 100%; position: relative; } .ipsupply-banner .slideshow-container .active { left: 0; z-index: 100; transition: left 0.75s ease-out; }