Tenho numa página dois slides de imagens com tamanhos diferentes e este código que queria adaptar aos dois, infelizmente quando troco o id por uma class e uso o slider as imagens repetem-se, presumo que haja conflito entre os dois.
Código (Javascript):
Código (Javascript):
jQuery(document).ready(function ($) {
var slideCount = $('#slider1 ul li').length;
var slideWidth = $('#slider1 ul li').width();
var slideHeight = $('#slider1 ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider1').css({ width: slideWidth, height: slideHeight });
$('#slider1 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider1 ul li:last-child').prependTo('#slider1 ul');
$(window).resize(function(){
var slideCount = $('#slider1 ul li').length;
var slideWidth = $('#slider1 ul li').width();
var slideHeight = $('#slider1 ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider1').css({ width: slideWidth, height: slideHeight });
$('#slider1 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider1 ul li:last-child').prependTo('#slider1 ul');
});
function moveLeft() {
$('#slider1 ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider1 ul li:last-child').prependTo('#slider1 ul');
$('#slider1 ul').css('left', '');
});
};
function moveRight() {
$('#slider1 ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider1 ul li:first-child').appendTo('#slider ul');
$('#slider1 ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
var slideCount = $('#slider1 ul li').length;
var slideWidth = $('#slider1 ul li').width();
var slideHeight = $('#slider1 ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider1').css({ width: slideWidth, height: slideHeight });
$('#slider1 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider1 ul li:last-child').prependTo('#slider1 ul');
$(window).resize(function(){
var slideCount = $('#slider1 ul li').length;
var slideWidth = $('#slider1 ul li').width();
var slideHeight = $('#slider1 ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider1').css({ width: slideWidth, height: slideHeight });
$('#slider1 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider1 ul li:last-child').prependTo('#slider1 ul');
});
function moveLeft() {
$('#slider1 ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider1 ul li:last-child').prependTo('#slider1 ul');
$('#slider1 ul').css('left', '');
});
};
function moveRight() {
$('#slider1 ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider1 ul li:first-child').appendTo('#slider ul');
$('#slider1 ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});