Carregar carousel div
Eu criei um carrosel de imagens, na hora de testar com os script dentro da pagina basc.html ( pagina aonde encontra tabela com as imagens) deu certo, mostrava 4 imagens e trocava conforme apertava next e prev
Mas na hora q carrego a pagina basc.html dentro da div #corpo_conteudo q esta na pagina index.php o carrosel não funciona mais aparesse todas as imagens na tela
Index.php
<head>
<title>Efeito Carrossel com Jquery</title>
<!-- inclusão do javascript-->
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" src="js/carrossel.js"></script>
<!-- inclusão do CSS-->
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="#" onclick="abrirPag('12/teste.html');"><img src="imagens/esc.png" width="100" height="100" border="0" /></a>
<div id="corpo_conteudo">
</div>
</body>basc.html
<body>
<script type="text/javascript">
$(function(){
$("#carrossel").jCarouselLite({
btnPrev : '.prev',
btnNext : '.next',
speed : 2000,
visible : 4
})
})
</script>
<div id="carrossel">
<ul>
<li><a href="basc/images/32.jpg" rel="lightbox[plants]" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="160" height="120" border="0" /></a></li>
<li><a href="basc/images/35.jpg" rel="lightbox[plants]" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="160" height="120" border="0"/></a></li>
<li><a href="basc/images/32.jpg" rel="lightbox[plants]" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="160" height="120" border="0" /></a></li>
<li><a href="basc/images/35.jpg" rel="lightbox[plants]" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="160" height="120" border="0"/></a></li>
<li><a href="basc/images/32.jpg" rel="lightbox[plants]" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="160" height="120" border="0" /></a></li>
<li><a href="basc/images/35.jpg" rel="lightbox[plants]" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="160" height="120" border="0"/></a></li>
</ul>
</div>
<p>
<a href="#" class="prev">Anterior</a>
<a href="#" class="next">Próximo</a>
</p>
</body>carrosel.js
$(function(){
$("#carrossel").jCarouselLite({
btnPrev : '.prev',
btnNext : '.next',
speed : 2000,
visible : 4
})
})estilo.css
[code]
*{
margin:0;
padding:0;
}
#carrossel{
width:750px;
height:250px;
overflow:hidden;
margin:0 auto;
}#carrossel ul{
list-style:none;
}#carrossel ul li{
float:left;
display:inline;
}p{
text-align:center;
}Discussão (4)
Carregando comentários...