Question

我有适用于jquery的图像滑块。我有问题，在加载或重新加载页面后，滑块的第二个图像出现在第一个图像的可见区域上。看起来像这样：

但是，当我点击箭头查看下一张图像然后返回到第一张图像时，它会显示所需而没有visiblle第二张图像。看起来需要在加载页面后：

那么，在加载页面之后我需要更改一下我的滑块在第二个屏幕截图中的样子？

HTML（使用bootstrap 4）：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Slider</title>
    <script src="https://use.fontawesome.com/32b3e97fa6.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
    <h1 class="col-12 text-center header">Slider</h1>
        <div class="list-border">
    <ul class="row images-list">
        <li class="images-item">
            <img src="images/image_1.png" alt="First image">
            <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        </li>
        <li class="images-item">
            <img src="images/image_2.png" alt="Second image">
            <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        </li>
        <li class="images-item">
            <img src="images/image_3.png" alt="Third image">
            <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        </li>
        <li class="images-item">
            <img src="images/image_4.png" alt="Fourth image">
            <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        </li>
        <li class="images-item">
            <img src="images/image_5.png" alt="Fifth image">
            <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        </li>
        <li class="images-item">
            <img src="images/image_6.png" alt="Sixth image">
            <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        </li>
        <li class="images-item">
            <img src="images/image_7.png" alt="Seventh image">
            <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a class="back-to-start" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></a>
        </li>
    </ul>
        </div>
    </div>
</div>
<script
        src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>

萨斯：

@import "../css/normalize.css";

.header {
  text-transform: uppercase;
}

.list-border {
  border:1px solid #666666;
  border-radius:6px;
  padding:13px;
  clear:both;
  background:#ebebeb;
  box-shadow: 0px 45px 100px -32px #000;
}

ul {
  padding: 0;

  .images-item {
    position: relative;
    list-style: none;

    .next {
      position: absolute;
      top: 50%;
      left: 89%;
    }

    .previous {
      position: absolute;
      top: 50%;
      left: 1%;
    }

    .back-to-start {
      position:absolute;
      bottom: 36%;
      left: 88%;


    }

    .fa {
      font-size: 2rem;
      color: #ffffff;
      background-color: rgba(51, 72, 93, 0.5);
      padding: 15px 20px;
      border-radius: 100%;

      &:hover {
        color: #2bcb72;
        background-color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease-in-out;
      }
    }
  }

}

jquery的：

$(document).ready(function () {
    var image = $('ul li img');
    var width = image.width();

    $('ul').wrap('<div id="list-wrapper"/>');

    $('#list-wrapper').css({
        width: function () {
            return width;
        },

        height: function () {
            return image.height();
        },

        position: 'relative',
        overflow: 'hidden',
        padding: '0'

    });

    //Get total of image sizes and set as width of ul
    var totalWidth = image.length * width;
    $('ul').css({
        width: function () {
            return totalWidth;
        }
    });

    $(image).each ( //looking for each of our images in the list
        function (intIndex) {
            $(this).nextAll('a').bind("click", function () { //finding all anchors tags next to the images
                if($(this).is(".next")) {
                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex + 1) * width)
                    },800)
                } else if($(this).is(".previous")) {
                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex - 1) * width)
                    }, 800)
                    } else if ($(this).is(".back-to-start")){
                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (0)
                    }, 800)
                }
            });
        });
});

Answer 1

问题解决了，它包含在引导类.row中左右边缘的事实。 解决方案：将margin-left: 0;添加到课程.images-list。

滑块的第二图像出现在第一图像的可见区域上

1 个答案: