带文本的 BXSlider - 显示加载偏离中心的第四张幻灯片
BXSlider with text - showing the fourth slide on load off-centre
我正在使用 BXSlider 制作一个非常基本的文本滑块。我已经安装了它，但滑块从最后一帧开始，并且在加载时偏离中心。当我更换幻灯片或移动块时，它会恢复正常。否则它工作正常。
到目前为止，我已经尝试更改 minSlides、maxSlides 和 slideWidth 设置，但这没有用。 maxSlides 确实更改了文本的位置，但我无法将其居中。
加载中：（link 已删除 - 需要更多声望）。
与幻灯片互动后：http://imgur.com/cZQ9kCF.png
编辑：
仅当此插件：https://github.com/daneden/animate.css 为正文 class 激活时才会出现问题。这是使用以下方法完成的：
<body class="animated zoomInUp">
有什么方法可以暂停滑块启动直到动画结束？
这是一个特别影响 chrome 的错误，我通常可以通过以下方式修复它：
.bx-viewport li {
min-height: 1px;
min-width: 1px;
}
我在 bxslider css 文件之后 link 的样式表文件中覆盖了它，就像我在这里 https://kensetsutenshokunavi.jp/ 所做的那样。在这种情况下，我还隐藏了滑块直到加载图像，因为它们非常重并且由于某种原因破坏了布局。
我还建议尽可能为幻灯片容器指定宽度和/或高度。如果不检查您的代码，我无法进一步建议。无论如何，我希望它能有所帮助。
更新 2
OP 需要更多 JavaScript/jQuery 的基础知识才能实现此代码。为了加快 OP 的解决方案，Demo 2 基本上是 Demo 1，但合并在一个网页上。如果将 Demo 2 复制并粘贴到一个空白文本文件，然后它的扩展名从 .txt 更改为 .html，然后在 现代浏览器 * 中打开，它会没有额外要求的功能。
*IE 不是正经的浏览器，M$ 的小爱好，不过IE 也应该运行。我添加的JavaScript完全是老派。
更新 1
OP 请求一种延迟 bxSlider 实例化的方法，以便在加载页面时主体可以动画化。
- animate.css 的动画过渡持续时间很慢（这是意料之中的，因为缓动看起来不错。）所以第一步是使用最新的加载事件：
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 作为参考（他们有大量的教程和示例，但不是最好的。）
演示 1
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>
演示 2
<!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>
我正在使用 BXSlider 制作一个非常基本的文本滑块。我已经安装了它，但滑块从最后一帧开始，并且在加载时偏离中心。当我更换幻灯片或移动块时，它会恢复正常。否则它工作正常。
到目前为止，我已经尝试更改 minSlides、maxSlides 和 slideWidth 设置，但这没有用。 maxSlides 确实更改了文本的位置，但我无法将其居中。
加载中：（link 已删除 - 需要更多声望）。
与幻灯片互动后：http://imgur.com/cZQ9kCF.png
编辑：
仅当此插件：https://github.com/daneden/animate.css 为正文 class 激活时才会出现问题。这是使用以下方法完成的：
<body class="animated zoomInUp">
有什么方法可以暂停滑块启动直到动画结束？
这是一个特别影响 chrome 的错误，我通常可以通过以下方式修复它：
.bx-viewport li {
min-height: 1px;
min-width: 1px;
}
我在 bxslider css 文件之后 link 的样式表文件中覆盖了它，就像我在这里 https://kensetsutenshokunavi.jp/ 所做的那样。在这种情况下，我还隐藏了滑块直到加载图像，因为它们非常重并且由于某种原因破坏了布局。
我还建议尽可能为幻灯片容器指定宽度和/或高度。如果不检查您的代码，我无法进一步建议。无论如何，我希望它能有所帮助。
更新 2
OP 需要更多 JavaScript/jQuery 的基础知识才能实现此代码。为了加快 OP 的解决方案，Demo 2 基本上是 Demo 1，但合并在一个网页上。如果将 Demo 2 复制并粘贴到一个空白文本文件，然后它的扩展名从 .txt 更改为 .html，然后在 现代浏览器 * 中打开，它会没有额外要求的功能。
*IE 不是正经的浏览器，M$ 的小爱好，不过IE 也应该运行。我添加的JavaScript完全是老派。
更新 1
OP 请求一种延迟 bxSlider 实例化的方法，以便在加载页面时主体可以动画化。
- animate.css 的动画过渡持续时间很慢（这是意料之中的，因为缓动看起来不错。）所以第一步是使用最新的加载事件：
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 作为参考（他们有大量的教程和示例，但不是最好的。）
演示 1
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>
演示 2
<!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>