Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] No funciona Carousel integrado de Bootstrap 3

Estas en el tema de No funciona Carousel integrado de Bootstrap 3 en el foro de Jquery en Foros del Web. Hola estoy diseñando una web que pueden [URL="http://bit.ly/10cw200"]ver aquí[/URL]. Como ven el carousel no funciona. Llevo varios dias peleándome porque he probado unos 5 carouseles ...
  #1 (permalink)  
Antiguo 04/10/2014, 14:47
 
Fecha de Ingreso: diciembre-2008
Mensajes: 44
Antigüedad: 15 años, 3 meses
Puntos: 2
No funciona Carousel integrado de Bootstrap 3

Hola estoy diseñando una web que pueden [URL="http://bit.ly/10cw200"]ver aquí[/URL].

Como ven el carousel no funciona. Llevo varios dias peleándome porque he probado unos 5 carouseles y sólo hize funcionar uno aunque tenía un fallo de maquetación que no logré corregir y por eso he ido probando otros. La verdad que no soy un experto en desarrolo web pero seguir las instrucciones de añadir un plugin de jquery no tiene porque ser un problema, pero en mi caso parece que si porque parezco un inutil.

Así que el 5º carousel que pruebo es el que biene integrado con Bootstrap y aún así tampoco funciona. He revisado el código y llevo días sin corregir este problema hasta pensaba que a lo mejor el jquery no se cargaba pero ya usé un código para devolverme una ventana conforme se cargó. También probé jquery 1 y la 2, también por cdn de google.

Total que estoy por tirarme por la ventana porque no consigo hacer funcionar un simple copia/pega.

Si alguien puede ayudarme me será de gran ayuda.

Muchas gracias
  #2 (permalink)  
Antiguo 04/10/2014, 19:27
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: No funciona Carousel integrado de Bootstrap 3

espero que aún no te hayas tirado por la ventana o que por lo menos vivas en una planta baja

estoy viendo el código fuente de tu web y.... ¿donde está el javascript?
- en el header del sitio no hay ningún javascript
- en el footer incluyes jquery (2 veces?) y luego inicias carousel() en el document ready.. pero donde está el javascript del plugin de jquery que define que es lo que hace carousel() ??
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 05/10/2014, 02:48
 
Fecha de Ingreso: diciembre-2008
Mensajes: 44
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: No funciona Carousel integrado de Bootstrap 3

Primero de todo disculpen pero he publicado la pregunta en el foro HTML y veo que hay uno de Javascript/jQuery así que es allí donde debería haberlo puesto. Si algún moderador puede moverlo.

webosiris muchas gracias por tu ayuda. Resulta que he seguido la documentación de la página oficial, [URL="http://getbootstrap.com/javascript/#carousel"]exactamente aquí[/URL] (desconozco porque en este foro usando el icono para insertar url no las representa correctamente al publicar el mensaje).

El tema es que he hecho copia/pega del carousel, respecto los dos jquery que dices, es porque es una carga combinada, primero carga el del servidor de google que si por cualquier cosa falla entonces carga el que tengo en mi servidor. El javascript que no encuentras está justo debajo, este:

Código HTML:
<script type="text/javascript">
	$( document ).ready(function() {
                ('.carousel').carousel({
	  	interval: 2000
		})
        });
</script> 
Como ves llama a la clase .carousel que es la que se utiliza en el div que contiene el carusel con las fotos.

Soy diseñador gráfico y aunque no soy diseñador web considero que tengo conocimientos y capacidad para entender como trasladar el código de los plugins de jquery pero algo está pasando porque no consigo hacer funcionar ninguno. De los 5 sliders (ResponsiveSlides.js, Flexslider 2, bxSlider otro que no recuerdo y el de Bootstrap)
no he conseguido hacer funcionar ninguno correctamente. Sigo los pasos de la página del desarrollador y reviso el código varias veces pero nada, incluso dudé del navegador (Firefox) y probé con Chrome pero igual. El único que he conseguido que haga el moviento de slide es con el bxSlider pero tenía un problema de maquetación que me desplazaba la posición original de las imágenes hacia derecha y quedaba una baja ancha y blanca, no conseguí dar con el fallo y la única solución era hacer un margen negativo, sí una chapuza pero estuve varios dias y no daba con el problema. Para tener un código limpio preferí buscar otro slider y ahora estoy peor que antes.

Tiene que haber algo que hago mal y que desconozco que debe hacerse de esa manera porque no es posible que NO me funcionen los plugins y eso que la teoría me la se:
1. Cargo jQuery: he comprobado con Firebug que carga correctamente, veo que carga el de google.
2. Cargo plugin: lo invoco y la ruta es correcta, carpeta js junto a jQuery.
3. Uso la misma clase en el script que en el div del carousel: Uso la que viene por defecto en la documentación de Bootstrap.

Si alguien puede arrojarme un rayo de luz al asunto.

Muchas gracias

Última edición por xc70; 05/10/2014 a las 03:03
  #4 (permalink)  
Antiguo 05/10/2014, 06:29
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: No funciona Carousel integrado de Bootstrap 3

Debiera de ser:

Código Javascript:
Ver original
  1. $('.carousel').carousel({
__________________
(:
  #5 (permalink)  
Antiguo 05/10/2014, 06:35
 
Fecha de Ingreso: diciembre-2008
Mensajes: 44
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: No funciona Carousel integrado de Bootstrap 3

pzin tienes toda la razón! ese código está mal pero en la web está bien, se puede comprobar mirando el código. Lástima que ya no puedo editar ese mensaje para no traer más confusión.

El error fue al pegar ese código en el foro que no estaba bien tabulado y al tabularlo para que quedase más entendible borré sin querer el $.

Así que el error continúa por algún otro lado ¿Alguien ve alguna otra cosa?

Muchas gracias
  #6 (permalink)  
Antiguo 05/10/2014, 09:45
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: No funciona Carousel integrado de Bootstrap 3

xc70, la documentación oficial dice que debes de incluir los archivos js!!

http://getbootstrap.com/javascript/
Cita:
Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
así que debes de incluir carousel.js o bootstrap.min.js !! Eso no lo veo por ningún lado en tu página.

pero además es algo de sentido común, bootstrap no es magia, el paso 2 "cargo plugin" aplica de todas formas, si no incluyes el javascript que define al carousel no se como pretendes que funcione :P

PD: lo de la url en el foro es porque tenías menos de 30 mensajes, es un filtro automático anti-spam del foro
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 05/10/2014, 09:58
 
Fecha de Ingreso: diciembre-2008
Mensajes: 44
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: No funciona Carousel integrado de Bootstrap 3

webosiris distes en el clavo!

No me percaté del tema porque lo que si había enlazado eran las bootstrap.min.css por lo que he podido maquetar todo pero claro el javascript es cosa del bootstrap.min.js que como muy bien descubriste no estaba por ningún sitio.

Mientras buscaba info encontré este aviso de Bootstrap:

Transition animations not supported in Internet Explorer 8 & 9
Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.

Así que usando jQuery para obtener sus ventajas crossbrowser y compatibilidad con navegadores antiguos me parece poco acertado usar este slider.

Así que volveré a probar con los otros e intentar encontrar el problema que hace que no los haya podido aplicar correctamente.

Mil gracias webosiris esta experiencia me lleva a la conclusión de que con los otros sliders seguro que me faltaba algo delante de las narices y no veía el qué así que volveré a hecharle unas horas a ver si lo consigo.

Saludos y gracias de nuevo!

Etiquetas: bootstrap, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:19.