LOBFF Book slider

lobff-book-slider.html

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

  <style>
    #nowhere-to-go-book {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 0;
      width: 100%;
      background: #9d9d9d url('https://8ctopotamus.github.io/lobff-book-slider/images/book-border.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    #nowhere-to-go-book iframe {
      max-width: 70%;
      box-shadow:0px 6px 16px rgba(0, 0, 0, .5);
      background: #303030;
    }
    #nowhere-to-go-book .book-slider {
      box-shadow:0px 6px 6px rgba(0, 0, 0, .5);
      width: 70%;
      margin: 0 auto;
    }
    .slick-loading .slick-list
    {
      background: #fff url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif') center center no-repeat !important;
    }
    /* Icons */
    @font-face
    {
        font-family: 'slick';
        font-weight: normal;
        font-style: normal;
        src: url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.eot');
        src: url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/fonts/slick.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.svg') format('svg');
    }

    .slick-prev {
      left: -39px;
    }

    .slick-next::before,
    .slick-prev::before {
      color: #d9bd9c !important;
      font-size: 30px;
    }

    .book-slider img {
      display: none;
    }
    .book-slider.slick-initialized img {
      display: block;
    }

    @media(max-width: 767px) {
      #nowhere-to-go-book {
        background-image: none;
      }
    }
  </style>

  <div id="nowhere-to-go-book">
    <div class="book-slider">
    <!--  populated with pages in js  -->
    </div>

  <iframe style="border: 0; width: 100%; height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/album=2228347297/size=small/bgcol=000817/linkcol=d9bd9c/artwork=none/transparent=true/" seamless><a href="http://faithlessfollowers.bandcamp.com/album/nowhere-to-go">Nowhere To Go by Liam O&#39;Brien&#39;s Faithless Followers</a></iframe>    
  </div>

  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
  <script>
  jQuery(document).ready(function($){
    // populate slides
    // cover
    $('.book-slider').append('<img src="https://8ctopotamus.github.io/lobff-book-slider/images/book-cover.jpg"/>');
    // pages
    for (var i = 0; i < 75; i++) {
      var index = i.toString()
      var paddedIndex = index.padStart('3', 0)
      $('.book-slider').append('<img src="https://8ctopotamus.github.io/lobff-book-slider/images/nowhere-to-go-page-'+ paddedIndex +'.jpg"/>');
    }

    // init slider
    $('.book-slider').slick({
      infinite: true,
      slidesToShow: 2,
      slidesToScroll: 2,
      responsive: [
        {
          breakpoint: 767,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  });
  </script>