Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Messing around with touch events--soon to be overwritten.

  • Loading branch information...
commit e89fd059e4f09eb270548bc856c9954b2b4e8997 1 parent 187df52
@Wilto authored
Showing with 69 additions and 49 deletions.
  1. +29 −1 demo.html
  2. +40 −48 plugin.js
View
30 demo.html
@@ -5,7 +5,6 @@
<title>Carousel Plugin</title>
<meta name="description" content="There are many like it, but this one is mine." />
- <link rel="stylesheet" href="css/style.css" media="screen" />
<style type="text/css" media="screen">
ul { margin: 0; padding: 0; list-style: none; }
a.disabled { color: #aaa; }
@@ -46,6 +45,35 @@
</ul>
</div>
+ <div class="slidewrap">
+ <ul class="slidecontrols">
+ <li><a href="#slider2" class="next">Next</a></li>
+ <li><a href="#slider2" class="prev">Prev</a></li>
+ </ul>
+ <ul class="slider" id="slider2">
+ <li class="slide">
+ <h2>First Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
+ </li>
+ <li class="slide">
+ <h2>Second Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
+ </li>
+ <li class="slide">
+ <h2>Third Slide</h2>
+ <p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
+ </li>
+ <li class="slide">
+ <h2>Fourth Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
+ </li>
+ <li class="slide">
+ <h2>Fif' Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
+ </li>
+ </ul>
+ </div>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="plugin.js"></script>
<script type="text/javascript" charset="utf-8">
View
88 plugin.js
@@ -7,76 +7,68 @@
nextSlide: '.next',
speed: 500
},
- opt = $.extend(defaults, config);
- transitionSupport = document.body.style.webkitTransition !== undefined ||
- document.body.style.MozTransition !== undefined ||
- document.body.style.msTransition !== undefined ||
- document.body.style.OTransition !== undefined ||
- document.body.style.transition !== undefined;
+ opt = $.extend(defaults, config),
+ dStyle = document.body.style,
+ transitionSupport = dStyle.webkitTransition !== undefined ||
+ dStyle.MozTransition !== undefined ||
+ dStyle.msTransition !== undefined ||
+ dStyle.OTransition !== undefined ||
+ dStyle.transition !== undefined;
$(opt.prevSlide).addClass('disabled');
- function moveNext($slider) {
+ function move($slider, direction) {
var leftmargin = $slider.attr('style').match(/margin\-left: ?(.*)%;/) && parseFloat(RegExp.$1),
$slide = $slider.find(opt.slide);
- if (!$slider.is(":animated") && (-leftmargin) != (($slide.length - 1) * 100)) {
- leftmargin -= 100;
- if(transitionSupport) {
- $slider.css('marginLeft', leftmargin + "%");
+ if(!$slider.is(":animated")) {
+ if(direction == 'next') {
+ leftmargin -= 100;
} else {
- $slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
+ leftmargin += 100;
}
- if((-leftmargin) == ($slide.length - 1) * 100) {
- return false;
- }
- }
- }
-
- function movePrev($slider) {
- var leftmargin = $slider.attr('style').match(/margin\-left: ?(.*)%;/) && parseFloat(RegExp.$1);
-
- if(!$slider.is(":animated") && (leftmargin != 0)) {
- leftmargin += 100;
+
if(transitionSupport) {
$slider.css('marginLeft', leftmargin + "%");
} else {
$slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
- }
- if(leftmargin == 0) {
+ }
+
+ if((-leftmargin) == ($slide.length - 1) * 100 || leftmargin == 0) {
return false;
}
}
}
+
$(opt.nextSlide + ',' + opt.prevSlide).click(function(e) {
var $el = $(this),
link = $el.attr('href'),
$target = $(opt.slider).filter(link);
-// $target = $(opt.slider).filter("[data-slider='" + $el.attr('data-slider') + "']");
-
- $(opt.nextSlide).each(function() {
- if($(this)[0] == $el[0]) {
- if(moveNext($target) === false) {
- $el.addClass('disabled');
- };
- $(opt.prevSlide).filter(function() {
- return this.getAttribute('href') === link;
- }).removeClass('disabled');
- }
- });
-
- $(opt.prevSlide).each(function() {
- if($(this)[0] == $el[0]) {
- if(movePrev($target) === false) {
- $el.addClass('disabled');
- };
- $(opt.nextSlide).filter(function() {
- return this.getAttribute('href') === link;
- }).removeClass('disabled');
- }
- });
+
+ if(!$el.hasClass('disabled')) {
+ $(opt.nextSlide).each(function() {
+ if(this == $el[0]) {
+ if(move($target, 'next') === false) {
+ $el.addClass('disabled');
+ };
+ $(opt.prevSlide).filter(function() {
+ return this.getAttribute('href') === link;
+ }).removeClass('disabled');
+ }
+ });
+ $(opt.prevSlide).each(function() {
+ if(this == $el[0]) {
+ if(move($target, 'prev') === false) {
+ $el.addClass('disabled');
+ };
+ $(opt.nextSlide).filter(function() {
+ return this.getAttribute('href') === link;
+ }).removeClass('disabled');
+ }
+ });
+ }
e.preventDefault();
});
Please sign in to comment.
Something went wrong with that request. Please try again.