teniendo problemas para la implementación de este bxslider control deslizante. lo primero es lo primero, las imágenes son visibles? ¿cómo puedo hacer que esto parezca un real control deslizante?

se puede ver el problema de vivir aquí; http://danielmdesigns.com/windermere/index.html

de lo contrario, he hecho exactamente lo que el sitio web me dijo que a =/

JS Script

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

<script src="bxslider.js" type="text/javascript"></script>

HTML

 <ul class="bxslider">
  <li><img src="images/Couple%20on%20Lounge%20Chair_Towneclub.jpg" /></li>
  <li><img src="images/Man%20on%20Bench_Towneclub.jpg" /></li>
  <li><img src="images/Picnic%20Couple_Towneclub.jpg" /></li>
  <li><img src="images/Small%20Golf_Towneclub.jpg" /></li>
</ul>

CSS

.bxslider{
height:600px;
width:auto;
background-color:#c41230;
/*background-image: url(images/imagescroll_1.png);*/
background-size:cover;
position:relative;
top:95px;
}

Archivo JS

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

Yo soy un aficionado, pero toda ayuda es muy apreciada. Gracias de antemano.

  • He mirado en su página, y no podía encontrar la llamada .bxSlider en etiquetas de secuencia de comandos por encima de la </body>. ¿Me olvido de algo?
  • me di cuenta de que es en la etiqueta head. Sin embargo, la referencia a «/js/jquery.bxslider.min.js» se va a un 404
  • Luego está el problema. Usted necesita para descargar the.js archivo a su servidor y asegúrese de que el enlace en el encabezado se indica a la derecha del archivo.
  • muchísimas gracias @TimSPQRj – me di cuenta de algunos errores, incluyendo lo que usted dijo, y corregían. sin embargo, sigo sin ver ningún cambio. cualquier posibilidad de que usted podría tomar otra mirada?
  • Ok, voy a ver el problema. Tome su JS texto por encima de la js archivos, y lo puso en un documento listo función por encima de su </body> etiqueta.
  • así que ponga «$(document).ready(function(){ $(‘.bxslider’).bxSlider(); });» en otro $( document ).ready(function () {}); – ¿es eso correcto?
  • Parece que se carga bxslider dos veces, uno de /js/jquery.bxslider.min.js y a partir de la raíz de tu sitio bxslider.js

InformationsquelleAutor Danny M. | 2014-04-18

2 Comentarios

  1. 1

    Debe agregar también un tipo de la secuencia de comandos así:

    <script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider();
    });
    </script>
  2. 1

    Ok, he simplificado la totalidad de su página, y cambiaron las imágenes, subir este archivo a mi sitio web y funciona bien. Así que el problema está probablemente en la forma se llama a los archivos en la cabeza, y la falta de la bxSlider función en la secuencia de comandos por encima de la </body> etiqueta.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>testslider</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <script src="jquery.bxslider.js"></script>
      <link href="jquery.bxslider.css" rel="stylesheet" />
    
    <style>
    .bxslider {
      height: 600px;
      width: auto;
      background-color: #c41230;
      background-size: cover;
      position: relative;
      border: 1px solid red;
    }
    </style>        
    
    </head>
    <body>
      <ul class="bxslider">
        <li><img src='http://img4.wikia.nocookie.net/__cb20130627150007/disney/images/a/aa/Goofy-11.jpg' /></li>
        <li><img src="https://www.irononsticker.com/images/2012/09/05/Pluto%20Mickey.jpg" /></li>
        <li><img src="http://www.getcartoonwallpaper.com/wp-content/uploads/2013/12/Minnie-Mouse-4.jpg" /></li>
        <li><img src="https://dliq60eur0hds.cloudfront.net/wp-content/uploads/2013/03/yosemite-perfect-3-days-half-dome.jpg" /></li>
      </ul>
    
    <script>
    $(document).ready(function(){
        $('.bxslider').bxSlider();
    });
    </script> 
    
    </body>
    </html>
    • hmm… me he llevó todo aquí, incluso sus imágenes y sigo obteniendo el mismo resultado. dang. quiero echar otro vistazo? tengo casi copiado y pegado exactamente lo que tenemos aquí y las imágenes aún pila. muchas gracias por tu ayuda en esto @TimSPQR
    • El jquery.bxSlider.jx y jquery.bxslider.css deben estar en el mismo subdirectorio que el .archivo html en la situación anterior. Más tarde, después de llegar a trabajar, poco a poco puede empezar a mover las cosas a su alrededor, de una en una.
    • he hecho esto. gracias por tu ayuda. voy a seguir chippin’ fuera en ello.
    • gracias de nuevo por vuestra ayuda de la yema. de alguna manera, yo sólo lo imaginé. gracias de nuevo.

Dejar respuesta

Please enter your comment!
Please enter your name here