Slick - Hide Prev/Next Arrow

by Rich Costello

HTML

<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/style.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/prism.css">
<section id="features" class="blue">
  <div class="content">
      <div class="slider parent_container one-time">
         <div id="q_id_1">
            <h4 style="text-align: left;">1) How do you access a function fetch() from a h1 element in JSX?</h4>
            <pre></pre>
            <div>
               <ul>
                  <li><input type="radio" id="radio_1_1" name="q_1" value="on"></li>
                  <li class="code">
                     <pre><code class="javascript hljs">&lt;h1&gt;{fetch()}&lt;<span class="hljs-regexp">/h1&gt;</span></code></pre>
                  </li>
               </ul>
               <ul>
                  <li><input type="radio" id="radio_1_2" name="q_1" value="on"></li>
                  <li class="code">
                     <pre><code class="javascript hljs">componentWillMount</code></pre>
                  </li>
               </ul>
               <ul>
                  <li><input type="radio" id="radio_1_3" name="q_1" value="on"></li>
                  <li class="code">
                     <pre><code class="javascript hljs">&lt;h1&gt;{fetch}&lt;<span class="hljs-regexp">/h1&gt;</span></code></pre>
                  </li>
               </ul>
               <ul>
                  <li><input type="radio" id="radio_1_4" name="q_1" value="on"></li>
                  <li class="code">
                     <pre><code class="javascript hljs">&lt;h1&gt;${fetch}&lt;<span class="hljs-regexp">/h1&gt;</span></code></pre>
                  </li>
               </ul>
...

CSS

.btn-disabled{
    opacity: .5 !important;
    pointer-events:none !important;
}

JavaScript

$('.one-time').slick({
 dots: false,
  infinite: false,
  speed: 800,
  accessibility: false,
  swipe: false,
  slidesToShow: 1,
  adaptiveHeight: true
});
 $('button.slick-next.slick-arrow').addClass("btn-disabled");

$('.one-time').on('beforeChange', function(event, slick, currentSlide){
         $('button.slick-next.slick-arrow').addClass("btn-disabled");
    });
$('input[type="radio"]').on('click',function(){
    $('button.slick-next.slick-arrow').removeClass("btn-disabled");
})