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:
#slider-in-laptop {
width: 70%;
height: 200px;
padding: 2% 15% 7%;
}
#slider-in-laptop .rsOverflow,
#slider-in-laptop .rsSlide,
#slider-in-laptop .rsVideoFrameHolder,
#slider-in-laptop .rsThumbs {
background: #151515;
}
#slider-in-laptop .rsPreloader {
background-image:url(../preloaders/preloader-white.gif);
}
.imgBg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
#slider-in-laptop .rsBullets {
bottom: -25px;
}
.laptopBg {
position: relative;
width: 100%;
height: auto;
}
@media screen and (min-width: 0px) and (max-width: 500px) {
#slider-in-laptop .rsBullets {
bottom: -30px;
}
}