Jssor - Z-index of Transition Effects

Question

http://autolead.ca/SCARBOROAUTOLOANS/m-index.html

This is my beta design i am working on modifying for a mobile webpage.

I am trying to make circular slider in the middle of the circle.

Seems to be working everything except the slide show. Seems like something in the responsive structure of the page is causing the 'Z-Index' of the Transition effect to fall below the surface layer - but i'm not exactly sure on this.

Any ideas on how to get arround this conflict or am i doing something wrong?

Answer 1

remove following lines in framework.css (better not specify such css for all div in framework.css)

div {
    overflow: hidden; display: block; position: relative;
}

and in style.css, replace

.homePageWrapper .landingImageWrapper {
    border-radius: 50%; border: 12px solid rgb(255, 255, 255); border-image: none; width: 312px; height: 312px; margin-right: auto; margin-bottom: 35px; margin-left: auto; box-shadow: 0px 12px 0px rgba(0,0,0,0.12); background-color: rgb(255, 255, 255);
}

with

.homePageWrapper .landingImageWrapper {
    border-radius: 50%; border: 12px solid rgb(255, 255, 255); border-image: none; width: 312px; height: 312px; margin-right: auto; margin-bottom: 35px; margin-left: auto; box-shadow: 0px 12px 0px rgba(0,0,0,0.12); /*background-color: rgb(255, 255, 255);*/
}