Question

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

我的代码：

＆＃13;

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();
    });
});

＆＃13;

#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
 }

＆＃13;

<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>

＆＃13;

Answer 1

我对您的css文件进行了以下调整。它在我的浏览器上运行良好。确保使用大型显示器屏幕大小的大图像，并使用大小的图像显示在滑块内。目前，全屏滑块的标准是宽度为1900像素的图像。

希望它适合你。

{{1}}

滑块可在任何浏览器窗口中使用

1 个答案: