Проблема с щелчком по ссылке с функцией stati c click. Как это исправить? - PullRequest
Новая
       81

Проблема с щелчком по ссылке с функцией stati c click. Как это исправить?

1 голос
/ 19 июня 2020

Информация

У меня есть динамичное слайд-шоу, которое при "stati c click" переходит к следующим изображениям. Кроме того, у меня есть поверх изображений внутри моего flickity слайд-шоу кнопку с заголовком и href со ссылкой на внешний веб-сайт (например, https://www.google.it).

Вот моя проблема:

Когда я нажимаю на ссылку, мое движение во время внешней загрузки (около 500 мс) переходит к следующему слайду, а не перестает работать.

Что мне нужно, так это go к 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

1 Ответ

1 голос
/ 19 июня 2020

Вы не можете открыть 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>
...