How to make slider go to next slide via button outside of the slider container

Design help Custom code
1

Hello,

So I created a page, some buttons “learn more”, and then a slider block. I want the content in the slider to switch to the correct slide associated with the button in the dive containing the learn more buttons.

Below is the code I modified to fit my needs. My issue is that when I click slide 2, 3, and 4 it does not go to the correct slide. However, slide 1 does. Please assist :slight_smile:

    <script>
$(document).ready(function() {
  $('.gotoslide-1').click(function(e) {
    e.preventDefault();
    $('#slide-2, #slide-3, #slide-4').removeClass('active');
    $('#slide-1').addClass('active');
    $('.w-round div:nth-child(1)').trigger('tap');
  });
  $('.gotoslide-2').click(function(e) {
    e.preventDefault();
    $('#slide-1, #slide-3, #slide-4').removeClass('active');
    $('#slide-2').addClass('active');
    $('.w-round div:nth-child(2)').trigger('tap');
  });
   $('.gotoslide-3').click(function(e) {
    e.preventDefault();
    $('#slide-1, #slide-2, #slide-4').removeClass('active');
    $('#slide-3').addClass('active');
    $('.w-round div:nth-child(2)').trigger('tap');
  });
   $('.gotoslide-4').click(function(e) {
    e.preventDefault();
    $('#slide-1, #slide-2, #slide-3').removeClass('active');
    $('#slide-4').addClass('active');
    $('.w-round div:nth-child(2)').trigger('tap');
  });
});
</script>>

Link here to site: https://energy-security.webflow.io/services

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

How average user should guess there is a slider on your page? (The entire page moves).

Anyway, your Q is too general (maybe add screenshots of the issue).

3

I figured it out. A stupid mistake in the code…

$('.gotoslide-4').click(function(e) {
    e.preventDefault();
    $('#slide-1, #slide-2, #slide-3').removeClass('active');
    $('#slide-4').addClass('active');
    **$('.w-round div:nth-child(2)')**.trigger('tap');
  });

Should be the same number as my slide, ie slide 1 = 1, slide 2=2, etc…

4

hi there!
I am trying to use this code:

I have three slides and a button within the second slide. I need that by clicking on the button I would go to the Slide 3.

    $(document).ready(function() {
$('#gotoslide3').click(function(e) {
	e.preventDefault();
	$('.w-round:nth-child(3)').trigger('tap');
});

I added to the button the ID ‘gotoslide3’. is this correct and all what I have to do? but the button doesn’t trigger the code :frowning: can you please help?