title: How to change href of img on slide change
body: <p>Im using the slick slider slideshow. Im trying to make the href of a logo image change when the slides advance. Ive tried two different scripts but none  seem to work.</p>
  
  <pre><code>&lt;main class="Site-content"&gt;
  &lt;div class="main slider" id="wrapper"&gt;
      &lt;div&gt;&lt;img src="#" alt="slider image"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="#" alt="slider image"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="#" alt="slider image"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="#" alt="slider image"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;audio class='player slider' src='audio/06. Family Feud.mp3' controls&gt; &lt;/audio&gt;
  
  
  
  &lt;div class="music slider" id="titles"&gt;
  
    &lt;div&gt;&lt;p&gt;#&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div&gt;&lt;p&gt;#&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div&gt;&lt;p&gt;#&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div&gt;&lt;p&gt;#&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/main&gt;
  
  
  
  &lt;a href="#" id="newlink"&gt;
  &lt;picture&gt;
  &lt;source media="(min-width: 650px)" srcset="images/cloud-logo-small.png"&gt;
  &lt;source media="(min-width: 465px)" srcset="images/type-logo-big.png"&gt;
  &lt;img src="images/type-logo-big.png" style="width:auto;"&gt;
  &lt;/picture&gt;
  &lt;/a&gt;
  
  </code></pre>
  
  <p>the slideshows within the main tag are synced together</p>
  
  <pre><code>
    &lt;script&gt;
      $(document).ready(function(){
      $('.main').slick({
          dots: true,
          arrows: false,
          autoplay: false,
          centerMode: true,
          asNavFor: '.music',
          slidesToShow: 3,
    });
    });
    &lt;/script&gt;
  
  &lt;script&gt;
    $(document).ready(function(){
      $('.music').slick({
          asNavFor:'.main',
          mobileFirst: true
    });
    });
    &lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
  $('.music').on('beforeChange', playlist);
  
     function playlist(e, s, current, next) {
  
       var list = [
        'audio.mp3',
        'audio.mp3',
        'audio.mp3',
        'audio.mp3',
  
       ];
  
       $('.player')[0].src = list[next];
       $('.player')[0].load();
       $('.player')[0].play();
  
     }
   });
  &lt;/script&gt;
  
  
  &lt;script&gt;
  $(document).ready(function(){
    $("#newlink").on('beforeChange'){
      function links(e, s, current, next) {
        var lnk = [
          'https://youtube.com',
          'https://google.com',
        ];
        $('.blah')[0].href = lnk[next];
      }
    });
  &lt;/script&gt;
  
  </code></pre>
  
  <p>the other script ive used involved</p>
  
  <pre><code>$('.your-element').on('swipe', function(event, slick, direction){
      console.log(direction);     
  });
  </code></pre>
  
  <p>I expect the href of the logo image to change slide by slide. Each slide needs a unique href.</p>