Simple slider stretched to full width of wrapper. Photos by Gilderic photography.
Please don't use this HTML file as a starter file, create your own and follow steps in basic usage section of documentation
Slider JavaScript initialization code.
Additional CSS styles for current slider.
#full-width-slider {
width: 100%;
color: #000;
}
.coloredBlock {
padding: 12px;
background: rgba(255,0,0,0.6);
color: #FFF;
width: 200px;
left: 20%;
top: 5%;
}
.infoBlock {
position: absolute;
top: 30px;
right: 30px;
left: auto;
max-width: 25%;
padding-bottom: 0;
background: #FFF;
background: rgba(255, 255, 255, 0.8);
overflow: hidden;
padding: 20px;
}
.infoBlockLeftBlack {
color: #FFF;
background: #000;
background: rgba(0,0,0,0.75);
left: 30px;
right: auto;
}
.infoBlock h4 {
font-size: 20px;
line-height: 1.2;
margin: 0;
padding-bottom: 3px;
}
.infoBlock p {
font-size: 14px;
margin: 4px 0 0;
}
.infoBlock a {
color: #FFF;
text-decoration: underline;
}
.photosBy {
position: absolute;
line-height: 24px;
font-size: 12px;
background: #FFF;
color: #000;
padding: 0px 10px;
position: absolute;
left: 12px;
bottom: 12px;
top: auto;
border-radius: 2px;
z-index: 25;
}
.photosBy a {
color: #000;
}
.fullWidth {
max-width: 1400px;
margin: 0 auto 24px;
}
@media screen and (min-width:960px) and (min-height:660px) {
.heroSlider .rsOverflow,
.royalSlider.heroSlider {
height: 520px !important;
}
}
@media screen and (min-width:960px) and (min-height:1000px) {
.heroSlider .rsOverflow,
.royalSlider.heroSlider {
height: 660px !important;
}
}
@media screen and (min-width: 0px) and (max-width: 800px) {
.royalSlider.heroSlider,
.royalSlider.heroSlider .rsOverflow {
height: 300px !important;
}
.infoBlock {
padding: 10px;
height: auto;
max-height: 100%;
min-width: 40%;
left: 5px;
top: 5px;
right: auto;
font-size: 12px;
}
.infoBlock h3 {
font-size: 14px;
line-height: 17px;
}
}
HTML markup of slider.
You should include: jQuery, main slider JavaScript file, main slider CSS file, skin CSS file.
It's recommended to get jquery.royalslider.min.js from build tool and jquery.js from its official site. Always use the latest version. Feel free to combine files in one.
Make sure that paths match locations of files.