« See all FAQs for Backslider - Fullscreen Background Image Slider
How to convert Backslider from fullscreen to responsive slider?
The idea is to wrap Backslider into “backslider-wrapper” div that may have any width but retains some proportion, let’s say 16:9. Two CSS styles below will do the work
.backslider-wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.backslider-wrapper .backslider {
position: absolute;
height: 100%;
width: 100%;
}
after that use following markup for backslider
<div class="backslider-wrapper">
<div id="bs0" class="backslider">
<ul class="bs-slides">
<li><img src="pictures/pic1.jpg" alt="Pic" /></li>
<li><img src="pictures/pic2.jpg" alt="Pic" /></li>
<li><img src="pictures/pic3.jpg" alt="Pic" /></li>
<li><img src="pictures/pic4.jpg" alt="Pic" /></li>
</ul>
</div>
</div>
