Trouble positioning the slides
-
Hi guys. Let me first thank you for this wondeful slider. I have managed to have this slider working as i expected before. But somehow i can’t get the positioning right this time and the images do not over lap instead they follow one after another. Someone let me know where i am going wrong. here is the code`html,
body {
height: 100%;
}
#simple-slider {
width: 100%;
position:relative;
margin: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
background-color: #222222;
}.simple-slide {
background-position: center center;
background-repeat: no-repeat;
position:relative;
width: 100%!important;
height: 100%!important;
top: 0;
z-index: 1;
opacity: 0;
-ms-filter: ‘alpha(opacity=0)’;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
}.simple-slide-container {
overflow: hidden;
display: block;
margin: 0px auto;
padding: 0px 4%;
max-width: 1080px;
-moz-box-sizing: content-box;
}/** grid div **/
.simple-slide-content-wrapper {
position: relative;
display: block;
}/** The Box **/
.simple-slide-content {
position: relative;
padding: 35px;
width: 550px;
height: 200px;
text-align: center;
top: 35%;
margin: 0 auto;
border: 10px solid rgba(255, 255, 255, 0.3);
background-color:#222222;
opacity: .7;
}
.simple-slide-content h2 {
color: white!important;
font-size: 20px;
font-weight: 200;
letter-spacing: -0.06em;
margin: 10px;
text-align: left;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}.simple-slide-content h3 {
color: white!important;
font-size: 14px;
font-weight: 100;
letter-spacing: -0.04em;
margin: 10px;
text-align: left;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}.paragraph {
color: white!important;
font-size: 14px;
font-weight: 100;
letter-spacing: -0.04em;
line-height: 1.4em;
margin: 0;
text-align: left;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
text-transform: none;
}.simple-slide-content span {
color: #4286f4;
}
.simple-slide-content strong {
color: inherit;
font-weight: inherit;
}a.button {
-webkit-appearance:none;
float: right;
display:inline-block;
min-width:150px;
height:38px;
line-height:38px;
margin-top: -61px;
margin:0;
padding:0 15px;
border:0;
border-bottom:3px solid rgba(0,0,0,.25);
color:#fff!important;
font-size:14px;
text-align:center;
text-transform:uppercase;
vertical-align:middle;
background-color:#4286f4;
cursor:pointer;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}.prev, .next {
position: absolute;
height: 80px;
line-height: 55px;
width: 50px;
font-size: 100px;
text-align: center;
color: #fff;
top: 50%;
left: 0;
z-index: 4;
margin-top: -25px;
cursor: pointer;
opacity: .7;
transition: all 150ms;
}
.prev:hover, .next:hover {
opacity: 1;
}
.next {
left: auto;
right: 0;
}.fader_controls .prev, .fader_controls .next {
position: absolute;
height: 80px;
line-height: 55px;
width: 50px;
font-size: 100px;
text-align: center;
color: #fff;
top: 50%;
left: 0;
z-index: 4;
margin-top: -25px;
cursor: pointer;
opacity: .7;
transition: all 150ms;
}
.fader_controls .prev:hover,
.fader_controls .next:hover {
opacity: 1;
}
.fader_controls .next {
left: auto;
right: 0;
}
.pager-list {
position: absolute;
width: 100%;
height: 40px;
line-height: 40px;
bottom: 0;
text-align: center;
z-index: 4;
padding: 0;
margin: 0;
}
.pager-list li {
display: inline-block;
width: 15px;
height: 15px;
margin: 0 7px;
background: #fff;
opacity: .7;
text-indent: -9999px;
border-radius: 999px;
cursor: pointer;
transition: all 150ms;
}
.pager-list li:hover,
.pager-list li.active {
opacity: 1;
}
@media screen and (max-width: 1160px) {
.simple-slide-content {
bottom: 0;
padding: 50px 0;
}
.simple-slide-content h2,
.simple-slide-content p {
text-align: center;
}
.simple-slide-content a.button {
margin-top: 30px;
float: none;
}
}
@media screen and (max-width: 960px) {
#simple-slider {
margin-top: -60px;
}
.simple-slide {
padding: 0;
}
#simple-slider .fader_controls {
display: none;
}
}
@media screen and (max-width: 680px) {
.simple-slide-content {
width: 100%;
margin-left: 0;
left: inherit;
height: auto;
}
.simple-slide-content h2,
.simple-slide-content p {
font-size: 20px;
}
}
`See https://www.riserinvestors.com for the outcome.
Waiting for your reply. Thank you in advance.
https://www.ads-software.com/plugins/simple-fullscreen-responsive-slider/
- The topic ‘Trouble positioning the slides’ is closed to new replies.