How to change slidesToScroll when reaching certain links

Question

slick slidesToScroll has set to 3 so when i reach the fourth paragraph slick navigation changes to the next slidesToScroll,can i achieve this,thanks.i'm using intersection observer for this.

if i can control data-slide attribute,maybe i can achieve this.

$(document).ready(function () {
    $('.container').slick({
      dots: false,
      infinite: false,
      speed: 300,
      slidesToShow:3,
      slidesToScroll: 3
    });
});

//Intersection observer
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const id = entry.target.getAttribute('id');
      const links = document.querySelectorAll(`#action a[href="#${id}"]`);

      if (entry.intersectionRatio > 0) {
        links.forEach(link =>{
          link.classList.add('active');
        });
          
      } 
        else {
       links.forEach(link =>{
          link.classList.remove('active');
        });
      }
    });
  });

  // Track all sections that have an `id` applied
  document.querySelectorAll('.table p[id]').forEach((section) => {
    observer.observe(section);
  });

.active{
  color:red
}

//Slick Navigation
<div id="action" class="container">
  <a href="#one" data-slide="1">go to slide 1</a>
  <a href="#two">go to slide 2</a>
  <a href="#three">go to slide 3</a>
  <a href="#four" data-slide="4">go to slide 4</a>
  <a href="#five">go to slide 5</a>
  <a href="#six">go to slide 6</a>
  <a href="#seven">go to slide 7</a>
  <a href="#eight" data-slide="8">go to slide 8</a>
</div>

<div class="table">
  <p id="one" style="margin-bottom: 100%;">Hello</p>
  <p id="two" style="margin-bottom: 100%;">Hello 1</p>
  <p id="three" style="margin-bottom: 100%;">Hello 2</p>
  <p id="four" style="margin-bottom: 100%;">Hello 3</p>
  <p id="five" style="margin-bottom: 100%;">Hello 4</p>
  <p id="six" style="margin-bottom: 100px;">Hello 5</p>
  <p id="seven" style="margin-bottom: 100px;">Hello 6</p>
  <p id="eight" style="margin-bottom: 100px;">Hello 7</p>
</div>

Answer 1

you can use slickGoTo to navigate the desired slide.

$('.container').slick('slickGoTo', SlideNumber );

Update your code and add slickGoTo on your active slide.

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        const id = entry.target.getAttribute('id');
        const links = document.querySelectorAll(`#action a[href="#${id}"]`);

        if (entry.intersectionRatio > 0) {
            links.forEach(link => {
                let number = convertTextToInt(id);   
               // moving Slick to the particular slide here            
                $('.container').slick('slickGoTo', number - 1);
                link.classList.add('active');
            });

        } else {
            links.forEach(link => {
                link.classList.remove('active');
            });
        }
    });
});
 //write your own method to covert string id to number.

function convertTextToInt(id) {
    if (id === 'one') {
        return 1;
    } else if (id === 'two') {
        return 2;
    } else if (id === 'three') {
        return 3;
    } else if (id === 'four') {
        return 4;
    } else if (id === 'five') {
        return 5;
    } else if (id === 'six') {
        return 6;
    } else if (id === 'seven') {
        return 7;
    } else if (id === 'eight') {
        return 8;
    } else {
        return 0;
    }
}
     // Track all sections that have an `id` applied
  document.querySelectorAll('.table p[id]').forEach((section) => {
    observer.observe(section);
  });