CODEWITHSUNDEEP
css
Dz.slick
Dz.slick

Reputation: 445

Image carousel CSS issue

I am implementing the moving box that's at the base of this page. But the left navigation arrow does not show and I don't know why. The CSS is as shown below, any suggestions?

 /*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
display: block;
width: 45px;
height: 58px;
background: transparent url(../images/arrows.png) no-repeat;
position: absolute;
top: 50%;
margin-top: -29px; /* if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
cursor: pointer;
text-decoration: none;
outline: 0;
border: 0;
}

a.mb-scrollButtons.mb-left {
background-position: left top;
left: -15px;
}

a.mb-scrollButtons.mb-right {
background-position: right top;
right: -15px;
}

Upvotes: 0

Views: 370

Answers (1)

Frexuz
Frexuz

Reputation: 4933

Adding a z-index to the left arrow will fix your problem, like this:

a.mb-scrollButtons.mb-left {
    background-position: -1px 0;
    left: -15px;
    z-index: 1;
}

The reason for this is that .mb-scroll is positioned as relative and comes after the left arrow in the DOM, and therefore rendering on top of the left arrow, since both of them lack a z-index.

Upvotes: 1

Related Questions