jQuery trigger function doesn't work

Design help Custom code
1

Hi Community,

I have a problem with some custom code of mine. The custom code below is used to trigger the slider dots in the navigation. The code and the slider work perfectly until I implemented the twentytwenty before/after slider. The slider of zurb needs jQuery v2 and it seems that this causes the problem.

<script src="https://code.jquery.com/jquery-2.2.0.min.js" integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4=" crossorigin="anonymous"></script>

If I remove the jQuery v2 implementation my custom slider works, but the twentytwenty slider won’t. I need both sliders in my webpage.

Here is the Read-Only Link and also the Live site.

// Community Slider
  $('#slide-1').click(function(){
  	$('.w-slider-nav div:nth-child(1)').trigger('tap');
    $('#slide-2').removeClass('is--active');
    $('#slide-3').removeClass('is--active');
    $(this).addClass('is--active');
  });
  $('#slide-2').click(function(){
  	$('.w-slider-nav div:nth-child(2)').trigger('tap');
   	console.log($('.w-slider-nav div:nth-child(2)'));
    $('#slide-1').removeClass('is--active');
    $('#slide-3').removeClass('is--active');
    $(this).addClass('is--active');
  });
  $('#slide-3').click(function(){
  	$('.w-slider-nav div:nth-child(3)').trigger('tap');
    $('#slide-1').removeClass('is--active');
    $('#slide-2').removeClass('is--active');
    $(this).addClass('is--active');
  });
  // Community Slider END
2

Has nobody an idea? Maybe you @samliew?

Edit: After some further research in the forum I found this post who is doing exactly the same as I did, but for me it doesn’t work if I use the twentytwenty slider which requires jQuery 2.2.4.

3

You’ll need jQuery.noConflict() | jQuery API Documentation

4

Thank you, but in the meantime I got another solution. I found a more up to date version of twentytwenty and embbeded this via cdnjs. This version runs with the latest jQuery and now all runs perfectly.