<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../Styles/ShowCase.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="../Styles/jcarousel.responsive.css" />
<!-- CSS end -->
<!-- Header scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="../Javascript/jcarousel.responsive.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jcarousel@0.3.9/dist/jquery.jcarousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jcarousel@0.3.9/dist/jquery.jcarousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<!-- Header scripts end -->
</head>
<body>
<h1 id="gameTitle">Game Jam Name</h1>
<p id="groupId">Name Of Author</p>
<div>
<div class="row">
<div class="col-sm" id="description">
Beskrivelse
<br />
<button id="isWebBased">Play game online</button>
<button id="gameFil">Download game</button>
</div>
<div class="col-sm" id="thumbnailFile">
<img src="../Images/spil.jpg" />
</div>
</div>
</div>
<div id="suggestions">
<p>Hej dkjhhnsd hid hgndnf ghnd df</p>
</div>
<div class="jcarousel-wrapper">
<div class="jcarousel" data-jcarousel="true">
<ul style="left: 0px; top: 0px;">
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 1"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 2"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 3"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 4"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 5"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 6"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev" data-jcarouselcontrol="true">‹</a>
<a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">›</a>
<p class="jcarousel-pagination" data-jcarouselpagination="true">
<a href="#1" class="active">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
<a href="#6">6</a>
</p>
</div>
<script>
$(function () {
$('.jcarousel').jcarousel();
});
$('.jcarousel-control-prev').click(function () {
$('.jcarousel').jcarousel('scroll', '-=1');
});
$('.jcarousel-control-next').click(function () {
$('.jcarousel').jcarousel('scroll', '+=1');
});
</script>
</body>
</html>