Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

Commit

Permalink
last updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaetan-hexadog
gaetan-hexadog committed Mar 18, 2019
1 parent 57570fa commit e52085f
Show file tree
Hide file tree
Showing 11 changed files with 86 additions and 20 deletions.
2 changes: 1 addition & 1 deletion demo/assets/css/bulma-carousel.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion demo/assets/js/bulma-carousel.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion demo/feed.xml
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.5.2">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2019-03-08T10:57:33+01:00</updated><id>/</id><title type="html">bulma-carousel</title><subtitle></subtitle></feed>
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.5.2">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2019-03-18T19:38:56+01:00</updated><id>/</id><title type="html">bulma-carousel</title><subtitle></subtitle></feed>
39 changes: 34 additions & 5 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,8 @@ <h2 class="subtitle is-6 has-text-weight-light">bulma.io Carousel/Slider compone





<a href="#features" id="features" class="title is-4 has-text-weight-normal is-spaced anchor">
<span class="anchor-name">Features</span>
</a>
Expand Down Expand Up @@ -230,11 +232,34 @@ <h1 class="title is-6 heading has-text-grey-dark">Javascript</h1>

<section class="section is-paddingless">
<p>The best way to start with carousel is to use a simple div to encaspulate your items. All child will then be used as Carousel Item. date input:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
<div class="tabs">
<ul>
<li class="is-active"><a href="#classic-carousel">Classic Carousel</a></li>
<li><a href="#hero-carousel">Hero Carousel</a></li>
</ul>
</div>

<div class="tab-contents">
<div id="classic-carousel" class="tab-content is-active">
<p><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item-1"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item-2"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item-3"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<span class="nt">&lt;/div&gt;</span></code></pre></figure></p>
</div>
<div id="hero-carousel" class="tab-content">
<p><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"hero is-medium has-carousel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-carousel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item-1"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item-2"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item-3"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-head"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-body"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-foot"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span></code></pre></figure></p>
</div>
</div>
</section>

<a href="#integration" id="integration" class="title is-4 has-text-weight-normal is-spaced anchor">
Expand Down Expand Up @@ -297,14 +322,18 @@ <h6 class="title is-6">Include JavaScript</h6>
</li>
<li>
<h6 class="title is-6">Initiate component</h6>
<p>Now all that remains is to intiate the component to all elements you want to transform into a Carousel /
DatePicker</p>
<p>Now all that remains is to intiate the component to all elements you want to transform into a Carousel</p>
<article class="message is-warning">
<div class="message-body">
The <code>attach()</code> method <strong>always</strong> return an array of datepicker instances (even if it
The <code>attach()</code> method <strong>always</strong> return an array of Carousel instances (even if it
targets only one element).
</div>
</article>
<article class="message is-warning">
<div class="message-body">
Instantiation method is the same for classic & hero carousel.
</div>
</article>
<div class="tabs">
<ul>
<li class="is-active"><a href="#init-es5">ES5</a></li>
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bulma-carousel.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit e52085f

Please sign in to comment.