Où puis-je me tromper en configurant le diaporama bxSlider?

J'essaye de faire un diaporama pour mon site de rails. pour cela, je suis les instructions sur le site Web bxSlider bxslider website link Où puis-je me tromper en configurant le diaporama bxSlider?

Voici les étapes que j'ai suivies comme indiqué sur le site.

Comment installer

Étape 1: Lien fichiers requis

premier et le plus important, la bibliothèque jQuery doit être inclus (pas besoin de télécharger - lien directement à partir de Google). Ensuite, téléchargez le paquet à partir de ce site et liez le fichier CSS bxSlider (pour le thème) et le fichier Javascript bxSlider.

<!-- 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" />

Étape 2: Créer HTML balises

Créer un élément <ul class="bxslider">, avec un <li> pour chaque diapositive. Les diapositives peuvent contenir des images, des vidéos ou tout autre contenu HTML!

<ul class="bxslider"> 
    <li><img src="/images/pic1.jpg" /></li> 
    <li><img src="/images/pic2.jpg" /></li> 
    <li><img src="/images/pic3.jpg" /></li> 
    <li><img src="/images/pic4.jpg" /></li> 
</ul>

Étape 3: Appelez le bxSlider

Appel .bxslider() sur <ul class="bxslider">. Notez que l'appel doit être fait dans un appel $(document).ready(), sinon le plugin ne fonctionnera pas!

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

et c'est là que j'ai ajouté ces fichiers. car il ne dit pas où les ajouter, j'ai copié quelques vidéos YouTube, mais ils semblent tous ne pas suivre exactement ces 3 étapes et chacun le fait légèrement différemment.

ci-dessous est le fichier application.html.erb

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" 
      href="https://fonts.googleapis.com/css?family=Architects Daughter"> 
      <link rel="stylesheet" type="text/css" 
      href="https://fonts.googleapis.com/css?family=Great Vibes"> 


    <title>Acupuntura Simon Verde</title> 
    <%= csrf_meta_tags %> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- bxSlider CSS file --> 
<link href="/lib/jquery.bxslider.css" rel="stylesheet" /> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    </head> 

    <body> 
    <ul class="bxslider"> 
     <li><img src="/images/bamboo.jpg" /></li> 
     <li><img src="/images/bamboo2.jpg" /></li> 
     <li><img src="/images/treatment1.jpg" /></li> 
     <li><img src="/images/treatment2.jpg" /></li> 
    </ul> 

    <!-- 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> 
    <script> 
    $(document).ready(function(){ 
     $('.bxslider').bxSlider(); 
    }); 
    </script> 
    <!-- <div id="container"> 
      <div id="mainpic"> 
       <h1><span class="off2">Acupuntura Cosmetica</span></h1> 
       <h2>Simon Verde</h2> 
      </div> --> 

<div id="menu"> 
<ul> 

<li class="menuitem"> 
    <div class="dropdown"> 
    <button class="dropbtn">Inicio</button> 
     <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
</li> 

<li class="menuitem"> 
    <div class="dropdown"> 
    <button class="dropbtn">La Acupuntura</button> 
     <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
</li> 

<li class="menuitem"> 
    <div class="dropdown"> 
    <button class="dropbtn">Sobre Nosotros</button> 
     <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
</li> 

<li class="menuitem"> 
    <div class="dropdown"> 
    <button class="dropbtn">Tratamientos</button> 
     <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
</li> 

<li class="menuitem"> 
    <div class="dropdown"> 
    <button class="dropbtn">Precios</button> 
     <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
</li> 

<li class="menuitem"> 
    <div class="dropdown"> 
    <button class="dropbtn">Testimonials</button> 
     <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     </div> 
    </div> 
</li> 

<li class="menuitem"> 
    <div class="dropdown"> 
    <button class="dropbtn">Contacto</button> 
     <div class="dropdown-content"> 
     <a href="new">Formulario de contacato</a> 
     <!-- <a href="#">Link 2</a> 
     <a href="#">Link 3</a> --> 
     </div> 
    </div> 
</li> 


<!-- <li class="menuitem"><a href="inicio">Inicio</a></li> 
<li class="menuitem"><a href="sobre">La Acupuntura</a> 
    <ul> 
    <li><a href=#>Para quien es</a></li> 
    <li><a href=#>Como funciona</a></li> 
    <li><a href=#>something else</a></li> 
    </ul> 
</li> --> 


     <!-- <li class="menuitem"><a href="inicio">Inicio</a></li> 
     <li class="menuitem"><a href="sobre">Sobre Nosotros</a></li> 
     <li class="menuitem"><a href="acupuntura">La Acupuntura</a></li> 
     <li class="menuitem"><a href="tratamientos">Tratamientos</a></li> 
     <li class="menuitem"><a href="prensa">Prensa</a></li> 
     <li class="menuitem"><a href="new">Contacto</a></li> --> 
       </ul> 
      </div> 

      <div id="content"> 

       <p>jjj</p> 
       <p>&nbsp;</p> 

       <%= yield %> 

       <p>&nbsp;</p> 
       <p>&nbsp;</p> 
       <p>&nbsp;</p> 
    <p>&nbsp;</p> 

       <div id="footer"><h3><a href="http://www.bryantsmith.com">Acupuntura Simon Verde</a></div> 
      </div> 
     </div> 






    </body> 
</html>

que je mets quelque chose dans le lieu worng ou manque quelque chose? merci

EDIT: ajout d'erreurs css.

Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:10:2 

Unknown property '-moz-box-shadow'. 

Declaration dropped. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:32:17 

Unknown property '-moz-border-radius'. Declaration dropped. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:72:20 

Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:85:2 

Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:86:2 

Unknown property '-moz-box-shadow'. Declaration dropped. jquery.bxslider.min.self-20800de2808abed56c80e727b78530acbb6a5813a63c095606d36c08b557fcc1.css:1:116 

Unknown property '-moz-border-radius'. Declaration dropped. jquery.bxslider.min.self-20800de2808abed56c80e727b78530acbb6a5813a63c095606d36c08b557fcc1.css:1:911 

Error in parsing value for 'width'. Declaration dropped. style.self-49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css:87:9 

Expected colour but found '#black'. Error in parsing value for 'color'. Declaration dropped. style.self- 
49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css:123:9 

Error in parsing value for 'margin-bottom'. Declaration dropped. jquery.bxslider.css:7:17 

Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.css:9:2 

Unknown property '-moz-box-shadow'. Declaration dropped. jquery.bxslider.css:31:17 

Unknown property '-moz-border-radius'. Declaration dropped. jquery.bxslider.css:71:20 

Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.css:84:2 

Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.css:85:2 

Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery.min.js:2:40278 

GET 
http://localhost:3000/assets/style.self-49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css [HTTP/1.1 200 OK 0ms] 

GET 
http://localhost:3000/assets/style.self-49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css [HTTP/1.1 200 OK 0ms]

Source

2017-04-15 Owen

Vous recevez une erreur? Vérifiez à la fois sur le serveur et le client (c'est-à-dire javascript). – Gerry

Vérifiez également que vous avez les fichiers téléchargés dans le répertoire public (ou le pipeline d'actifs). – Gerry

@Gerry. Il n'y a pas d'erreur que rien ne montre lié au curseur. Le reste de la page se charge correctement. Je crois que les fichiers sont tous dans le pipeline d'actifs, si par là vous voulez dire dans le dossier app/assets. – Owen

Le problème est que les actifs nécessaires ne sont pas présents, donc vous devez télécharger les fichiers de .js et .cssbxslider.com et les ajouter à votre projet.

Téléchargez le fichier .zip et ajoutez les fichiers requis dans le dossier public:

css/jquery.bxslider.css
js/jquery.bxslider.min.js

css et js sont les dossiers que vous devez créer et mettre vos fichiers à l'intérieur d'eux.

Puis, application.html.erb mise à jour les lignes où vous appelez ces actifs:

<!-- bxSlider Javascript file --> 
<script src="/js/jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 
<link href="/css/jquery.bxslider.css" rel="stylesheet" />

Enfin, ajouter les images qui viennent dans le même .zip que vous avez téléchargé dans votre dossier public dans un dossier « images ».

MISE À JOUR

Pour utiliser le pipeline d'actifs, vous devez changer la façon dont vous êtes en train de charger vos actifs (qui est, images, javascripts et styelsheets) dans application.html.erb; au lieu de référencement pour eux de /lib/, js, images, vous devez les référencer de assets, comme ceci:

application.html.erb (juste indiquant le code):

<!-- bxSlider CSS file --> 
<link href="/assets/jquery.bxslider.css" rel="stylesheet" /> 

... 

<ul class="bxslider"> 
    <li><img src="/assets/bamboo.jpg" /></li> 
    <li><img src="/assets/bamboo2.jpg" /></li> 
    <li><img src="/assets/treatment1.jpg" /></li> 
    <li><img src="/assets/treatment2.jpg" /></li> 
</ul> 

<!-- 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="/assets/jquery.bxslider.min.js"></script> 

<script> 
$(document).ready(function(){ 
    $('.bxslider').bxSlider(); 
}); 
</script>

Ensuite, vous doit également mettre à jour le fichier jquery.bxslider.css pour faire référence également toutes les images à partir /assets/ au lieu de images/, donc changer:

url('images/bx_loader.gif')-url('/assets/bx_loader.gif') et
url('images/controls.png') à url('/assets/controls.png') (4 occurrences)

Maintenant, vous pouvez ajouter vos .js à app/assets/javascripts, .css à app/assets/stylesheets et images à app/assets/images.

Pour plus d'informations sur le pipeline d'actifs, consultez le rails guides.

Source

2017-04-15 20:14:02 Gerry

J'ai déjà ajouté tous les fichiers css et js, il n'y a plus rien à ajouter. mais si je crée un fichier public/css, quel est le code dans ce fichier? – Owen

Où avez-vous ajouté les fichiers 'js' et' css'? Vous n'avez pas besoin de créer un fichier, vous avez juste besoin de rendre les fichiers disponibles pour votre vue (ceux téléchargés sur bxslider.com). Dans 'public/js', mettez le fichier' jquery.bxslider.min.js', et dans 'public/css' mettez le fichier' jquery.bxslider.css'. – Gerry

J'ai ajouté tous les fichiers js dans le dossier app/assets/javascript et tous les fichiers css dans le dossier app/assets/stylesheets. L'application ne devrait pas les détecter si elles sont ici. Quelle est la différence entre les mettre ici et les mettre dans le dossier public? – Owen

Où puis-je me tromper en configurant le diaporama bxSlider?

Répondre

Questions connexes