How to convert Backslider from fullscreen to re...

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>