1

so I've done this little automatic slideshow in Javascript/jQuery. It works really well however I cannot figure out how to scale it with screen size, make it liquid. It's currently optimized for 1920x1080.

I've tried assigning this value (document.body.style.width) to the width variable with no luck, tried using percentages for the images instead of pixels and also tried using a very hackish fix with media queries all to no avail.

If anyone has an idea on how I might accomplish this do tell(again, I need it to scale with the browser window), Anyway, here's the code:

  <div class="slider">
    <ul class="slides">
      <li class="slide"><img src="index/showcase.png" alt="#"/></li>
      <li class="slide"><img src="index/pic4.png" alt="#"/></li>
      <li class="slide"><img src="index/pic3.png" alt="#"/></li>
      <li class="slide"><img src="index/pic5.png" alt="#"/></li>
      <li class="slide"><img src="index/pic6.png" alt="#"/></li>
    </ul>
  </div>

   .slider {
   width: 1920px;
   height: 780px;
   overflow: hidden;
   }

  .slider .slides {
  display: block;
  width: 9600px;
  height: 780px;
  margin: 0;
  padding: 0;
  }

.slider .slide {
 float: left;
 list-style-type: none;
 width: 1920px;
 height: 780px;
 }




    <script type="text/javascript">
       var myInterval = setInterval(function() {
       console.log(new Date());
       }, 1000);
        </script>

    <script type="text/javascript">
     $(function() {

    //configuration
    var width = 1920;
    var animationSpeed = 1000;
    var pause = 4000;
    var currentSlide = 1;

    //cache DOM
    var $slider = $('.slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');

    var interval;

    function startSlider() {
      interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, 
    function(){
          currentSlide++;
          if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slideContainer.css('margin-left', 0);
         }
      });
    }, pause);
  }        
  // function stopSlider() {
  //   clearInterval(interval);
  //}

  //$slider.on('mouseenter', startSlider).on('mouseleave', startSlider);

  startSlider();
});
</script>
vuffer
  • 166
  • 1
  • 5
  • 17

1 Answers1

1

vw and vh may be what you are after. Instead of width: 20% or width: 550px, you do width: 100vw to be 100% of the viewport's width (vh is viewport height). Then it should resize as the viewport resizes.

Tyler Dahle
  • 817
  • 1
  • 8
  • 37