Hola,
necesitaria ayuda. Estoy utilizando un theme prefabricado y me gustaria poder utilizar el Carousel que viene en el ejemplo de abajo.
Me gustaria repetir este Carousel en la misma página 4-5 veces.
Lo que pasa que si copio y pego el div del Carousel más veces, este se mostra bien pero los comandos "next" "prev" se cruzan entre uno y otro.
Alguna idea de como solucionarlo? He intentado darle nombre distinto a la class del div pero creo que depende del script de java
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slider.css">
<link rel="stylesheet" href="css/zerogrid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/sForm.js"></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<script>
$(window).load(function(){
$('.slider')._TMS({
show:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:800,
preset:'fade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:8000,
numStatus:false,
banners:false,
waitBannerAnimation:false,
progressBar:false
})
});
$(window).load (
function(){$('.carousel1').carouFredSel({auto: false,prev: '.prev',next: '.next', width: 960, items: {
visible : {min: 1,
max: 4
},
height: 'auto',
width: 240,
}, responsive: false,
scroll: 1,
mousewheel: false,
swipe: {onMouse: false, onTouch: false}});
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<div class="main">
<!--==============================header=================================-->
<header>
<div class="zerogrid">
<div class="col-full">
<div class="wrap-col">
<h1><a href="index.html"><img src="images/logo.png" alt="EXTERIOR"></a> </h1>
<div class="menu_block">
<nav>
<ul class="sf-menu">
<li class="current"><a href="index.html">Home</a></li>
<li class="with_ul"><a href="index-1.html">About Us</a>
<ul>
<li><a href="#"> cuisine</a></li>
<li><a href="#">Good rest</a></li>
<li><a href="#">Services</a></li>
</ul>
</li>
<li><a href="index-2.html">Menu</a></li>
<li><a href="index-3.html">Portfolio</a></li>
<li><a href="index-4.html">News </a></li>
<li><a href="index-5.html">Contacts</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</header>
<div class="slider-relative">
<div class="slider-block">
<div class="slider">
<ul class="items">
<li><img src="images/slide.jpg" alt=""></li>
<li><img src="images/slide1.jpg" alt=""></li>
<li class="mb0"><img src="images/slide2.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<!--=======content================================-->
<div class="content page1">
<div class="zerogrid">
<div class="row">
<div class="col-3-5">
<div class="wrap-col">
<h2>Welcome</h2>
<div class="page1_block col1">
<div class="col-1-3"><img src="images/welcome_img.png" alt=""></div>
<div class="col-2-3">
<div class="extra_wrapper">
<p><span class="col2"><a href="http://blog.templatemonster.com/free-website-templates/" rel="nofollow">Click here</a></span> for more info about this free website template created by TemplateMonster.com </p>
Aenean nonummy hendrerit mau rellus porta. Fusce suscipit varius m sociis natoque penaibet magni parturient montes nasetur ridiculumula dui. <br>
<a href="#" class="btn">more</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col-2-5">
<div class="wrap-col">
<h2>Features</h2>
<ul class="list">
<li><a href="#">Unlimited consultations and/or planning</a></li>
<li><a href="#">Expert advice on traditions, customs, aetiquette</a></li>
<li><a href="#">Determine and stay within budget</a></li>
<li><a href="#">Choosing the right Wedding Venue</a></li>
<li><a href="#">Provide preferred vendor's list</a></li>
<li><a href="#">Assist with wedding scheme and design</a></li>
</ul>
</div>
</div>
</div>
<div class="col-full">
<div class="hor_separator"></div>
</div>
<div class="row">
<div class="col-full">
<div class="wrap-col">
<div class="car_wrap">
<h2>Best Choice</h2>
<a href="#" class="prev"></a><a href="#" class="next"></a>
<ul class="carousel1">
<li><div><img src="images/page1_img1.jpg" alt="">
<div class="col1 upp"> <a href="#">kim Lorem ipsum doamet consectet</a></div>
<span> Dorem ipsum dolor amet consectetur</span>
<div class="price">45$</div></div>
</li>
<li><div><img src="images/page1_img2.jpg" alt="">
<div class="col1 upp"> <a href="#">Lorem ipsum doamet consectet</a></div>
<span> Dorem ipsum dolor amet consectetur</span>
<div class="price">45$</div></div>
</li>
<li><div><img src="images/page1_img3.jpg" alt="">
<div class="col1 upp"> <a href="#">Lorem ipsum doamet consectet</a></div>
<span> Dorem ipsum dolor amet consectetur</span>
<div class="price">45$</div></div>
</li>
<li><div><img src="images/page1_img4.jpg" alt="">
<div class="col1 upp"> <a href="#">Lorem ipsum doamet consectet</a></div>
<span> Dorem ipsum dolor amet consectetur</span>
<div class="price">45$</div></div>
</li>
<li><div><img src="images/page1_img3.jpg" alt="">
<div class="col1 upp"> <a href="#">Lorem ipsum doamet consectet kim</a></div>
<span> Dorem ipsum dolor amet consectetur</span>
<div class="price">45$</div></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="bottom_block">
<div class="col-1-2">
<h3>Follow Us</h3>
<div class="socials">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<nav><ul>
<li class="current"><a href="index.html">Home</a></li>
<li ><a href="index-1.html">About Us</a></li>
<li><a href="index-2.html">Menu</a></li>
<li><a href="index-3.html">Portfolio</a></li>
<li><a href="index-4.html">News </a></li>
<li><a href="index-5.html">Contacts</a></li>
</ul></nav>
</div>
<div class="col-1-2">
<h3>Email Updates</h3>
<p class="col1">Join our digital mailing list and get news<br> deals and be first to know about events</p>
<form id="newsletter">
<div class="success">Your subscribe request has been sent!</div>
<label class="email">
<input type="email" value="Enter e-mail address" >
<a href="#" class="btn" data-type="submit">subscribe</a>
<span class="error">*This is not a valid email address.</span>
</label>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="zerogrid">
<div class="col-full">
<div class="wrap-col">
Gourmet © 2013 | <a href="#">Privacy Policy</a> | <a href="http://www.zerotheme.com/" rel="nofollow">Html5 Templates</a> designed by <a href="http://www.templatemonster.com/" rel="nofollow">TemplateMonster.com</a> - <a href="http://www.zerotheme.com/" rel="nofollow">Zerotheme.com</a>
</div>
</div>
</div>
</footer>
</body>
</html>