BXSlider with text - showing the fourth slide on load off-centre

I'm using BXSlider to make a really basic text slider. I've installed it, but the slider begins with the final frame and it's off-centre on load. When I change the slide or move the block it goes back to normal. Otherwise it works fine.

So far I've tried changing the minSlides, maxSlides and slideWidth settings but this hasn't worked. maxSlides did change the location of the text but I couldn't get it centred.

On load: (link removed - need more reputation).

After interacting with the slide: https://i.sstatic.net/01vcf.png

EDIT:

Issue only occurs when this plugin: https://github.com/daneden/animate.css is activated for the body class. This was done using:

<body class="animated zoomInUp">

Is there some way I can pause the slider startup until the animation finishes?

Solution

Update 2

OP needs more fundamental knowledge of JavaScript/jQuery in order to even implement this code. In order to expedite this solution to OP, Demo 2 is basically Demo 1 but consolidated on one webpage. If Demo 2 was copied and pasted on a blank text file, then it's extension changed from .txt to .html, then opened in a modern browser *, it would function with no extra requirements.

*IE is not a serious browser, it's a little hobby of M$, but it should run in IE as well. The JavaScript I added is totally old school.

Update 1

OP requested a way to delay bxSlider instantiation so that the body can be animated when loading the page.

The animation from animate.css transition duration is slow (it's to be expected because it looks nice with easing.) So the first step is to use the latest loading event:

window.onload

The best way to prepare a function to load on window.onload is to wrap it in a named function. Important Syntax: You must remove the parenthesis of the function if you use window.onload

window.onload = init;

Even though window.onload is the slowest event to start loading bxSlider, it isn't enough time. So we need to add a setTimeout.

 function init() {
      setTimeout(function() {
        var bx = $('.bxslider').bxSlider();
      }, 3500);
   }
   window.onload = init;

Details are commented in updated demo

The demo has corrected HTML and CSS. With the original code, I doubt that the fix for bxSlider would work. You need to really familiarize yourself with some HTML and CSS tutorials or at the very least use W3Schools as a reference (they have an abundance of tutorials and examples but not the best.)

Plunker

Demo 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>

Demo 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>