Sorry if I’m very green with js. I have a template with the slider built in. I edited the jquery.wmuSlider.min.js options (only part I’m qualified for) to have “false” in the slideshow options. I only want to use it to place one image with no sliding or blinking. Is there anything I can do with js code to force this to just display the one image? I changed all the “true” to false and it still blinks. It has two js files that I will post below. Any input would be appreciated.
/*!
* jQuery wmuSlider v2.1
*
* Copyright (c) 2011 Brice Lechatellier
* http://brice.lechatellier.com/
*
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
*/
;(function($) {
$.fn.wmuSlider = function(options) {
/* Default Options
================================================== */
var defaults = {
animation: 'fade',
animationDuration: 600,
slideshow: false,
slideshowSpeed: 7000,
slideToStart: 0,
navigationControl: false,
paginationControl: false,
previousText: 'Previous',
nextText: 'Next',
touch: false,
slide: 'article',
items: 1
};
var options = $.extend(defaults, options);
return this.each(function() {
/* Variables
================================================== */
var $this = $(this);
var currentIndex = options.slideToStart;
var wrapper = $this.find('.wmuSliderWrapper');
var slides = $this.find(options.slide);
var slidesCount = slides.length;
var slideshowTimeout;
var paginationControl;
var isAnimating;
/* Load Slide
================================================== */
var loadSlide = function(index, infinite, touch) {
if (isAnimating) {
return false;
}
isAnimating = false;
currentIndex = index;
var slide = $(slides[index]);
$this.animate({ height: slide.innerHeight() });
if (options.animation == 'fade') {
slides.css({
position: 'absolute',
opacity: 0
});
slide.css('position', 'relative');
slide.animate({ opacity:1 }, options.animationDuration, function() {
isAnimating = false;
});
} else if (options.animation == 'slide') {
if (!infinite) {
wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
isAnimating = false;
});
} else {
if (index == 0) {
wrapper.animate({ marginLeft: -$this.width() / options.items * slidesCount }, options.animationDuration, function() {
wrapper.css('marginLeft', 0);
isAnimating = false;
});
} else {
if (!touch) {
wrapper.css('marginLeft', -$this.width() / options.items * slidesCount);
}
wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
isAnimating = false;
});
}
}
}
if (paginationControl) {
paginationControl.find('a').each(function(i) {
if(i == index) {
$(this).addClass('wmuActive');
} else {
$(this).removeClass('wmuActive');
}
});
}
// Trigger Event
$this.trigger('slideLoaded', index);
};
/* Navigation Control
================================================== */
if (options.navigationControl) {
var prev = $('<a class="wmuSliderPrev">' + options.previousText + '</a>');
prev.click(function(e) {
e.preventDefault();
clearTimeout(slideshowTimeout);
if (currentIndex == 0) {
loadSlide(slidesCount - 1, false);
} else {
loadSlide(currentIndex - 1);
}
});
$this.append(prev);
var next = $('<a class="wmuSliderNext">' + options.nextText + '</a>');
next.click(function(e) {
e.preventDefault();
clearTimeout(slideshowTimeout);
if (currentIndex + 1 == slidesCount) {
loadSlide(0, false);
} else {
loadSlide(currentIndex + 1);
}
});
$this.append(next);
}
/* Pagination Control
================================================== */
/*-- if (options.paginationControl) {
paginationControl = $('<ul class="wmuSliderPagination"></ul>');
$.each(slides, function(i) {
paginationControl.append('<li><a href="#">' + i + '</a></li>');
paginationControl.find('a:eq(' + i + ')').click(function(e) {
e.preventDefault();
clearTimeout(slideshowTimeout);
loadSlide(i);
});
});
$this.append(paginationControl);
}
/* Slideshow
================================================== */
if (options.slideshow) {
var slideshow = function() {
if (currentIndex + 1 < slidesCount) {
loadSlide(currentIndex + 1);
} else {
loadSlide(0, false);
}
slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
}
slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
}
/* Resize Slider
================================================== */
var resize = function() {
var slide = $(slides[currentIndex]);
$this.animate({ height: slide.innerHeight() });
if (options.animation == 'slide') {
slides.css({
width: $this.width() / options.items
});
wrapper.css({
marginLeft: -$this.width() / options.items * currentIndex,
width: $this.width() * slides.length
});
}
};
/* Touch
================================================== */
var touchSwipe = function(event, phase, direction, distance) {
clearTimeout(slideshowTimeout);
if(phase == 'move' && (direction == 'left' || direction == 'right')) {
if (direction == 'right') {
if (currentIndex == 0) {
wrapper.css('marginLeft', (-slidesCount * $this.width() / options.items) + distance);
} else {
wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) + distance);
}
} else if (direction == 'left') {
wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) - distance);
}
} else if (phase == 'cancel' ) {
if (direction == 'right' && currentIndex == 0) {
wrapper.animate({ marginLeft: -slidesCount * $this.width() / options.items }, options.animationDuration);
} else {
wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);
}
} else if (phase == 'end' ) {
if (direction == 'right') {
if (currentIndex == 0) {
loadSlide(slidesCount - 1, false, false);
} else {
loadSlide(currentIndex - 1);
}
} else if (direction == 'left') {
if (currentIndex + 1 == slidesCount) {
loadSlide(0, false);
} else {
loadSlide(currentIndex + 1);
}
} else {
wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);
}
}
};
if (options.touch && options.animation == 'slide') {
if (!$.isFunction($.fn.swipe)) {
$.ajax({
url: 'jquery.touchSwipe.min.js',
async: false
});
}
if ($.isFunction($.fn.swipe)) {
$this.swipe({ triggerOnTouchEnd:false, swipeStatus:touchSwipe, allowPageScroll:'vertical' });
}
}
/* Init Slider
================================================== */
var init = function() {
var slide = $(slides[currentIndex]);
var img = slide.find('img');
img.load(function() {
wrapper.show();
$this.animate({ height: slide.innerHeight() });
});
if (options.animation == 'fade') {
slides.css({
position: 'absolute',
width: '100%',
opacity: 0
});
$(slides[currentIndex]).css('position', 'relative');
} else if (options.animation == 'slide') {
if (options.items > slidesCount) {
options.items = slidesCount;
}
slides.css('float', 'left');
slides.each(function(i){
var slide = $(this);
slide.attr('data-index', i);
});
for(var i = 0; i < options.items; i++) {
wrapper.append($(slides[i]).clone());
}
slides = $this.find(options.slide);
}
resize();
$this.trigger('hasLoaded');
loadSlide(currentIndex);
}
init();
/* Bind Events
================================================== */
// Resize
$(window).resize(resize);
// Load Slide
$this.bind('loadSlide', function(e, i) {
clearTimeout(slideshowTimeout);
loadSlide(i);
});
});
}
})(jQuery);
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-touch-teststyles-prefixes
*/
;window.Modernizr=function(a,b,c){function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(m.join(a+";")+(b||""))}function v(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),n={},o={},p={},q=[],r=function(a,c,d,e){var g,i,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);g=["­","<style>",a,"</style>"].join(""),k.id=h,k.innerHTML+=g,f.appendChild(k),i=c(k,a),k.parentNode.removeChild(k);return!!i},s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)};var z=function(c,d){var f=c.join(""),g=d.length;r(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||j.touch.offsetTop===9},g,d)}([,["@media (",m.join("touch-enabled),("),h,")","{#touch{top:9px;position:absolute}}"].join("")],[,"touch"]);n.touch=function(){return e.touch};for(var A in n)u(n,A)&&(s=A.toLowerCase(),e[s]=n[A](),q.push((e[s]?"":"no-")+s));v(""),i=k=null,e._version=d,e._prefixes=m,e.testStyles=r;return e}(this,this.document);
HTML - originally had four “article” line for slides.
<div class="banner section" id="section-1">
<div class="wrap">
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;"> <img src="images/slide1.jpg" alt=""> </article>
</div>
</div>
<script src="js/jquery.wmuSlider.js"></script>
<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
</div>