Skip to content

Commit

Permalink
Added sync behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@backflip
backflip committed Jan 12, 2014
1 parent edc601a commit 92e5673
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 7 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "jquery-carousel",
"version": "1.1.2",
"version": "1.1.3",
"main": ["./jquery.carousel.js"],
"author": "Thomas Jaggi",
"license": ["MIT", "GPL"],
Expand Down
53 changes: 51 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ <h3>CSS</h3>

<h3>Slider adapting height based on currently visible slides</h3>

<div class="example" id="example-06-a">
<div class="example" id="example-10">
<div class="carousel"></div>

<div class="code">
Expand Down Expand Up @@ -353,7 +353,7 @@ <h3>CSS</h3>

<h3>Vertical slider</h3>

<div class="example" id="example-06-b">
<div class="example" id="example-06">
<div class="carousel"></div>

<div class="code">
Expand All @@ -380,6 +380,55 @@ <h3>JavaScript</h3>
});</code></pre>
</div>

<div class="css">
<h3>CSS</h3>

<pre><code class="lang-css">/* Default (css/jquery.carousel.css) */</code></pre>
</div>
</div>
</div>

</li>
<li>

<h3>Synced sliders</h3>

<div class="example" id="example-11">
<div class="carousel"></div>

<div class="code">
<div class="html">
<h3>HTML</h3>

<pre><code>&lt;ul class="carousel" id="carousel-11-a"&gt;
&lt;li&gt;1&lt;/li&gt;
&lt;li&gt;2&lt;/li&gt;
&lt;li&gt;3&lt;br /&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/li&gt;
&lt;li&gt;4&lt;/li&gt;
&lt;li&gt;5&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="carousel" id="carousel-11-b"&gt;
&lt;li&gt;1&lt;/li&gt;
&lt;li&gt;2&lt;/li&gt;
&lt;li&gt;3&lt;br /&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/li&gt;
&lt;li&gt;4&lt;/li&gt;
&lt;li&gt;5&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>

<div class="js">
<h3>JavaScript</h3>

<pre class="prettyprint"><code>$('#carousel-11-a').carousel({
$syncedCarousels: $('#carousel-11-b')
});

$('#carousel-11-b').carousel({
$syncedCarousels: $('#carousel-11-a')
});</code></pre>
</div>

<div class="css">
<h3>CSS</h3>

Expand Down
25 changes: 22 additions & 3 deletions jquery.carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
pauseAutoplayOnHover: true,
keyboardNav: true, // enable arrow and [p][n] keys for prev / next actions
groupedHandles: true, // combine handles to group if visibleSlides > 1 (e.g. "1-3", "4-6", "7")
fixedHeight: true // set height based on highest slide
fixedHeight: true // set height based on highest slide
},
elements: { // which navigational elements to show
prevNext: true, // buttons for previous / next slide
Expand All @@ -41,7 +41,8 @@
distance: 0.3 // multiplied by width of slider
}
},
visibleSlides: 1 // how many slides to fit within visible area (0: calculate based on initial width)
visibleSlides: 1, // how many slides to fit within visible area (0: calculate based on initial width)
$syncedCarousels: null // jQuery collection of carousel elements to sync with
},

utils = {
Expand Down Expand Up @@ -121,6 +122,7 @@

// Namespace events for navigational elements (e.g. prev/next buttons)
events = utils.getNamespacedEvents(!support.touch ? 'click keydown' : 'touchstart'),
syncEvent = 'carouselUpdate',

// Detect movements if touch events are supported
hasMoved = false,
Expand Down Expand Up @@ -243,6 +245,13 @@
}, this), 100);
}, this));

// Sync with other carousels
if (this.settings.$syncedCarousels) {
this.$dom.slider.on(syncEvent, $.proxy(function(event, params) {
this.goTo(params.index, false, true);
}, this));
}

// Save instance to data attribute
$dom.slider.data(namespace, this);

Expand Down Expand Up @@ -447,7 +456,7 @@
}
},

goTo: function(i, skipAnimation){
goTo: function(i, skipAnimation, synced){
var self = this,
index = this._getValidatedTarget(i),
currentSlideIndex = this._getOriginalSlideIndex(index),
Expand Down Expand Up @@ -489,6 +498,12 @@
callback();
});
}

if (this.settings.$syncedCarousels && !synced) {
this.settings.$syncedCarousels.trigger(syncEvent, {
index: index
});
}
} else {
this.$dom.slider.css(cssPosition);
}
Expand Down Expand Up @@ -880,6 +895,10 @@

self.$dom.slider.css(animProps);

if (self.settings.$syncedCarousels) {
self.settings.$syncedCarousels.css(animProps);
}

hasMoved = true;

e.preventDefault();
Expand Down
2 changes: 1 addition & 1 deletion jquery.carousel.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 92e5673

Please sign in to comment.