Comunidad PHPeros
Lenguajes => (X)HTML => Mensaje iniciado por: pipo309 en 15 de Agosto de 2013, 16:48:00 pm
-
Hola buenas tengo una pagina web y necesito que mi slider se mueva automaticamente pero este no lo hace el usuario puede cambiar las imagenes pero se queda estatica y quiero que se mueva automaticamente para darle mas vida a la pagina
Aqui os dejo el codigo para ver si me pueden ayudar
<!-- slider-holder -->
<div class="slider-holder">
<!-- slider -->
<div class="slider">
<div class="socials">
<a href="https://facebook.com/MiPorton" class="facebook-ico">facebook-ico</a>
<a href="https://twitter.com/MiPorton" class="twitter-ico">twitter-ico</a>
<a href="#" class="skype-ico">skype-ico</a>
<a href="#" class="rss-ico">rss-ico</a>
<div class="cl"> </div>
</div>
<div class="arrs">
<a href="#" class="prev-arr"></a>
<a href="#" class="next-arr"></a>
</div>
<ul>
<li id="img1">
<div class="slide-cnt">
<h4>CON UNA SIMPLE LLAMADA </h4>
<h2>Abra su porton</h2>
<h1 id="logo2"> </h1>
<p>De manera sencilla, nuestro sistema autentifica su numero y de estar registrado procedera a aperturar su porton, de ser un caso contrario si es un numero no autorizado el sistema simplemente colgara la llamada.</p>
</div>
<img src="css/images/iphone mi porton.png" width="398" height="376" align="right"></li>
<li id="img2">
<div class="slide-cnt">
<h4>CONTROLE SU PORTON</h4>
<h2>Gestion web sencilla</h2>
<p>Para altas y bajas de usuarios, configure sus horarios horarios de apertura, y tenga un registro inmediato de accesos.</p>
</div>
<img src="css/images/mac-img.png" alt="" /></li>
<li id="img3">
<div class="slide-cnt">
<h4>Sistema de seguridad</h4>
<h2>BLINDADO</h2>
<p>No te baje mas de tu auto, calcula cierta distacia y marca, ademas puedes estar seguro que mas nadie podra entrar porque el sistema solo reconoce los numeros autorizados. </p>
</div>
<img src="css/images/candado.png" alt="" /></li>
<li id="img4">
<div class="slide-cnt">
<h4>Olvidese de los mandos</h4>
<h2>SU CELULAR </h2>
<p>Sera su control ahora, usted podra abrir mas de un porton, solo tiene que configurar los diferentes numeros y listo. </p>
</div>
<img src="css/images/Imagen7.png" alt="" />
</li>
</ul>
</div>
<!-- end of slider -->
-
¿Cómo pretendes que podamos ayudarte sin el Javscript?.
Saludos.
-
Aqui dejo el java
$(function() {
$(document).on('focusin', '.field, textarea', function() {
if(this.title==this.value) {
this.value = '';
}
}).on('focusout', '.field, textarea', function(){
if(this.value=='') {
this.value = this.title;
}
});
$('.main .col:last, .main .entry:last, .footer-nav ul li:last').addClass('last');
$('.main .cols .col ul li:first-child, #navigation ul li:first-child').addClass('first');
$('.main .cols .col ul li:odd').addClass('odd');
// mobile-navigation
$('#navigation a.nav-btn').click(function(){
$(this).toggleClass('active');
$(this).parent().find('ul').slideToggle();
})
});
$(window).load(function(){
//slider thumb
$('.slider ul').carouFredSel({
align: 'center',
circular: true,
auto: false,
items: {
visible: 1,
},
prev: '.prev-arr',
next: '.next-arr'
});
$('#thumbs').carouFredSel({
align: false,
scroll: {
items: 1,
},
items: {
visible: 4,
},
auto: false,
infinite: true,
prev: '#prev',
next: '#next'
});
$('#thumbs a').click(function() {
$('.slider ul').trigger('slideTo', '#' +this.href.split('#').pop());
$('#thumbs a.selected').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$(window).resize(function() {
carosel();
})
function carosel(){
//slider thumb
$('.slider ul').carouFredSel({
align: 'center',
circular: true,
auto: false,
items: {
visible: 1,
},
prev: '.prev-arr',
next: '.next-arr'
});
$('#thumbs').carouFredSel({
align: false,
scroll: {
items: 1,
},
items: {
visible: 4,
},
auto: false,
infinite: true,
prev: '#prev',
next: '#next'
});
$('#thumbs a').click(function() {
$('.slider ul').trigger('slideTo', '#' +this.href.split('#').pop());
$('#thumbs a.selected').removeClass('selected');
$(this).addClass('selected');
return false;
});
}