添加光滑滑块下方的链接

Question

当幻灯片转换到下一个幻灯片时，有人知道如何让链接消失吗？文本消失，但当我尝试将其插入HTML时，链接仍然存在。

对此的任何帮助都将非常感激。

＆＃13;

＆＃13;

$(document).ready(function(){
  $('.center').slick({
	  dots:true,
		adaptiveHeight: true,
		infinte:false,
		centerMode:true,
	  centerPadding: '60px',
		draggable: false,
    accessibility: true,
    focusOnSelect:true,
    variableWidth: true,
    slidesToShow: 3,
    slidesToScroll:1,
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ],
			autoplay: true			
		  });				
});

＆＃13;

.center{
  padding: 60px 0px;
  text-align:center;
}
.slick-center {
  transform: scale(1.25, 1.25);
  transition: ease-in-out all .15s ease;
  z-index: 2;
 // overflow:hidden;
  color:black;
  opacity:1;
}

.slick-center a{
  color: #000;
}
.slick-list {
  overflow: visible; 
  height:500px;
}
#container{
overflow:hidden;
}
.slick-slider{
background-color:#fff;
color: #fff;
}
h1{
text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet"/>

<h1>Slick Carousel Center</h1>
<div id="container">	
	<div class="slider center">
	  <div><img src="http://lorempixel.com/400/200/nature/1/"><p>nature 1</p><a href="http://www.google.ca">TEST</a></div>
	  <div><img src="http://lorempixel.com/400/200/nature/2/"><p>nature 2</p><a href="http://www.yahoo.ca">TEST2</a></div> 
	  <div><img src="http://lorempixel.com/400/200/nature/3/"><p>nature 3</p></div>
	  <div><img src="http://lorempixel.com/400/200/nature/8/"><p>nature 4</p></div>
	  <div><img src="http://lorempixel.com/400/200/nature/5/"><p>nature 5</p></div> 
	  <div><img src="http://lorempixel.com/400/200/nature/6/"><p>nature 6</p></div>
	  <div><img src="http://lorempixel.com/400/200/nature/7/"><p>nature 7</p></div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用.slick-current class

来定位样式

我已将您的CSS修改为此

.slick-slide a{
  color: #000;
  display: none;
}

.slick-slide.slick-current a{
  display: block;
}

＆＃13;

＆＃13;

$(document).ready(function(){
  $('.center').slick({
	  dots:true,
		adaptiveHeight: true,
		infinte:false,
		centerMode:true,
	  centerPadding: '60px',
		draggable: false,
    accessibility: true,
    focusOnSelect:true,
    variableWidth: true,
    slidesToShow: 3,
    slidesToScroll:1,
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ],
			autoplay: true			
		  });				
});

＆＃13;

.center{
  padding: 60px 0px;
  text-align:center;
}
.slick-center {
  transform: scale(1.25, 1.25);
  transition: ease-in-out all .15s ease;
  z-index: 2;
 // overflow:hidden;
  color:black;
  opacity:1;
}

.slick-slide a{
  color: #000;
  display: none;
}

.slick-slide.slick-current a{
  display: block;
}
.slick-list {
  overflow: visible; 
  height:500px;
}
#container{
overflow:hidden;
}
.slick-slider{
background-color:#fff;
color: #fff;
}
h1{
text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet"/>

<h1>Slick Carousel Center</h1>
<div id="container">	
	<div class="slider center">
	  <div><img src="http://lorempixel.com/400/200/nature/1/"><p>nature 1</p><a href="http://www.google.ca">TEST</a></div>
	  <div><img src="http://lorempixel.com/400/200/nature/2/"><p>nature 2</p><a href="http://www.yahoo.ca">TEST2</a></div> 
	  <div><img src="http://lorempixel.com/400/200/nature/3/"><p>nature 3</p></div>
	  <div><img src="http://lorempixel.com/400/200/nature/8/"><p>nature 4</p></div>
	  <div><img src="http://lorempixel.com/400/200/nature/5/"><p>nature 5</p></div> 
	  <div><img src="http://lorempixel.com/400/200/nature/6/"><p>nature 6</p></div>
	  <div><img src="http://lorempixel.com/400/200/nature/7/"><p>nature 7</p></div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;