使用静态点击功能的链接点击问题.如何解决这个问题?

Question

信息

我有一个轻弹幻灯片，在"静态点击"上会转到下一张图片。此外，在我的轻弹幻灯片中的图片顶部有一个带有一些标题的按钮和一个链接到外部网站(例如 https://www.google.it(的 href。

这是我的问题：

当我单击链接时，我在外部加载期间(大约 500 毫秒(的轻拂将转到下一张幻灯片，而不是停止工作。

我需要的是立即转到 URL，而无需让我的轻弹转到下一张幻灯片。

var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});
flkty.on( 'staticClick', function() {
flkty.next()
})

看看这里---------→https://codepen.io/skurodrome/pen/XWXWapo

Answer 1

您无法在同一滑块中打开 google.com，因此请在锚中使用 target="blank"。请参阅示例，它将正常工作。 更改此 HTML 代码。代码在这里：-

var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
autoPlay: false,
});

flkty.on( 'staticClick', function() {
flkty.next()
})

body {
background: antiquewhite;
}
/*.is-selected .info {
opacity:1;
display:block; 
transition: 0.25s;
transition-timing-function: ease-out;
transform: translateY(0);
opacity: 1;
}
.info{  
transform: translateY(130%);
transition-timing-function: ease-in;
//transition: 0.2s;
opacity: 0;
transition: opacity .1s linear;
bottom: 100px;
position: absolute;
left: 50%;
background: #fff;
border-radius: 15px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*/
.is-selected .info {
transform: translateY(0);
left:50%;
-webkit-transform: translate(-50%,0px);
transform: translate(-50%,0px);
transition: 0.4s;
transition-timing-function: ease-out;
opacity:1;
display:block; 
}
.info{  
transform: translateY(130%);
transition-timing-function: ease-in;
opacity: 0;



transition: opacity .3s linear;
transition: 0.5s;

bottom: 20px;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,80px);
transform: translate(-50%,80px);
background: #fff;
border-radius: 10px;
text-align: left;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}






.caption {
background: #FAFAFA;
margin: 0;
padding: 10px;
text-align: center;
}
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
padding: 2px;
	  background: linear-gradient(to top right, #fb8200, #c43390);
}
.avatar img {
width: 100%;
	 height: 100%;
	 background-color: #fff;
	 border-radius: 50%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
border: 2px solid #fff;
}
/*
.avatar {
display:block;
opacity:1;
width:60px;
height:60px;
border-radius:50%;
//background-color:rgba(236, 240, 241,1.0);
//border: 3px solid rgb(236, 240, 241);
display:inline-block;
border: 1px solid #cacaca;
overflow: hidden;
img {
width:100%;
}}
*/

.hide
{
display: none;
height:0;
}

.avatar-caption {
padding: 0 0 0 20px;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail img {
max-width: 100%;
max-height: 100%;
}
img {
height: auto;
max-width: 100%;
display: block;
}


.front-page-gallery .product-moods .gallery-cell .info a h3 {
font-size: .825rem;
}
.front-page-gallery .product-moods .gallery-cell .info a, .front-page-gallery .product-moods .gallery-cell .info h3, .front-page-gallery .product-moods .gallery-cell .info p {
white-space: nowrap;
line-height: 1.2;
}
h1, h2, h3, p, ul {
color: #262626;
letter-spacing: 0;
margin: 0;
font-size: 12px;
line-height: 14px;


}
h1, h2, h3 {

color: #262626;
color: rgba(var(--i1d,38,38,38),1);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 18px;
color:black;
}
.front-page-gallery .product-moods .gallery-cell .info a .thumbnail {
width: 40px;
height: 40px;
margin-right: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: .5rem 1.4em .5rem 1.4rem;
text-decoration:none;
}

html,
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
.slide,
.main-carousel {
width: 100%;
height: 287px;
//height: 587px;
}
.carousel-cell { margin-right: 10px; }
.slide {
border-radius:10px;
padding: 1rem;
width: 500px;
color: white;
}
.slide-1 {
background: red;
}
.slide-2 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/c0.151.1349.1349a/s640x640/97960668_102131031487479_5118500540678732059_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=103&_nc_ohc=IZgKw1IUOCwAX_WD1KZ&oh=0e2dbbec3a33af0c1905fcfd8bc485bc&oe=5F1585A9");
background-repeat: no-repeat;
background-size: cover;
}
.slide-3 {
background: blue;
background-image: url("https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/p640x640/95420076_657451761718836_7126794433093464345_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=cMN4jjBUawUAX-cMrN7&oh=a83c7fa9be06d83910444d8cf652a1fc&oe=5F13818B");
background-repeat: no-repeat;
background-size: cover;
}
.slide-4 {
background-image: url("https://pbs.twimg.com/media/Bi4fWQoCMAATf5e.jpg");
background-color: black;
background-size: cover;
//background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slide-5 {
background: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/flickity@2.0.11/dist/flickity.css">
<div class="main-carousel">
<div class="carousel-cell">
<div class="slide slide-1">
1 
</div>
</div>

<!--2-->
<div class="carousel-cell" >
<div class="slide slide-2" ></div>

<div class="info">
<a target="_blank" href="https://www.google.com/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s150x150/61984225_404664133594231_7441499034704936960_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=GQqwKdosiZsAX_hOD2p&oh=83248d05fda0a9af488e722739842f15&oe=5F1342F9" alt="tester"></div></div><div class="avatar-caption"><h3>Samutaro</h3><p class="color">Narratives Not Noise</p></div></a></div></div>



<!--3-->
<div class="carousel-cell">
<div class="slide slide-3"></div>

<div class="info">

<a target="_blank" href="https://www.google.it/" class="flickity_link">
<div class="thumbnail">
<div class="avatar">
<img src="https://instagram.ffco2-1.fna.fbcdn.net/v/t51.2885-19/s320x320/45710471_1974274545985110_3650146834896125952_n.jpg?_nc_ht=instagram.ffco2-1.fna.fbcdn.net&_nc_ohc=6YMGwWKDusMAX8AQMU2&oh=9cdbea6cf114306d368ecf2bc50a4628&oe=5F168E4A" alt="tester"></div></div><div class="avatar-caption"><h3>Poptones 1979</h3><p class="secondary">⚡️AFFA</p></div></a></div>


</div>
<div class="carousel-cell">
<div class="slide slide-4">
4
</div>
</div>
<div class="carousel-cell">
<div class="slide slide-5">
5
</div>
</div>
</div>
<script src="https://unpkg.com/flickity@2.0.11/dist/flickity.pkgd.js"></script>