Issue
I'm applying glide.js on my PHP+Javascript project. I want to make it so that when the images are clicked, the page would redirect to different pages. but I can't even catch the click event on the <li> or <img> tags.. why is that?
here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/assets/css/reset.css" />
<link rel="stylesheet" href="/assets/css/glide.core.min.css" />
<link rel="stylesheet" href="/assets/css/glide.theme.min.css" />
<link rel="stylesheet" href="/assets/fontawesome-5.15.1/css/all.min.css" />
</head>
<body>
<div class="container">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide" id="asd1"><img id="asd2" src="/assets/img/1.jpg" alt="" /></li>
<li class="glide__slide"><img src="/assets/img/2.jpg" alt="" /></li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
<i class="fa fa-chevron-right"></i>
</button>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
</div>
</div>
</div>
<script src="/assets/js/glide_3.5.2.min.js"></script>
<script>
const config = {
type: 'carousel',
};
new Glide(".glide", config).mount();
const asd1 = document.querySelector('#asd1');
asd1.addEventListener('click', () => {
alert('asd1');
});
const asd2 = document.querySelector('#asd2');
console.log('asd', asd1, asd2);
asd2.addEventListener('click', () => {
alert('asd2');
});
</script>
</body>
</html>Solution
Rather than binding to specific IDs as you do here why not use a delegated event listener ( here I bound it to the document but could easily be the glide container ) and use the event to help identify which element received the click and use that as the basis of your redirect?
const config = {
type: 'carousel',
};
new Glide(".glide", config).mount();
// a delegated listener listening for clicks on elements
// with .glide_slide class or the image within.
document.addEventListener('click', e => {
if( e.target.classList.contains('glide__slide') || e.target.tagName=='IMG' ) console.log( e.target );
});.glider {
background: goldenrod;
}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<script src='//cdnjs.cloudflare.com/ajax/libs/Glide.js/3.5.0/glide.js'></script>
<div class="container">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide glider"><img src="//placekitten.com/200/200?image=1" alt="" /></li>
<li class="glide__slide glider"><img src="//placekitten.com/200/200?image=2" alt="" /></li>
<li class="glide__slide glider"><img src="//placekitten.com/200/200?image=3" alt="" /></li>
<li class="glide__slide glider"><img src="//placekitten.com/200/200?image=4" alt="" /></li>
<li class="glide__slide glider"><img src="//placekitten.com/200/200?image=5" alt="" /></li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
<i class="fa fa-chevron-right"></i>
</button>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
</div>
</div>
</div>Answered By - Professor Abronsius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.