我最近在我的页面上添加了一个滑块，经过一些调整之后，除了一个问题之外它还可以正常工作 - 当我调整窗口大小时，特别是让它变小，滑块不再居中并且在Firefox上分辨率低箭头在窗口外面，这里是滑块的代码
$(function () {
console.log('DOM1');
$(document).ready(function () {
var speed = 6000;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var width = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var prev = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
$('#buttons a').click(function (e) {
if (container.is(':animated')) {
return false;
}
if (e.target.id === prev) {
container.stop().animate({
'left': 0
}, 1000, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id === next) {
container.stop().animate({
'left': item_width * -2
}, 1000, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
return false;
});
$('#carousel').mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
container.css({
'left': -1 * item_width
});
}
});
function rotate() {
$('#next').click();
}
});#carousel {
position: relative;
width:100%;
margin-top: 10px;
flex-basis: 100%;
display: flex;
justify-content: center;
}
.btn-bar{
position: absolute;
width: 100%;
@media only screen and (max-width: 1200px) {
width: 100%;
}
z-index: 4;
}
#buttons a {
position: absolute;
text-align:center;
display:block;
font-size:50px;
float:left;
outline:0;
margin:-50px 60px;
color:#FFFFFF;
text-decoration:none;
padding:9px;
width:35px;
}
a#prev{
cursor: pointer;
left: 0;
width: 40px;
height: 40px;
border-bottom: 1px solid white;
border-left: 1px solid white;
transform: rotate(45deg);
@media only screen and (max-width: 720px) {
display: none;
}
}
a#next{
cursor: pointer;
right: 0;
width: 40px;
height: 40px;
border-top: 1px solid white;
border-right: 1px solid white;
transform: rotate(45deg);
@media only screen and (max-width: 720px) {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>OHIR — Imprint Media</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="shortcut icon" href="images/3d5bb643659eb0b2a80acbe35c5073e5.png">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="container">
<div class="logo" id="OVERLAY"></div>
<div class="ohir"><p class="col">OHIR</p></div>
<nav class="col">
<a href="#STORY">Książka</a>
<a href="#FRAGMENT">Fragment</a>
<a href="#AUTHOR">Autor</a>
<button>KUPUJĘ</button>
</nav>
</div>
<section class="OVERLAY hidden">
<a>MODERNIST CUISINE</a>
<a>IMPRINT MEDIA</a>
<a>WYDAWNICTWO BARBELO</a>
<button onclick="hideOverlayFunction()">POWRÓT</button>
</section>
</header>
<main>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img src="images/arrow_up.svg"></button>
<section class="container OHIR">
<p>OHIR</p>
</section>
<section class="container ONBOARD">
<div class="book"></div>
<!--<img class='col' src="images/62d204dec2048b53e33842d869865586.png">-->
<div class="border">
<p> > Witaj na pokładzie Ohira.</p>
<p> > Kiedy będziesz gotowy na podróż w nieznane?</p>
<button>KUPUJĘ</button>
</div>
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" onclick="prevFunction()"></a><a id="next" onclick="nextFunction()"></a> </div>
</div>
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Tak bardzo chciałbym odrodzić się jako Ohir.</span>
</p>
</div>
<div class="authorContainer">
<p class="quote-author HAL">HAL 9000</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
Po przeczytaniu Ohira zbudowałem mój pierwszy ścigacz.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Anakin Skywalker</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"></span>Chciałbym, żeby mój następny statek był taki, jak Ohir.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Kapitan Jean-Luc Picard</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Gdybym znów miał walczyć z cylinami, chciałbym mieć Ohira we flocie.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Admirał William Adama</p>
</div>
</li>
</ul>
</div>
<div class="counter">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<a class="anchor" id="STORY"></a>
<section class="container STORY">
<video id="videoStory" onpause="pauseFunction()">
<source src="video/Ohir_fb%20video%20cover.mp4" type="video/mp4">
</video>
<button onclick="playFunction()" id="playBtn" title="play video">OHIR, OPOWIEDZ MI O KSIĄŻCE</button>
</section>
<section class="container FRAGMENT">
<a class="anchor" id="FRAGMENT"></a>
<div class="book"></div>
<div class="col">
<h3>ZAINTERESOWANY?</h3>
<p>Przeczytaj darmowy fragment i dowiedz się jak zaczyna się przygoda z Ohirem. Wpisz swój adres e-mail, aby otrzymać PDF</p>
<!--<input type="email" placeholder="e-mail">-->
<form action="http://YOURWEBSITE/index.php?option=com_acymailing&ctrl=sub" method="post">
<input id="user_email" type="text" name="user[email]" value="" placeholder="e-mail" />
</form>
<button>PROSZĘ O FRAGMENT</button>
</div>
<div class="AUTHOR">
<a class="anchor" id="AUTHOR"></a>
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira. Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="mobile author">
<div class="mobileAUTHOR">
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira.<br> Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="container SHOP">
<div class="book"></div>
<div class="border">
<h3>KUP KSIĄŻKĘ</h3>
<span> > Piękne wydanie Ohira</span>
<span> > 432 strony tekstu</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<h2 class="price">30 PLN</h2>
<button>KUPUJĘ</button>
</div>
</section>
<section class="container FOUR">
<div class="book"></div>
<div class="border">
<h3>ZESTAW CZTERECH KSIĄŻEK</h3>
<span> > Cztery książki drukowane</span>
<span> > 432 stron każda</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<div class="priceROW"><h2 class="price">99 PLN </h2><button>KUPUJĘ</button></div>
</div>
</section>
</main>
<footer>
<img class="col" src="./images/Imprint%20Media_logo.svg">
<span>
<p><b>Imprint Media Agencja Wydawnicza</b></p>
<p>ul. Chmielna 2/31</p>
<p>00-020 Warszawa</p>
</span>
<div class="line"></div>
<span>
<p>Znajdź nas na Facebooku!</p>
<p>tel. 22 24 15018</p>
<p>sklep@imprintmedia.pl</p>
</span>
<div class="line"></div>
<span>
<p>Jak wydać książkę?</p>
<p>Poznaj ofertę Imprint Media</p>
<p>Projektowanie i dystrybucja książek</p>
</span>
</footer>
</body>
我真的需要帮助，如果有人能帮助我，那就太好了。
谢谢！