Permalink
Browse files

Merge branch 'open-source-site' of https://github.com/mobify/mobifyjs

…into open-source-site
  • Loading branch information...
2 parents 055ed01 + 203df6f commit f348bc5fb78b93ffaf8c649096daeec185872c19 @mobifydave mobifydave committed Aug 1, 2012
@@ -1,9 +1,12 @@
/*
Carousel control base styling
*/
+
.m-carousel-controls {
padding-top: 10px;
+ text-align: center;
}
+
.m-carousel-controls a {
padding: 5px;
-webkit-user-select: none;
@@ -159,4 +162,35 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
+}
+
+
+
+/* scaled slides */
+.m-scaled .m-item {
+ opacity: 0.7;
+ -webkit-backface-visibility: hidden;
+ -webkit-transform: scale(0.75);
+ -moz-transform: scale(0.75);
+ -ms-transform: scale(0.75);
+ -o-transform: scale(0.75);
+ transform: scale(0.75);
+
+ /* Configure animations */
+ /* (0.5s would match the transition length between each,
+ but fast swiping on a phone can result in odd timing.
+ Half-length durations for each transform is a reasonable
+ middle ground.) */
+ -webkit-transition: -webkit-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+ -moz-transition-timing-function: -moz-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+ -o-transition-timing-function: -o-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+ transition-timing-function: transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+}
+.m-scaled .m-active {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ transform: scale(1);
}
@@ -333,20 +333,17 @@ Mobify.UI.Carousel = (function($, Utils) {
.on('click.carousel', click)
.on('mouseout.carousel', end);
- $element.find('[data-slide]').each(function(){
- var $this = $(this);
+ $element.on('click', '[data-slide]', function(e){
+ e.preventDefault();
+ var action = $(this).attr('data-slide')
+ , index = parseInt(action, 10);
- $this.click(function(){
- var action = $this.attr('data-slide')
- , index = parseInt(action, 10);
-
- if (isNaN(index)) {
- self[action]();
- } else {
- self.move(index);
- }
- });
- })
+ if (isNaN(index)) {
+ self[action]();
+ } else {
+ self.move(index);
+ }
+ });
$element.on('afterSlide', function(e, previousSlide, nextSlide) {
self.$items.eq(previousSlide - 1).removeClass(self._getClass('active'));
@@ -8,7 +8,6 @@
<ul class="hide-inactive">
<li><a href="{{ site.baseurl }}/modules/carousel-examples/">Examples</a></li>
<li><a href="{{ site.baseurl }}/modules/carousel/#usage">Usage</a></li>
- <li><a href="{{ site.baseurl }}/modules/carousel/#markup">Markup</a></li>
<li><a href="{{ site.baseurl }}/modules/carousel/#classes">Classes</a></li>
<li><a href="{{ site.baseurl }}/modules/carousel/#methods">Methods</a></li>
<li><a href="{{ site.baseurl }}/modules/carousel/#events">Events</a></li>
@@ -12,7 +12,7 @@
<li class="carousel">
<a href="{{ site.baseurl }}/modules/carousel">
<h3>Carousel</h3>
- <p>A configurable rotating content carousel module.</p>
+ <p>A configurable rotating content carousel.</p>
</a>
</li>
<li class="accordion">
@@ -27,6 +27,8 @@
<p>{description needed}</p>
</a>
</li>
+ <!--
+
<li class="coming-soon">
<a href="{{ site.baseurl }}/modules/">
<h3>Coming Soon</h3>
@@ -45,7 +47,7 @@
<p>We&#8217;re hard at work on more modules. Watch this space.</p>
</a>
</li>
- </ul>
-
-</div>
+ -->
+ </ul>
+</div>
Oops, something went wrong.

0 comments on commit f348bc5

Please sign in to comment.