The problem of a static click function not working when clicked on a link. What is the solution for this

Details

I am currently using a flickity slideshow that automatically goes to the next picture on a click. Within the slideshow, I have placed a button with text and a link to an external website (e.g. ).

My Problem:

When I click on the link, my slideshow advances to the next slide while the external site is loading (approximately 500 ms). This behavior is not desired.

What I want is for the link to open immediately without the slideshow moving to the next slide simultaneously.

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

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

You can see the issue here ---------→ https://codepen.io/skurodrome/pen/XWXWapo

javascriptjquerycssperformanceflickity

Answer №1

To prevent opening google.com in the same slider, please add target="_blank" to the anchor tag. Refer to the example below for guidance on how to implement this change.

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()
})
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3c36333931332e231a68746a746b6b">[email protected]</a>/dist/flickity.css">

<div class="main-carousel">
  <div class="carousel-cell">
    <div class="slide slide-1">
      1 
    </div>
  </div>
 
  <!-- Additional slides with relevant information -->

  <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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781e14111b13110c01384a5648564949">[email protected]</a>/dist/flickity.pkgd.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Jquery's ajax function in WordPress can often lead to compatibility issues

Currently, I am in the process of developing a plugin for WordPress that utilizes jQuery for AJAX functionalities. Unfortunately, the following code snippet is not producing the desired outcome. My expectation is to display the content within the results ...

phpjqueryajaxwordpress

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

Tips on how to display a gif image during the loading of ajax content using JavaScript

Currently, I am attempting to load a gif image while waiting for the AJAX data to be loaded and displayed. However, I am struggling with this task. I would appreciate any assistance on how to implement a loading gif in my code for the advanced search feat ...

phpjavascripthtmlcssajax

Vuetify Error - "Attempting to access 'extend' property of an undefined object"

Upon installing Vuetify, I encountered an error in the console. My webpack version is v3.6 Uncaught TypeError: Cannot read property 'extend' of undefined at Module../src/mixins/themeable/index.ts (index.ts:21) at __webpack_require__ (boo ...

javascriptvue.jswebpackvuetify.js

What is the best way to display a poster image in a video element even if the aspect ratio of the poster image does not match the video element?

At this moment, the compatibility of this feature has been tested only in WebKit browsers. When a poster image is applied to a <video> element using the poster attribute, it appears before the user starts playing the video (default behavior). Howeve ...

htmlcsshtml5-video

Leveraging the html-webpack-plugin for creating an index.html file within Webpack (specifically in a project based on the vue-simple boiler

For every build in Webpack, I am attempting to create a customized index.html file. In order to achieve this, I have incorporated html-webpack-plugin. I comprehend that to generate an index.html file within my dist directory, the following configurations ...

javascriptwebpackvue.jshtml-webpack-plugin

Symfony: Implementing real-time updating of values through ajax requests

My goal is to update the values of a table using Ajax in Symfony. The operation involves clicking on an update button, which retrieves the ID of the selected row and the new value of the updated attribute. Here is my Twig file: <tbody> {% for ...

jqueryjsonajaxsymfony

Making a Zoom effect using p5.js

I have searched for a solution to this question multiple times, but none of the answers I came across seem to work for me. Currently, I am able to allow the user to scale an image with a simple scale(factor) call. However, now I am attempting to implement ...

javascriptcanvasprocessingp5.js

Automatically scroll to specific states on Angular UI Router

I have implemented a controller that automatically scrolls the window to the top whenever a state change is initiated: $rootScope.$on('$stateChangeStart',function(){ window.scrollTo(0, 0); }); However, I am facing an issue where certain state ...

javascriptangularjs

Scrollable content with sticky positioning using CSS3 and JavaScript

I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...

javascriptjqueryhtmlcss

Disregarding TypeScript import errors within a monorepo ecosystem

In my Turborepo monorepo, I have a Next.js app package that imports various components from a shared package. This shared package is not compiled; it simply contains components imported directly by apps in the monorepo. The issue arises with the shared co ...

javascripttypescript

Using the useQuery() function in a Next.js React app successfully fetches data from the API on the client side, yet the same API call fails to work when implemented in getServerSideProps on

I am attempting to retrieve data from the backend server using React Query within Next JS getServerSideProps. Here is the function used to fetch the data: export const getGoogleAuthUrl = async () => { const res = await fetch(`${process.env.NEXT_PUBLIC ...

javascriptreactjsnext.jsfetch-apireact-query

Enhance design based on scrolling function in React

I've been trying to update the color of my header when a user scrolls the page, but for some reason, my onScroll method isn't working. Can anyone help me figure out why and how to solve this issue? The onScroll method is triggered by the bottom T ...

javascriptcssreactjsgatsby

Only IE7 seems to be experiencing a z-index problem with CSS that is not present on any

I’ve encountered a perplexing problem with CSS z-index in IE7 that I just can’t seem to solve. #screen { display: none; background-image: url('/images/bg.png'); background-repeat: repeat; position: fixed; top: 0px; le ...

htmlcssinternet-explorerinternet-explorer-7z-index

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

javascripthtmlcss

Issue with docker-composer module not being detected specifically on windows operating system

We are currently in the process of setting up a container running node.js with docker (specifically docker-compose, as we plan to incorporate mongodb later). Our approach involves copying the package.json in the Dockerfile and then creating a volume mount ...

javascriptnode.jsdockerdocker-composedockerfile

NavLinkButton - add style when active or selected

I'm working with a list of NavLinks: const users = Array.from(Array(5).keys()).map((key) => ({ id: key, name: `User ${key}`, })); <List> {users.map((user) => { return ( <ListItem disablePadding key={user.id}> ...

javascriptreactjsmaterial-uireact-router-dom

What is the best way to retrieve the http.server object from the express application?

Currently, I am in the process of developing a server-side node.js application utilizing express to manage HTTP requests. In addition to this, I am incorporating websockets (socket.io) support into the application. The challenge I face is that I do not hav ...

javascriptnode.jsexpresssocket.io

Pattern matching to verify a basic number within the range of [0-6]

const number = '731231'; const myRegex = /[0-6]/; console.log(myRegex.test(number)); Could someone provide some insight into this code snippet? In my opinion, the regular expression [0-6] should only match numbers between 0 and 6. However, i ...

javascriptregex

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

I am working on a project using express, node, and ejs and I want to be able to use different stylesheets for different views. In order to render a specific view with its corresponding style, I have included the following in my app.js file: app.get('/ ...

cssnode.jsexpressejs