Image slider transition time
Question
I just created an image slider based off of a tutorial I found. I just stuck some quick pics I found online to test it out, but the reason I am asking a question is because the amount of time it takes to change the image varies so much. It will take forever and then it will start changing the images every second or two. How can I make my slider have a consistent slide transition.
It will probably be best to post my site so you can see what it is doing.
realtorcatch.com
I am using a plugin javascript, so the code is a bunched up. Is there a way to add in my own code so that the same basic features work, but it is of better quality?
The Jquery:
(function (e) {
var t = function (t, n) {
var r = e.extend({}, e.fn.nivoSlider.defaults, n);
var i = {
currentSlide: 0,
currentImage: "",
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
var s = e(t);
s.data("nivo:vars", i).addClass("nivoSlider");
var o = s.children();
o.each(function () {
var t = e(this);
var n = "";
if (!t.is("img")) {
if (t.is("a")) {
t.addClass("nivo-imageLink");
n = t
}
t = t.find("img:first")
}
var r = r === 0 ? t.attr("width") : t.width(),
s = s === 0 ? t.attr("height") : t.height();
if (n !== "") {
n.css("display", "none")
}
t.css("display", "none");
i.totalSlides++
});
if (r.randomStart) {
r.startSlide = Math.floor(Math.random() * i.totalSlides)
}
if (r.startSlide > 0) {
if (r.startSlide >= i.totalSlides) {
r.startSlide = i.totalSlides - 1
}
i.currentSlide = r.startSlide
}
if (e(o[i.currentSlide]).is("img")) {
i.currentImage = e(o[i.currentSlide])
} else {
i.currentImage = e(o[i.currentSlide]).find("img:first")
}
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
var u = e("<img/>").addClass("nivo-main-image");
u.attr("src", i.currentImage.attr("src")).show();
s.append(u);
e(window).resize(function () {
s.children("img").width(s.width());
u.attr("src", i.currentImage.attr("src"));
u.stop().height("auto");
e(".nivo-slice").remove();
e(".nivo-box").remove()
});
s.append(e('<div class="nivo-caption"></div>'));
var a = function (t) {
var n = e(".nivo-caption", s);
if (i.currentImage.attr("title") != "" && i.currentImage.attr("title") != undefined) {
var r = i.currentImage.attr("title");
if (r.substr(0, 1) == "#") r = e(r).html();
if (n.css("display") == "block") {
setTimeout(function () {
n.html(r)
}, t.animSpeed)
} else {
n.html(r);
n.stop().fadeIn(t.animSpeed)
}
} else {
n.stop().fadeOut(t.animSpeed)
}
};
a(r);
var f = 0;
if (!r.manualAdvance && o.length > 1) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
if (r.directionNav) {
s.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + r.prevText + '</a><a class="nivo-nextNav">' + r.nextText + "</a></div>");
e(s).on("click", "a.nivo-prevNav", function () {
if (i.running) {
return false
}
clearInterval(f);
f = "";
i.currentSlide -= 2;
d(s, o, r, "prev")
});
e(s).on("click", "a.nivo-nextNav", function () {
if (i.running) {
return false
}
clearInterval(f);
f = "";
d(s, o, r, "next")
})
}
if (r.controlNav) {
i.controlNavEl = e('<div class="nivo-controlNav"></div>');
s.after(i.controlNavEl);
for (var l = 0; l < o.length; l++) {
if (r.controlNavThumbs) {
i.controlNavEl.addClass("nivo-thumbs-enabled");
var c = o.eq(l);
if (!c.is("img")) {
c = c.find("img:first")
}
if (c.attr("data-thumb")) i.controlNavEl.append('<a class="nivo-control" rel="' + l + '"><img src="' + c.attr("data-thumb") + '" alt="" /></a>')
} else {
i.controlNavEl.append('<a class="nivo-control" rel="' + l + '">' + (l + 1) + "</a>")
}
}
e("a:eq(" + i.currentSlide + ")", i.controlNavEl).addClass("active");
e("a", i.controlNavEl).bind("click", function () {
if (i.running) return false;
if (e(this).hasClass("active")) return false;
clearInterval(f);
f = "";
u.attr("src", i.currentImage.attr("src"));
i.currentSlide = e(this).attr("rel") - 1;
d(s, o, r, "control")
})
}
if (r.pauseOnHover) {
s.hover(function () {
i.paused = true;
clearInterval(f);
f = ""
}, function () {
i.paused = false;
if (f === "" && !r.manualAdvance) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
})
}
s.bind("nivo:animFinished", function () {
u.attr("src", i.currentImage.attr("src"));
i.running = false;
e(o).each(function () {
if (e(this).is("a")) {
e(this).css("display", "none")
}
});
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
if (f === "" && !i.paused && !r.manualAdvance) {
f = setInterval(function () {
d(s, o, r, false)
}, r.pauseTime)
}
r.afterChange.call(this)
});
var h = function (t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height();
for (var s = 0; s < n.slices; s++) {
var o = Math.round(t.width() / n.slices);
if (s === n.slices - 1) {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: t.width() - o * s + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
} else {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: o + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
}
}
e(".nivo-slice", t).height(i);
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var p = function (t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = Math.round(t.width() / n.boxCols),
s = Math.round(e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows);
for (var o = 0; o < n.boxRows; o++) {
for (var a = 0; a < n.boxCols; a++) {
if (a === n.boxCols - 1) {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: t.width() - i * a + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
} else {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: i + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
}
}
}
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var d = function (t, n, r, i) {
var s = t.data("nivo:vars");
if (s && s.currentSlide === s.totalSlides - 1) {
r.lastSlide.call(this)
}
if ((!s || s.stop) && !i) {
return false
}
r.beforeChange.call(this);
if (!i) {
u.attr("src", s.currentImage.attr("src"))
} else {
if (i === "prev") {
u.attr("src", s.currentImage.attr("src"))
}
if (i === "next") {
u.attr("src", s.currentImage.attr("src"))
}
}
s.currentSlide++;
if (s.currentSlide === s.totalSlides) {
s.currentSlide = 0;
r.slideshowEnd.call(this)
}
if (s.currentSlide < 0) {
s.currentSlide = s.totalSlides - 1
}
if (e(n[s.currentSlide]).is("img")) {
s.currentImage = e(n[s.currentSlide])
} else {
s.currentImage = e(n[s.currentSlide]).find("img:first")
}
if (r.controlNav) {
e("a", s.controlNavEl).removeClass("active");
e("a:eq(" + s.currentSlide + ")", s.controlNavEl).addClass("active")
}
a(r);
e(".nivo-slice", t).remove();
e(".nivo-box", t).remove();
var o = r.effect,
f = "";
if (r.effect === "random") {
f = new Array("sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse");
o = f[Math.floor(Math.random() * (f.length + 1))];
if (o === undefined) {
o = "fade"
}
}
if (r.effect.indexOf(",") !== -1) {
f = r.effect.split(",");
o = f[Math.floor(Math.random() * f.length)];
if (o === undefined) {
o = "fade"
}
}
if (s.currentImage.attr("data-transition")) {
o = s.currentImage.attr("data-transition")
}
s.running = true;
var l = 0,
c = 0,
d = "",
m = "",
g = "",
y = "";
if (o === "sliceDown" || o === "sliceDownRight" || o === "sliceDownLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
n.css({
top: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUp" || o === "sliceUpRight" || o === "sliceUpLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
n.css({
bottom: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUpDown" || o === "sliceUpDownRight" || o === "sliceUpDownLeft") {
h(t, r, s);
l = 0;
c = 0;
var b = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function () {
var n = e(this);
if (c === 0) {
n.css("top", "0px");
c++
} else {
n.css("bottom", "0px");
c = 0
}
if (b === r.slices - 1) {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
b++
})
} else if (o === "fold") {
h(t, r, s);
l = 0;
c = 0;
e(".nivo-slice", t).each(function () {
var n = e(this);
var i = n.width();
n.css({
top: "0px",
width: "0px"
});
if (c === r.slices - 1) {
setTimeout(function () {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "fade") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: t.width() + "px"
});
m.animate({
opacity: "1.0"
}, r.animSpeed * 2, "", function () {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInRight") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function () {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInLeft") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1",
left: "",
right: "0px"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function () {
m.css({
left: "0px",
right: ""
});
t.trigger("nivo:animFinished")
})
} else if (o === "boxRandom") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
y = v(e(".nivo-box", t));
y.each(function () {
var n = e(this);
if (c === g - 1) {
setTimeout(function () {
n.animate({
opacity: "1"
}, r.animSpeed, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function () {
n.animate({
opacity: "1"
}, r.animSpeed)
}, 100 + l)
}
l += 20;
c++
})
} else if (o === "boxRain" || o === "boxRainReverse" || o === "boxRainGrow" || o === "boxRainGrowReverse") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
var w = 0;
var E = 0;
var S = [];
S[w] = [];
y = e(".nivo-box", t);
if (o === "boxRainReverse" || o === "boxRainGrowReverse") {
y = e(".nivo-box", t)._reverse()
}
y.each(function () {
S[w][E] = e(this);
E++;
if (E === r.boxCols) {
w++;
E = 0;
S[w] = []
}
});
for (var x = 0; x < r.boxCols * 2; x++) {
var T = x;
for (var N = 0; N < r.boxRows; N++) {
if (T >= 0 && T < r.boxCols) {
(function (n, i, s, u, a) {
var f = e(S[n][i]);
var l = f.width();
var c = f.height();
if (o === "boxRainGrow" || o === "boxRainGrowReverse") {
f.width(0).height(0)
}
if (u === a - 1) {
setTimeout(function () {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3, "", function () {
t.trigger("nivo:animFinished")
})
}, 100 + s)
} else {
setTimeout(function () {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3)
}, 100 + s)
}
})(N, T, l, c, g);
c++
}
T--
}
l += 100
}
}
};
var v = function (e) {
for (var t, n, r = e.length; r; t = parseInt(Math.random() * r, 10), n = e[--r], e[r] = e[t], e[t] = n);
return e
};
var m = function (e) {
if (this.console && typeof console.log !== "undefined") {
console.log(e)
}
};
this.stop = function () {
if (!e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = true;
m("Stop Slider")
}
};
this.start = function () {
if (e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = false;
m("Start Slider")
}
};
r.afterLoad.call(this);
return this
};
e.fn.nivoSlider = function (n) {
return this.each(function (r, i) {
var s = e(this);
if (s.data("nivoslider")) {
return s.data("nivoslider")
}
var o = new t(this, n);
s.data("nivoslider", o)
})
};
e.fn.nivoSlider.defaults = {
effect: "random",
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3e3,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: "Prev",
nextText: "Next",
randomStart: false,
beforeChange: function () {},
afterChange: function () {},
slideshowEnd: function () {},
lastSlide: function () {},
afterLoad: function () {}
};
e.fn._reverse = [].reverse
})(jQuery)
2 answers
solution1
0 2015-10-19 21:30:04
Things like this :
r.startSlide = Math.floor(Math.random() * i.totalSlides)
are the issue here, it has been programmed deliberately as it is.
There are much simpler sliders, even with css only.
I have one that is fully responsive, let me know if you want that.
solution2
0 2015-10-21 12:10:22
@Becky Ok here goes, i will explain the most important things. Use the img tag for this in the HTML, this way it's very easy to defer load or lazy load the pics later on.
In the CSS, the first thing is the keyframes, if you would like the images to slide differently, let me know, i can change this. This example will work on all devices and is fully responsive, some very old phones will just slide th epics from left to right, ie the phones which do not support transforms, but it will still work, you would need some extra prefixes for this, i can add them if you like.
Line 23 i wrap the whole thing to be displayed as flexbox. Line 41 we just declare the width of the figure element(you can use a div here too, it does not really matter), the width is 800%, because we have 8 pics in this slider.if it were 5 pics, we would say width is 500% etc. We take out margin, padding etc, the img float left is just to avoid some inconsistencies in IE. What this slider will do is, it pushes the pics to the left when we change the margin, see in the keyframes, we push it left 100% for the next pic, 200% for the one after that etc.
We declare the img width in the figure element to be 12.5%(100% / 8pics=12.5%), if we had 5 pics, the img width would be 20% etc. And finally, the slider div is defined, you can change the border here, or the box shadow, and the background color, so when the pics do not fill out the frame, you can have the background color of choice, i have set it to transparent here.
Overflow hidden is mandatory for this slider, the width is set to 80% OR a maximum of 500pix, whichever occurs first.
<div class="superslide"><div id="slider">
<figure>
<img src="http://generalunion.org/Joomla/images/holidays.jpg"
width=350 height=350>
http://codepen.io/damianocel/pen/OyzaZB
That is it, no JS, very light weight, responsive and works on all devices. You can use it as full backkground slider etc, just make sure the pics are all the same size.
to change the speed of the animations, just go to the lines 49 and 50 to change the time parameter(28s here).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript image slider transition
Add transition css to image slider
Image slider hover stop and animated transition
Add transition effects to my image slider
Image slider transition not cycling back properly
JQuery slider: Transition from last image to first
Obtaining a smooth transition in an image slider animation
Adding transition effect on my image slider
Revslider slider image data-transition for left and right Navigation
JQuery image slider and CSS transition works only once
Related Tags