jquery 如何在到达某些链接时将幻灯片更改为滚动

30byixjq 于 2023-02-08 发布在 jQuery

关注(0)|答案(1)|浏览(99)

光滑的slidesToScroll已经设置为3，所以当我到达第四段时，光滑的导航更改为下一个slidesToScroll，我可以实现这个吗，谢谢。我正在使用交叉点观察器。
如果我可以控制数据幻灯片属性，也许我可以实现这一点。

$(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>

jquery

来源：https://stackoverflow.com/questions/75371064/how-to-change-slidestoscroll-when-reaching-certain-links

1条答案

按热度按时间

wgx48brx1#

您可以使用slickGoTo导航所需的幻灯片。

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

更新代码并在活动幻灯片上添加slickGoTo。

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);
  });

赞(0）回复(0）举报 2023-02-08

我来回答

jquery 如何在到达某些链接时将幻灯片更改为滚动

1条答案

相关问题

热门标签

最新问答