Slider in laptop
Simple variation of image slider with bullets is used, image behind scales with slider automatically.
Laptop mockup by Maxwell Barvian, photography by Gilderic.
Buttons controlled by API:
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.
#slider-in-laptop {
width: 70%;
height: 200px;
padding: 2% 15% 7%;
background: none;
}
#slider-in-laptop .rsOverflow,
#slider-in-laptop .rsSlide,
#slider-in-laptop .rsVideoFrameHolder,
#slider-in-laptop .rsThumbs {
background: #151515;
}
.imgBg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
#slider-in-laptop .rsBullets {
bottom: -25px;
}
.laptopBg {
position: relative;
width: 100%;
height: auto;
}
#slider-in-laptop .rsBullets {
bottom: -30px;
}
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.
