Вторая картинка в слайдере влазит в зону видимости первой картинки

277

17 декабря 2017, 09:34

Я сделал свой слайдер на jquery, но после загрузки или обновления страницы почему-то вторая картинка в слайдере влазит в зону видимости первой картинки, но после клика на стрелку слайдера, чтобы перейти на вторую картинку, а потом кликнув на стрелку назад для перехода к первой картинке всё выглядит как и должно быть.

Вот как это выглядит когда загрузил или обновил страницу (видно часть второй картинки) :

Вот как это выглядит после клика на стрелку вправо, а потом на стрелку назад для возврата к первой картинке (выглядит как и должно быть, но почему-то при загрузке страницы оно так не отображается):

Что нужно исправить, чтобы после загрузки страницы не было видно куска второй картинки?

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>

Sass:

@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 заложены маржины слева и справа. Решение: классу .images-list прописать margin-left: 0;