Slide HTML Text
This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation.
This is dummy copy. It's Greek to you. Unless, of course, you're Greek, in which case, it really makes no sense. Why, you can't even read it! It is strictly for mock-ups. You may mock it up as strictly as you wish.
After all, you have many other things you should be doing. Who's paying you to waste this time, anyway?
HTML text
Slide with Image and Text
This is dummy copy. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. If this were real copy, it would have ended long ago. But then, this is dummy copy. It is not meant to be read. Period.
Image
Slide with Video and Text
This is dummy copy. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy copy. It is not meant to be read. Period.
VideoHTML Content Slider
RoyalSlider doesn't wait when all images are finished loading, it applies height to slide right away it's ready.
Auto-height option automatically resizes the slider based on current slide height. Same trick can be done when transition is set to fade, or in image gallery when image scale mode is set to 'none'. "autoHeight" is provided as a module and can be easily removed from build.
If required, you can disable mouse dragging completely. You can enable arrows, or use thumbnails or bullets instead of tabs.
Virtually anything can be inside each slide.
Markup for current slider
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.
.contentSlider {
width: 100%;
}
.contentSlider,
.contentSlider .rsOverflow,
.contentSlider .rsSlide,
.contentSlider .rsVideoFrameHolder,
.contentSlider .rsThumbs {
background: #eee;
color: #000;
}
.contentSlider .rsSlide,
.contentSlider .rsOverflow {
background: #eee;
}
.contentSlider h3 {
font-size: 24px;
line-height: 31px;
margin: 12px 0 8px;
font-weight: bold;
}
.contentSlider img {
max-width: 100%;
height: auto;
display: block;
}
.content-slider-bg {
width: 86%;
padding: 24px 7%;
background: #eee;
}
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.
