Как изменить HREF IMG при смене слайдов - PullRequest
Новая
       8

Как изменить HREF IMG при смене слайдов

0 голосов
/ 10 апреля 2019

Я использую слайд-шоу с скользким слайдером. Я пытаюсь изменить изображение логотипа по мере продвижения слайдов. Я пробовал два разных сценария, но ни один из них не работает. 

<main class="Site-content">
<div class="main slider" id="wrapper">
    <div><img src="#" alt="slider image"></div>
    <div><img src="#" alt="slider image"></div>
    <div><img src="#" alt="slider image"></div>
    <div><img src="#" alt="slider image"></div>
    </div>


<audio class='player slider' src='audio/06. Family Feud.mp3' controls> </audio>



<div class="music slider" id="titles">

  <div><p>#</p>
  </div>

  <div><p>#</p>
  </div>

  <div><p>#</p>
  </div>

  <div><p>#</p>
  </div>

  </div>

</main>



<a href="#" id="newlink">
<picture>
<source media="(min-width: 650px)" srcset="images/cloud-logo-small.png">
<source media="(min-width: 465px)" srcset="images/type-logo-big.png">
<img src="images/type-logo-big.png" style="width:auto;">
</picture>
</a>

слайд-шоу внутри основного тега синхронизируются вместе 


  <script>
    $(document).ready(function(){
    $('.main').slick({
        dots: true,
        arrows: false,
        autoplay: false,
        centerMode: true,
        asNavFor: '.music',
        slidesToShow: 3,
  });
  });
  </script>

<script>
  $(document).ready(function(){
    $('.music').slick({
        asNavFor:'.main',
        mobileFirst: true
  });
  });
  </script>

<script>
$(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();

   }
 });
</script>


<script>
$(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];
    }
  });
</script>

другой сценарий, который я использовал 

$('.your-element').on('swipe', function(event, slick, direction){
    console.log(direction);     
});

Я ожидаю, что внешний вид логотипа будет меняться слайд за слайдом. Каждый слайд нуждается в уникальном href.

1 Ответ

2 голосов
/ 11 апреля 2019

Если я правильно понимаю, ваши «ловкие события» не стреляют. И я понимаю, почему.

Вам следует изменить порядок привязки событий, поместив их перед вызовом элемента slick. Дайте мне знать, если я был прав.

Была такая же проблема и решена с помощью упомянутого метода. Это требование из документации гладкой карусели

...