Link click issue with a static click function. How to fix this?

Question

Info

I have a flickity slideshow, that on a 'static click' is going to the next pictures.In addition I have on top of the pictures inside my flickity slideshow a button with some caption and aa href linked to an external website (eg https://www.google.it ).

Here my issue:

When I click on the link my flickity during the external loading (around 500 ms) is going to the next slide instead of stop working.

What i need is to go to the URL immediately without having my flickity going to the next slide instead.

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

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

Have a look here ---------→ https://codepen.io/skurodrome/pen/XWXWapo

Answer 1

You Can't open google.com in same slider so please use target="blank" in anchor.Please see example it will work fine. Change this HTML Code. Code is here:-

 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>