Link unter Slick Slider hinzufügen

Question

Würde jemand wissen, wie der Link verschwindet, wenn die Folie zum nächsten übergeht? Der Text verschwindet, aber der Link bleibt bestehen, wenn ich versuche, ihn in den HTML-Code einzufügen.

Jede Hilfe zu diesem Thema wäre sehr willkommen.

$(document).ready(function(){ 
 
    $('.center').slick({ 
 
\t dots:true, 
 
\t \t adaptiveHeight: true, 
 
\t \t infinte:false, 
 
\t \t centerMode:true, 
 
\t centerPadding: '60px', 
 
\t \t 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 
 
     } 
 
    } 
 
    ], 
 
\t \t \t autoplay: true \t \t \t 
 
\t \t }); \t \t \t \t 
 
});

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

<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"> \t 
 
\t <div class="slider center"> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/1/"><p>nature 1</p><a href="http://www.google.ca">TEST</a></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/2/"><p>nature 2</p><a href="http://www.yahoo.ca">TEST2</a></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/3/"><p>nature 3</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/8/"><p>nature 4</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/5/"><p>nature 5</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/6/"><p>nature 6</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/7/"><p>nature 7</p></div> 
 
\t </div> 
 
</div>

Answer 1

Sie Ihre Stile mithilfe von .slick-aktuellen Klasse ausrichten können

Ich habe Ihre css dieser

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

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

$(document).ready(function(){ 
 
    $('.center').slick({ 
 
\t dots:true, 
 
\t \t adaptiveHeight: true, 
 
\t \t infinte:false, 
 
\t \t centerMode:true, 
 
\t centerPadding: '60px', 
 
\t \t 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 
 
     } 
 
    } 
 
    ], 
 
\t \t \t autoplay: true \t \t \t 
 
\t \t }); \t \t \t \t 
 
});

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

<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"> \t 
 
\t <div class="slider center"> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/1/"><p>nature 1</p><a href="http://www.google.ca">TEST</a></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/2/"><p>nature 2</p><a href="http://www.yahoo.ca">TEST2</a></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/3/"><p>nature 3</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/8/"><p>nature 4</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/5/"><p>nature 5</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/6/"><p>nature 6</p></div> 
 
\t <div><img src="http://lorempixel.com/400/200/nature/7/"><p>nature 7</p></div> 
 
\t </div> 
 
</div>

modifizierte