I made my slider on jquery, but after loading or updating the page for some reason, the second picture in the slider gets into view of the first picture, but after clicking on the slider arrow to go to the second picture, and then clicking on the back arrow to go to the first the picture looks like it should be.
Here is what it looks like when you load or refresh a page (you can see part of the second image): 
This is how it looks after clicking on the arrow to the right, and then on the back arrow to return to the first picture (it looks like it should be, but for some reason it doesn’t appear when you load the page): 
What needs to be corrected so that after loading the page a piece of the second picture is not visible?
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) } }); }); }); 