HTML - Insertar un slider en html

   
Vista:

Insertar un slider en html

Publicado por Tomas (34 intervenciones) el 26/08/2015 23:02:33
Muy buenas, llevo un par de horas dandole vueltas y no logro hacer lo que dice esta web para insertar el slider. Concretamente estoy bloqueado en el punto "Activation". Junto con los ficheros de descarga vienen varios archivos .js y ninguno coincide con el la función de jQuery (almenos no le veo) de:
1
2
3
4
5
6
7
jQuery(document).ready(function($) {
	$('#banner-fade').bjqs({
		'height' : 320,
		'width' : 620,
		'responsive' : true
	});
});

El anterior código no se donde encaja con los ficheros de descarga.
Tengo todos los ficheros que pide, cargados en la sección <head>, y el div del slider en body con 3 imagenes.
Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Insertar un slider en html

Publicado por xve (1178 intervenciones) el 27/08/2015 07:40:46
Hola Tomas, haces referencia a una web y unos archivos los cuales no indicas la url del mismo... si nos la puedes indicar para poder ayudarte.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Insertar un slider en html

Publicado por Tomas (34 intervenciones) el 27/08/2015 12:56:17
Muy cierto, mis disculpas :/


http://basic-slider.com/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel Komander

Insertar un slider en html

Publicado por Angel Komander (101 intervenciones) el 27/08/2015 15:25:11
ese script va al final de tu div
1
2
3
4
5
6
7
8
9
10
11
<script class="secret-source">
        jQuery(document).ready(function($) {
 
          $('#banner-fade').bjqs({
            height      : 320,
            width       : 620,
            responsive  : true
          });
 
        });
      </script>

y esto va al final antes del </body>
1
2
3
4
5
6
7
8
9
10
11
<script src="js/libs/jquery.secret-source.min.js"></script>
 
    <script>
    jQuery(function($) {
 
        $('.secret-source').secretSource({
            includeTag: false
        });
 
    });
    </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Insertar un slider en html

Publicado por Tomas (34 intervenciones) el 27/08/2015 17:02:45
No funciona, segun dice en la web los scripts se cargan en <head> no en body
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel Komander

Insertar un slider en html

Publicado por Angel Komander (101 intervenciones) el 27/08/2015 19:34:52
amigo baja la demo que tiene esa web para descargar, asi sabras el codigo del slider y hasta donde yo me acuerdo los script's locales van hasta abajo para agilizar la velocidad de la pagina ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Insertar un slider en html

Publicado por Tomas (34 intervenciones) el 28/08/2015 21:26:04
El segundo script que escribiste, como dice la demo no es necesario:

<!--
The following script is not related to basic jQuery Slider
It's used to create the code snippets in the demo.
https://github.com/maelstrom/SecretSource
-->

Todabia no pude hacerlo funcionar, lo tengo igual que ellos en la demo.


1
2
3
4
5
6
7
8
9
10
<head>
    <meta charset="utf-8">
	<!-- enlazamos pagina de estilos -->
	<link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="slider/bjqs.css"/>
	<!-- jQuery library (served from Google) -->
   	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="slider/js/bjqs-1.3.min.js"></script>
 
      </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<div id="slider">
			 <ul id="bjqs">
			 	 <li><img src="/images/banner01.jpg"></li>
			 	 <li><img src="/images/banner02.jpg"></li>
 			 	 <li><img src="/images/banner03.jpg"></li>
				 <li><img src="/images/banner04.jpg"></li>
			</ul>
 
	</div>
		<script class="secret-source">
       jQuery(document).ready(function($) {
	$('#slider').bjqs({
		'height' : 320,
		'width' : 620,
		'responsive' : true
					 });
	   });
      </script>
</body>

Aqui no las he puesto pero, en los src (source) de los enlaces tengo las rutas completas de cada archivo, es decir, mal no estan.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel Komander

Insertar un slider en html

Publicado por Angel Komander (101 intervenciones) el 29/08/2015 02:34:23
pero cual es el error que te da? podrias mostrar una cap?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Insertar un slider en html

Publicado por Tomas (34 intervenciones) el 29/08/2015 13:18:10
Muestra las imágenes enormes, una bajo otra, en segundo plano respecto la página. En la captura solo se ve una imagen porque no se como hacer una captura con scroll ( no creo que se pueda) y la web esta minimizada al maximo.
Capture

El slider esta entre el footer(el div oscuro) y la nav(el div claro).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Insertar un slider en html

Publicado por Tomas (34 intervenciones) el 03/09/2015 23:17:26
Ya lo arreglé, puse un slider un poco más simple de modificar y usar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar