Javascript 如何使用 JS React Select 活动幻灯片和表格元素

我是一个网络开发的初学者.作为练习的一部分，我想修改以下链接的脚本代码. 我想使按钮元素可点击.

https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0010个

  const slide1Button = document.querySelector('.btn'); 
  slide1Button.addEventListener('click', function() {
  window.open(slideData[0].url);
  }); 


  const slide2Button = document.querySelector('.btn'); 
  slide2Button.addEventListener('click', function() {
  window.open(slideData[1].url);
  }); 

const slideData = [
{
  index: 0,
 
  button: 'VISITER',
  url: 'https://www.interflora.fr/',
  src: 'https://lecoqetlecerisier.files.wordpress.com/2011/05/dsc037411.jpg' },
 

{
  index: 1,

  button: 'VISITER',
  url: 'https://www.123fleurs.com/',
  src: 'http://idata.over-blog.com/1/39/34/32/Poitiers-Ici-et-La/Macro-fleur-rose.JPG' },

{
  index: 2,

  button: 'VISITER',
  url: 'https://www.aquarelle.com/',
  src: 'http://monmondevirtuel.m.o.pic.centerblog.net/o/91d323e8.jpg' },

{
  index: 3,

  button: 'VISITER',
  url: 'https://www.florajet.com/',
  src: 'http://www.juille.com/images/006_3.JPG' }
];

我已经添加了代码

它是半途而废的，因为我不能确定对于Slide Current，它会 Select 相应的按钮，然后在点击时，会根据SlideData表中写入的URL进行重定向.

这只 Select 了表格的第一个url，我想让元素交互，并让它跟随当前幻灯片.

如果有人能在我的方法上帮助我或建议我.