Updated slick carousel pause button

by ian_smithz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <section class="homepage_carousel">

        <div class="slider">

          <div>
            <div class="sfxl-slide slide1">
              <div class="container h-100">
                <div class="ow-5 py-5 h-100 col-4 d-flex flex-column align-items-center justify-content-start">

                  <span class="bubble p-3 w-75">
                    
                    <h3 class="text-white t-13 lh-7 screwfix-bold">Brand New Venue</h3>

                  </span>

                  <a href="#" class="btn btn--xl btn--primary w-75 my-5">Register now</a>
                  
                </div>
              </div>
            </div>
          </div>

          <div>
            <div class="sfxl-slide slide2">slide2</div>
          </div>

          <div>
            <div class="sfxl-slide slide3">slide3</div>
          </div>

        </div>

      </section>

CSS

@font-face {
    font-family: archivo_narrowbold;
    src: url(./fonts/archivonarrow-bold-webfont.eot);
    src: url(./fonts/archivonarrow-bold-webfont.eot?#iefix) format("embedded-opentype"),url(./fonts/archivonarrow-bold-webfont.woff2) format("woff2"),url(./fonts/archivonarrow-bold-webfont.woff) format("woff"),url(./fonts/archivonarrow-bold-webfont.ttf) format("truetype"),url(./fonts/archivonarrow-bold-webfont.svg#archivo_narrowbold) format("svg");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: screwfix_betabold;
    src: url(./fonts/screwfix_bold-webfont_v1.eot);
    src: url(./fonts/screwfix_bold-webfont_v1.eot?#iefix) format("embedded-opentype"),url(./fonts/screwfix_bold-webfont_v1.woff2) format("woff2"),url(./fonts/screwfix_bold-webfont_v1.woff) format("woff"),url(./fonts/screwfix_bold-webfont_v1.ttf) format("truetype"),url(./fonts/screwfix_bold-webfont_v1.svg#screwfix_betabold) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: screwfix_betaheavy;
    src: url(./fonts/screwfix_heavy-webfont_v1.eot);
    src: url(./fonts/screwfix_heavy-webfont_v1.eot?#iefix) format("embedded-opentype"),url(./fonts/screwfix_heavy-webfont_v1.woff2) format("woff2"),url(./fonts/screwfix_heavy-webfont_v1.woff) format("woff"),url(./fonts/screwfix_heavy-webfont_v1.ttf) format("truetype"),url(./fonts/screwfix_heavy-webfont_v1.svg#screwfix_betaheavy) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: screwfix_regular;
    src: url(./fonts/screwfix_regular-webfont_v1.eot);
    src: url(./fonts/screwfix_regular-webfont_v1.eot?#iefix) format("embedded-opentype"),url(./fonts/screwfix_regular-webfont_v1.woff2) format("woff2"),url(./fonts/screwfix_regular-webfont_v1.woff) format("woff"),url(./fonts/screwfix_regular-webfont_v1.ttf) format("truetype"),url(./fonts/screwfix_regular-webfont_v1.svg#screwfix_betaregular) format("svg");
    font-weight: 400;
    font-style:...

JavaScript

//$(document).ready(function(){

        $(".slider").slick({
          accessibility: true,
          autoplay: true,
          autoplaySpeed: 5000,
          pauseOnHover: true,
          arrows: false,
          fade: true,
          dots: true
          //appendArrows: $('.carousel-arrows-wrapper'),
          //appendDots: $('.carousel-dots-wrapper')
        });

        // Hidden pause/play button. Screen reader announces every slide update because of the aria-live attribute.
        var hpc = $('.homepage_carousel'),
            sp  = $('<button />', {
                  'aria-live': 'polite',
                  class: 'slick-pause btn btn--sm',
                  text: 'Pause',
                  on: {
                    click: function() {

                      var pauseBtn = $(this);

                      if (pauseBtn.hasClass('paused')) {
                        $(".slider").slick('slickSetOption', 'autoplay', true).slick('slickPlay');
                        pauseBtn.removeClass('paused');
                        pauseBtn.text('Pause');
                      } else {
                        $(".slider").slick('slickSetOption', 'autoplay', false).slick('slickPause');
                        pauseBtn.addClass('paused');
                        pauseBtn.text('Play');
                      }
                    }
                  }
              });

        hpc.prepend(sp);

      //});