index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VueJs Carousel by Ludo237</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" crossorigin="anonymous">
</head>
<body>
<div id="example-application">
<header class="hero is-bold is-medium is-light is-bold">
<div class="hero-head">
<nav class="nav">
<div class="container">
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-left nav-menu">
<span class="nav-item">
<a class="button is-info is-outlined" href="https://github.com/ludo237/vuejs-carousel" target="_blank" rel="nofollow">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">
<span>VueJs Carousel</span>
<small><img src="https://img.shields.io/npm/v/vuejs-carousel.svg" alt="VueJs Version"></small>
<small><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Part of Awesome VueJs"></small>
</h1>
<h2 class="subtitle">Easy to use VueJS component for Photo galleries, built with VueJS and web standards in mind</h2>
</div>
</div>
</header>
<section class="section">
<div class="container">
<div class="content">
<h1>VueJs Carousel</h1>
<p>VueJs Carousel is a photo gallery system that has two main components a <code>Photos</code> components that fetches the photos from a json request
and renders them within a list and a <code>Theater</code> component used to display the full size of any selected photo from the gallery. The code is
developed by following <code>ECMA Script 2016</code> standards and is hosted on <strong>Github</strong>. Feel free to try this component and help me
improving it by submitting issues or pull requests.</p>
<h2>How to install</h2>
<p></p>
<ul>
<li>Run <code>npm install vuejs-carousel --save</code></li>
<li>Include the Carousel component in your script</li>
<li>Use the two components <code>Photos</code> and <code>Theater</code> inside your page</li>
<li>Remember to attach a source to the <code>Photos</code> component</li>
</ul>
<h2>Live Example</h2>
<p>This live example uses <strong>JSON array</strong> from <strong>Mockaroo</strong> all thumbnails are 150x150 pixels and all the
original images are 800x600 pixels. You can grab the current JSON schema of the example <a href="https://www.mockaroo.com/8e9a75b0" target="_blank" rel="nofollow">on Mockaroo</a></p>
<photos source="https://www.mockaroo.com/8e9a75b0/download?count=10&key=e2db8d80"></photos>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>VueJs Carousel</strong> by <a href="http://claudioludovico.panetta.it">Ludo237</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is powered by <strong>Bulma</strong>
and is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
</p>
<p>
<a class="icon" href="https://github.com/ludo237" target="_blank" rel="nofollow">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
<theater></theater>
</div>
<script src="dist/example.js" crossorigin="anonymous"></script>
</body>
</html>