<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<div class="wrap">
  <ul class="slider">
    <li><img src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_01.jpg" alt=""></li>
    <li><img src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_02.jpg" alt=""></li>
    <li><img src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_03.jpg" alt=""></li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
  $('.slider').bxSlider();
});
</script>
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  margin: 0;
  padding: 10vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul {
  margin: 0;
}
.wrap {
  max-width: 400px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.