glide
glide copied to clipboard
Published
20 hours ago •
glidejs
glidejs
Carousel not working with Electron
Hi. Im trying to implement a carousel in electron using glide
I only get a list of images and doesn't get a working slider. Below are my codes. Is there anything I need to change to get it working with glide? Or is it that glide cannot be used with electron? Thanks
I have already done an npm install of glide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
/>
<link rel="stylesheet" href="css/all.min.css" />
<link rel="stylesheet" href="css/materialize.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="node_modules/@glidejs/glide/dist/css/glide.core.min.css"
/>
<link
rel="stylesheet"
href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css"
/>
<title>MATERIAL 2</title>
</head>
<body>
<div class="container">
<h1>MATERIAL 2</h1>
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<img
src="https://cdn.pixabay.com/photo/2021/09/23/09/01/swan-6649194_960_720.jpg"
alt="swan"
/>
</li>
<li class="glide__slide">
<img
src="https://cdn.pixabay.com/photo/2021/09/23/09/01/swan-6649194_960_720.jpg"
alt="swan"
/>
</li>
<li class="glide__slide">
<img
src="https://cdn.pixabay.com/photo/2021/09/23/09/01/swan-6649194_960_720.jpg"
alt="swan"
/>
</li>
</ul>
</div>
</div>
<div data-glide-el="controls">
<button data-glide-dir="<<">Start</button>
<button data-glide-dir=">>">End</button>
</div>
</div>
<script src="js/materialize.min.js"></script>
<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>
<script>
new Glide(".glide").mount();
</script>
</body>
</html>
AFAIK Electron runs simply Chromium to simulate a browser with the V8 engine.
I assume the <script src="node_modules/@glidejs/glide/dist/glide.min.js"></script> might not be right.
\Your HTML markup looks also good to me, I don't see an issue with that.
May you show errors, if any are thrown and share the version you used for @glidejs/glide?
