Как изменить href img при смене слайда

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

<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.info(direction);     
});

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

img не принимает атрибут href.
Heretic Monkey 10.04.2019 22:30

добавить data-href к изображениям и обработать .on('click'....

Alex Kudryashev 10.04.2019 22:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
856
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

Другие вопросы по теме