Este es el html para mi sitio web. Me gustaría agregar esto image slider:. Tengo un problema, por alguna razón, todo lo que obtengo es 4 viñetas y una imagen de error img al lado. ¿Podrías mirar mi html y ver qué puedes hacer para ayudar?

-Gracias

http://jsfiddle.net/lasquish/hL7vLcd5/

<div class="container">
    <ul class="slider">
        <li><img src="/images/Day1.jpg" /></li>
        <li><img src="/images/Day1.jpg" /></li>
        <li><img src="/images/Day1.jpg" /></li>
        <li><img src="/images/Day1.jpg" /></li>
    </ul>
</div>

Este es el guión:

<script src="js/jquery.bxslider.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script>
    $(document).ready(function(){
        $('.bxslider').bxSlider();
    });
</script>
0
Alex 2 sep. 2014 a las 09:38

2 respuestas

La mejor respuesta

Como ha envuelto el contenido de la diapositiva con la clase .slider, debe hacer los siguientes cambios

$(document).ready(function(){
    $('.slider').bxSlider();
});

Llame a bxslider.min.js después de la biblioteca jQuery. También tiene que llamar a 2 versiones diferentes de la biblioteca jQuery. Esto hará conflicto.

2
Brian Dillingham 2 sep. 2014 a las 13:01
  1. Debe agregar debajo de css para eliminar la viñeta

    ul { tipo-estilo-lista: ninguno; }

  2. Necesita usar la ruta de imagen correcta o puede usar la imagen completa "http://fiddle.jshell.net/ img / logo.png "...

Como no ha compartido todos los archivos requeridos aquí, por lo tanto, no podemos realizar pruebas al final. Comparta el archivo de biblioteca js que tiene incluido aquí si el problema no se resuelve.

0
Brijesh 2 sep. 2014 a las 05:53