我正在使用BXSlider制作一个非常基本的文本滑块。我已经安装了它，但是滑块从最后一帧开始，并且在加载时偏离中心。当我更换幻灯片或移动块时，它会恢复正常。否则它工作正常。
到目前为止，我已尝试更改minSlides，maxSlides和slideWidth设置，但这没有用。 maxSlides确实改变了文本的位置，但我无法将其置于中心位置。
加载时:(链接已删除 - 需要更多声誉）。
与幻灯片互动后：http://imgur.com/cZQ9kCF.png
编辑：
只有在为此类激活此插件：https://github.com/daneden/animate.css时才会出现问题。这是使用：
完成的
<body class="animated zoomInUp">
有什么方法可以暂停滑块启动，直到动画结束？
答案 0 :(得分：0)
这是一个特别影响chrome的bug，我通常可以通过以下方式修复：
.bx-viewport li {
min-height: 1px;
min-width: 1px;
}
我在我的样式表文件中覆盖它，我在bxslider css文件之后链接，就像我在这里here一样。在这种情况下，我也隐藏了滑块，直到图像被加载，因为它们非常沉重并且由于某种原因打破了布局。
我建议尽可能给幻灯片容器宽度和/或高度。如果不检查您的代码，我无法进一步建议。无论如何，我希望它有所帮助。
答案 1 :(得分：0)
.txt更改为.html，然后在现代浏览器中打开 *，它无需额外要求即可运作。
* IE不是一个严肃的浏览器，它是M $的一点爱好，但它也应该在IE中运行。我添加的JavaScript完全是旧学校。
OP请求了一种延迟bxSlider实例化的方法，以便在加载页面时可以为主体设置动画。
window.onload
window.onload的函数的最佳方法是将其包装在命名函数中。 重要语法：如果使用window.onload window.onload = init;
window.onload是开始加载bxSlider的最慢事件，但它还没有足够的时间。所以我们需要添加setTimeout。function init() { setTimeout(function() { var bx = $('.bxslider').bxSlider(); }, 3500); } window.onload = init;
详细信息在更新的演示
中进行了评论<小时/> 该演示已更正HTML和CSS。使用原始代码，我怀疑bxSlider的修复是否有效。您需要真正熟悉一些HTML和CSS教程，或者至少使用W3Schools作为参考（他们有丰富的教程和示例，但不是最好的。）
的 Plunker
function init() {
setTimeout(function() {
var bx = $('.bxslider').bxSlider();
}, 3500);
}
window.onload = init;@charset "utf-8";
/* DO NOT USE SO MANY FONT FAMILIES UNLESS YOU KNOW WHAT YOU ARE DOING*/
/* USE 2 AT THE MOST. ONE FOR TITLES AND ONE FOR NORMAL USE*/
@import url('https://fonts.googleapis.com/css?family=Nunito|PT+Sans:700');
* {
margin: 0;
padding: 0;
border: 0;
}
html,
body {
width: 100%;
height: 100%
}
body {
font-family: "Nunito", sans-serif;
font-size: 16px;
overflow-x: hidden;
}
main {
padding: 30px 0 0;
}
section {
padding: 10px 20px;
}
p {
line-height: 1.5;
margin: 0 10px 10px;
}
li {
list-style: none;
}
h1 {
margin-top: 30px;
}
.slider {
margin: 0 auto;
}
[class*='title'] {
font-family: "PT Sans";
text-align: center;
color: #FFF;
background-color: #00aee8;
}
.title {
font-size: 48px;
}
.subtitle {
background-color: #ef233c;
font-size: 24px;
margin: 15px;
}
.boxtext {
background-color: #ef233c;
font-size: 32px;
display: flex;
justify-content: space-around;
align-items: center;
}
.bodytext {
font-size: 18px;
color: #160C28;
}
.btctitle {
font-size: 48px;
color: #000;
background-color: #FF3;
}
footer {
padding: 10px 5px 40px;
margin-top: 0;
}
footer p {
text-align: center;
font-size: 18px;
}
a,
a:link,
a:visited {
position: relative;
color: #fff;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
color: transparent;
background-color: transparent;
text-shadow: -.25px -.25px 0 #fc0, -.25px .25px 0 #fc0, .25px -.25px 0 #fc0, .25px .25px 0 #fc0;
}
a.x::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #fc0;
visibility: hidden;
transform: scaleX(0);
transition: all .5s ease-in-out 0s;
}
a.x:hover::before,
a.x:active::before,
a.x:focus::before {
visibility: visible;
transform: scaleX(1);
}
.btcbutton {
font-size: 48px;
background: rgba(255, 200, 12, 1);
}
/* THE LAST TWO RULESETS IS THE ANSWER BUT WILL MOST LIKELY
|| NOT WORK CORRECTLY WITH THE ORIGINAL CSS and HTML. THE
|| PADDING MIN-HEIGHT IS BY PREFERENCE
*/
.bx-wrapper {
margin: 0 auto;
min-height: 100px;
}
.bxslider li {
padding: 0 55px;
margin: 0 auto;
text-align: center;
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practical Applications</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<link href="CSS.css" rel="stylesheet">
<link href='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css' rel='stylesheet'>
<style>
</style>
</head>
<body class="animated zoomInUp">
<header>
<h1>
<a href="index.html">
<img src="https://wemakewebsites.com/sites/default/files/styles/large/public/post_images/headline/bitcoin-logo-with-padding.png?itok=mnfN-yoC" width="100%" height="100">
</a>
</h1>
<nav>
<ul class='boxtext'>
<li class="subtitle"><a href="How.html" title="How does it work?" class='x'>How?</a></li>
<li class="subtitle"><a href="Why.html" title="Why use a blockchain?" class='x'>Why?</a></li>
<li class="subtitle"><a href="Practical_Applications.html" title="Practical Applications" class='x'>What?</a></li>
</ul>
</nav>
<h2 class="title">Practical Applications</h2>
</header>
<main>
<section class="bodytext">
<p>So far, blockchains have been as a ledger of transactions. Cryptocurrencies, as they are termed, are favoured as transactions are stored across the blockchain. This make it impossible for a government or a bank to interfere with transaction history,
and it's almost impossible for the blockchain to be compromised or lost like a bank database could be.</p>
<p>Here are some problems that you need to be aware of:</p>
<!-- slider -->
</section>
<section class='slider'>
<ul class="bxslider">
<li class="bodytext">
You obviously put some effort into this code. Why not put some effort into learning how to do it simple first. Every style you add to the stylesheet compounds your problem.
</li>
<li class="bodytext">
Don't use table, tr, and th for layout. You didn't add an end tag for h1. center tags are not supported in HTML5. id='top' is an id, id must be unique. id='top' is used on 3 different tags. Do not do that. Change it to class='top'.
</li>
<li class="bodytext">
CSS link tags must be before any script tags. Script tags should be placed before the closing end tag of body. Do not use position:absolute without wrapping it in element that has position:relative.
</li>
<li class="bodytext">
CSS.css file is commented with corrections. You need to know the fundamentals, Google search: "CSS tutorial"
</li>
<li class="bodytext">
At the beginning of page, only !doctype html is needed for HTML5. Why would you use HTML4? You need to know the fundamentals, Google search: "HTML5 tutorial"
</li>
</ul>
</section>
</main>
<footer>
<p>Let's explore the most well-known utilisation of blockchain technology to date:</p>
<p>
<a href="Bitcoin.html" class="btcbutton x"> <span>Bitcoin</span>
</a>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js'></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practical Applications</title>
<link href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css" rel="stylesheet">
<link href='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Nunito|PT+Sans:700" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
html,
body {
width: 100%;
height: 100%
}
body {
font-family: "Nunito", sans-serif;
font-size: 16px;
overflow-x: hidden;
}
main {
padding: 30px 0 0;
}
section {
padding: 10px 20px;
}
p {
line-height: 1.5;
margin: 0 10px 10px;
}
li {
list-style: none;
}
h1 {
margin-top: 30px;
}
.slider {
margin: 0 auto;
}
[class*='title'] {
font-family: "PT Sans";
text-align: center;
color: #FFF;
background-color: #00aee8;
}
.title {
font-size: 48px;
}
.subtitle {
background-color: #ef233c;
font-size: 24px;
margin: 15px;
}
.boxtext {
background-color: #ef233c;
font-size: 32px;
display: flex;
justify-content: space-around;
align-items: center;
}
.bodytext {
font-size: 18px;
color: #160C28;
}
.btctitle {
font-size: 48px;
color: #000;
background-color: #FF3;
}
footer {
padding: 10px 5px 40px;
margin-top: 0;
}
footer p {
text-align: center;
font-size: 18px;
}
a,
a:link,
a:visited {
position: relative;
color: #fff;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
color: transparent;
background-color: transparent;
text-shadow: -.25px -.25px 0 #fc0, -.25px .25px 0 #fc0, .25px -.25px 0 #fc0, .25px .25px 0 #fc0;
}
a.x::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #fc0;
visibility: hidden;
transform: scaleX(0);
transition: all .5s ease-in-out 0s;
}
a.x:hover::before,
a.x:active::before,
a.x:focus::before {
visibility: visible;
transform: scaleX(1);
}
.btcbutton {
font-size: 48px;
background: rgba(255, 200, 12, 1);
}
.bx-wrapper {
margin: 0 auto;
min-height: 100px;
}
.bxslider li {
padding: 0 55px;
margin: 0 auto;
text-align: center;
color: red;
}
</style>
</head>
<body>
<header>
<h1 class="animated zoomInUp">
<a href="index.html">
<img src="https://wemakewebsites.com/sites/default/files/styles/large/public/post_images/headline/bitcoin-logo-with-padding.png?itok=mnfN-yoC" width="100%" height="100">
</a>
</h1>
<nav>
<ul class='boxtext'>
<li class="subtitle"><a href="How.html" title="How does it work?" class='x'>How?</a></li>
<li class="subtitle"><a href="Why.html" title="Why use a blockchain?" class='x'>Why?</a></li>
<li class="subtitle"><a href="Practical_Applications.html" title="Practical Applications" class='x'>What?</a></li>
</ul>
</nav>
<h2 class="title">Practical Applications</h2>
</header>
<main>
<section class="bodytext">
<p>So far, blockchains have been as a ledger of transactions. Cryptocurrencies, as they are termed, are favoured as transactions are stored across the blockchain. This make it impossible for a government or a bank to interfere with transaction history,
and it's almost impossible for the blockchain to be compromised or lost like a bank database could be.</p>
<p>Here are some problems that you need to be aware of:</p>
<!-- slider -->
</section>
<section class='slider'>
<ul class="bxslider">
<li class="bodytext">
You obviously put some effort into this code. Why not put some effort into learning how to do it simple first. Every style you add to the stylesheet compounds your problem.
</li>
<li class="bodytext">
Don't use table, tr, and th for layout. You didn't add an end tag for h1. center tags are not supported in HTML5. id='top' is an id, id must be unique. id='top' is used on 3 different tags. Do not do that. Change it to class='top'.
</li>
<li class="bodytext">
CSS link tags must be before any script tags. Script tags should be placed before the closing end tag of body. Do not use position:absolute without wrapping it in element that has position:relative.
</li>
<li class="bodytext">
CSS.css file is commented with corrections. You need to know the fundamentals, Google search: "CSS tutorial"
</li>
<li class="bodytext">
At the beginning of page, only !doctype html is needed for HTML5. Why would you use HTML4? You need to know the fundamentals, Google search: "HTML5 tutorial"
</li>
</ul>
</section>
</main>
<footer>
<p>Let's explore the most well-known utilisation of blockchain technology to date:</p>
<p>
<a href="Bitcoin.html" class="btcbutton x"> <span>Bitcoin</span>
</a>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js'></script>
<script>
function init() {
setTimeout(function() {
var bx = $('.bxslider').bxSlider();
}, 3500);
}
window.onload = init;
</script>
</body>
</html>