让滑块在任何浏览器中工作 window

Question

我从 codepen 中获取了以下图像滑块代码。现在我想让它适合任何浏览器 window 的中心，在左侧和右侧留下 5% space。我尝试将 $(window).width(); 放入变量并将其分配给 css 值 width 但我得到不稳定的输出。

我的代码：

jQuery(document).ready(function($) {
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    setInterval(function() {
        moveRight();
    }, 5500);
    //$('#slider').css({ width: slideWidth, height: slideHeight });
    $('#slider ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: +slideWidth
        }, 750, function() {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: -slideWidth
        }, 750, function() {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
    $('a.control_prev').click(function() {
        moveLeft();
    });
    $('a.control_next').click(function() {
        moveRight();
    });
});

#slider {
  position: relative;
  overflow: hidden;
  margin-left: 5%;
  width: 90%;
  height: 500px;
}

#slider ul {
   position: inherit;
   margin: 0;
   padding: 0;
   list-style: none;
   width: 100%;
   height: 100%;

}

#slider ul li {
  position: inherit;
  display: block;
  float: left;
  margin: 0;
  margin-top: 20px;
  padding: 0;
  width: 1200px; // I want to change this
  height: 500px; // and this
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
        <li style="background-image:url(PSG.jpg);background-size:100%;"></li>
        <li style="background-image:url(STUD.jpg);background-size:100%;"></li>
        <li style="background-image:url(EVERTON.jpg);background-size:100%;"></li>
    </ul>  
</div>

Answer 1

我已对您的 css 文件进行了以下调整。它在我的浏览器上运行良好。确保您使用的大图像与您的大监视器屏幕大小一样大，并且与您希望它们出现在滑块内的大小一样大。目前，全屏滑块的标准是宽度为 1900 像素的图像。

希望对你有用。

 #slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;  /* take out margin-top. This will give 20px margin to the top and center your slider */
  width: 90%;  /* less than 100% width gives margins to the sides */
  height: 500px;
}

#slider ul li {
  position: inherit;
  display: block;
  float: left;
  margin: 0 auto;  /* this will center your images inside #slider */
  padding: 0;
  width: 100%;   /* this will fill the container of your slider  */
  height: 500px;  /* depends on the actual size of your images */
 }

让滑块在任何浏览器中工作 window

Make slider work in any browser window

html

css

jquery

transition

slideshow