Skip to content

Commit

Permalink
Merge pull request #19 from phucbm/2.0.5-alpha
Browse files Browse the repository at this point in the history 
2.0.5 alpha
  • Loading branch information
@phucbm
phucbm authored Mar 8, 2023
2 parents 541cbb4 + d05904f commit 7790e37
Show file tree
Hide file tree
Showing 12 changed files with 235 additions and 53 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ import {FlickityResponsive} from "flickity-responsive";

```html

<script src="https://cdn.jsdelivr.net/gh/phucbm/[email protected].4/flickity-responsive.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/phucbm/[email protected].5/flickity-responsive.min.js"></script>
```

## Usage
Expand Down
94 changes: 91 additions & 3 deletions dev/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,25 @@

<div class="mb100 pt100">
<h1 data-title>Flickity Responsive</h1>
<p>
<a href="https://github.com/phucbm/flickity-responsive/releases/latest" target="_blank">
<img src="https://badgen.net/github/release/phucbm/flickity-responsive" alt="release">
</a>
<a href="https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive" target="_blank">
<img src="https://data.jsdelivr.com/v1/package/gh/phucbm/flickity-responsive/badge?style=rounded"
alt="jsdeliver hit">
</a>
<a href="https://www.npmjs.com/package/flickity-responsive" target="_blank">
<img src="https://badgen.net/npm/dm/flickity-responsive" alt="npm download">
</a>
</p>
<p data-description></p>
</div>


<section class="mb100">
<h2>Init with vanilla JS</h2>
<p>Show dots on screen smaller than 768px</p>
<p>On screen <= 768px, show page dots and hide arrows.</p>
<!-- Flickity HTML init -->
<div class="carousel">
<div class="carousel-cell"></div>
Expand All @@ -45,12 +57,26 @@ <h2>Init with vanilla JS</h2>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<pre>
// init with vanilla JS
const carousel = new FlickityResponsive('.carousel', {
pageDots: false,
responsive: [
{
breakpoint: 768,
settings: {
prevNextButtons: false,
pageDots: true,
}
}
]
});</pre>
</section>


<section class="mb100">
<h2>Init with jQuery</h2>
<p>Destroy on screen smaller than 768px</p>
<p>On screen <= 768px, destroy carousel.</p>
<!-- Flickity HTML init -->
<div class="carousel-2">
<div class="carousel-cell"></div>
Expand All @@ -59,6 +85,17 @@ <h2>Init with jQuery</h2>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<pre>
jQuery('.carousel-2').flickityResponsive({
responsive: [
{
breakpoint: 768,
settings: {
destroy: true
}
}
]
});</pre>
</section>


Expand All @@ -69,25 +106,76 @@ <h2>Init with HTML</h2>
<div class="carousel-cell" style="width:260px;"></div>
<div class="carousel-cell" style="width:260px;"></div>
</div>
<pre>data-flickity-responsive='{ "cellAlign": "left" }'</pre>
</section>


<section class="mb100">
<p style="margin-bottom:0;"><span class="extra-feature">Extra feature</span></p>
<div class="d-flex jc-space-between ai-center">
<h2>Custom arrows</h2>
<h2>Custom arrows and indicator numbers</h2>
<div class="d-flex ai-center" style="gap:10px;">
<button id="prev">Prev</button>
<div><span id="current">0</span>/<span id="total">0</span></div>
<button id="next">Next</button>
</div>
</div>
<p>Use <code>prevArrow</code> and <code>nextArrow</code> to assign custom prev/next buttons.</p>
<p>Use <code>indicatorCurrent</code> and <code>indicatorTotal</code> to receive update about slide's position.
</p>
<div class="carousel-arrows">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<pre>
// custom arrows
const carouselArrows = new FlickityResponsive('.carousel-arrows', {
prevNextButtons: false,
indicatorCurrent: document.querySelector('#current'),
indicatorTotal: document.querySelector('#total'),
prevArrow: document.querySelector('#prev'),
nextArrow: jQuery('#next'),
cellAlign: 'center',
contain: true
});</pre>
</section>

<section class="mb100">
<p style="margin-bottom:0;"><span class="extra-feature">Extra feature</span></p>
<div>
<h2>Force move</h2>
<p>Enabled by default <code>forceMove:true</code>. This extra option will make sure that the carousel will
move
on every arrow click.</p>
</div>
<div data-flickity-responsive='{ "cellAlign": "left" }' class="mb50">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<p>Use <code>forceMove:false</code> if you prefer the normal behaviour of the carousel.</p>
<div data-flickity-responsive='{ "forceMove": "false" }'>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
</section>

<!--Footer -->
Expand Down
2 changes: 2 additions & 0 deletions dev/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,6 @@ const carouselArrows = new FlickityResponsive('.carousel-arrows', {
indicatorTotal: document.querySelector('#total'),
prevArrow: document.querySelector('#prev'),
nextArrow: jQuery('#next'),
cellAlign: 'center',
contain: true
});
57 changes: 56 additions & 1 deletion dev/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.carousel-cell {
width: 33.33%;
width: calc(33.33% - 20px / 3);
height: 200px;
margin-right: 10px;
background: #8C8;
Expand All @@ -17,10 +17,65 @@
color: white;
}

/* page dots */
body .flickity-page-dots {
position: relative;
bottom: auto;
margin-top: 10px;
}

.mb100 {
margin-bottom: 100px;
}

.mb50 {
margin-bottom: 50px;
}

.pt100 {
padding-top: 100px;
}

.pt50 {
padding-top: 50px;
}

h2 {
margin-top: 0;
}

a {
text-decoration: none;
}

/* code */
code {
background: #fafafa;
border: 1px solid #ddd;
white-space: pre-wrap;
padding: 2px 3px;
line-height: 1.2;
border-radius: 3px;
}

/* code block */
pre {
background: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
padding: 1em;
}

/* extra feature */
.extra-feature {
font-weight: 400;
font-size: 16px;
border: 1px solid cornflowerblue;
background: rgba(100, 149, 237, 0.05);
box-shadow: 2px 2px 0 0 rgba(100, 149, 237, 1);
padding: 1px 5px;
border-radius: 3px;
display: inline-block;
transform: translate(0, -.2em);
margin-left: .1em;
}
Loading

0 comments on commit 7790e37

Please sign in to comment.