Flickity js help, I can’t get my Flickity to work

I can’t get my Flickity JS to work can I get some help. This is my HTML and JS. Please help I’ve watched 2 youtube videos and can’t seem to get it working even though I do it exactly the same. The first part is my HTML and the second is my JS. I’ve tried removing my css to see if it affected it and it didn’t. I’m trying to make it so it shows the images and the information on the list in a carousel using Flickity JS

<!DOCTYPE HTML>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlowTow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="stylesheet" href="css/flickity.css">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script src="./js/main.js" type=module defer></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/flickity.js/"> </script>
<script scr="js/flickity1.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<div class="main-carousel">
<div class="ten-recent">
<ul id=fan1>
<header class="user">SiddharthToCool</header>
<li><img src=images/fantasy1.jpg alt="fantasy1"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span> 
</li>
<li>New Concept</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>

<div class="ten-recent">
<ul id=fan2>
<header class="user">LonJon</header>
<li><img src=images/fantasy2.jpg alt="fantasy2"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span> 
</li>
<li>Quick sketch xD</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>

<div class="ten-recent">
<ul id=fan3>
<header class="user">DrawnToLife</header>
<li><img src=images/fantasy3.jpg alt="fantasy3"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span> 
</li>
<li>Wish this was my house :c</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
</div>
</body>
</html>

var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
// options
cellAlign: 'left',
contain: true
});

Answer

I followed the documentation and it works perfectly. You are probably importing the library wrong, I leave you the same code that you did using cdn codesandbox-example

Note: I see a problem with codesandbox and you have to reload 2 times for flickity to work

Advertisement

Answer