Comunidad de diseño web y desarrollo en internet online

Problema con timing slideshow

Citar            
MensajeEscrito el 18 Ago 2015 02:53 pm
Hola chicxs, cómo andan?
tengo un problema con el timing del slideshow de una web, pasa muy lento y necesito acelerar el cambio de imagen a imagen, saben como podria modificarlo? intente en el css de la web (es one page) en la parte de este còdigo:

Código CSS :

.nbs-flexisel-item:hover img {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.nbs-flexisel-item img {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.nbs-flexisel-item a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.nbs-flexisel-item a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  visibility: hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0);
}
.ie8 .nbs-flexisel-item a:after {
  background: url('../images/header_bgr.png') repeat 0 0;
}
.nbs-flexisel-item a:hover:after {
  visibility: visible;
  background: rgba(0, 0, 0, 0.4);
}
.nbs-flexisel-item img {
  width: 100%;
}

/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
  position: absolute;
  top: 0 !important;
  height: 100%;
  width: 50px;
  display: block;
  z-index: 1000;
  cursor: pointer;



Estoy en el lugar correcto? cómo pudo configurarlo con otro tiempo?

Saludos

Por gamayaq

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 03 Sep 2015 08:17 am
A mi me pasó que tenía un Slider hecho con un dinamismo CSS mediante la propiedad "transition" y me iba relentizado, sin embargo, hice un en JavaScript y ahí me iba mucho mejor. Puedes probar a hacerlo por JavaScript aunque sea un poco más engorroso.

De todas maneras, la propiedad que te permite acelerar o decelerar una transición CSS es "transition-duration". Puedes obtener más información acerca de dicha propiedad en el siguiente link:

http://www.w3schools.com/cssref/css3_pr_transition-duration.asp

Resumiendo, establece el tiempo que va a tardar en hacer una acción según el cambio de las propiedades CSS que tienes registradas dentro de la propiedad "transition-property". La misma propiedad "transition" consta de 3 partes referidas a las propiedades "transition-duration", "transition-property" y "transition-timing-function".

Espero que te sirva de algo. Un saludo.

Por KyMAN

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Sep 2015 06:12 pm
Muchas gracias!!!! pensé que nadie respondería jajajajaja :) gracias!

Por gamayaq

3 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.