L'Installation De BxSlider

Je suis un débutant complet de conception de site web et je suis en train de créer un site web moderne pour mon entreprise. La version actuelle est moins glamour (Greenlite.co.royaume-uni).

Après avoir passé beaucoup de temps à essayer de faire une bannière Flash pour la page d'accueil, il m'est apparu que Flash est probablement tout à fait obsolète et ne pas regarder en mesure de toutes les plates-formes. C'est quand je suis tombé sur le BxSlider, et il semble vraiment super! Si seulement je pouvais le faire fonctionner sur mon site.

Je suis à l'aide de CoffeeCup Visual Concepteur de Site web, j'ai ensuite utilisé le lien "Ajoutez HTML' outil. Dans la case " Insérer du code HTML de la fenêtre je l'ai placé comme suit;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="js/jquery.bxslider.css" rel="stylesheet" />


<ul class="bxslider">
  <li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li>
 <li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/back12.jpg" title="Caption to go here"></li>

</ul>

<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>

J'ai suivi, ainsi que je le pouvais, les instructions affichées sur bxslider.com. J'ai téléchargé le package à partir de bxslider, d'ajouter les fichiers à coffeecup et reliant l'emplacement du script. J'ai également ajouté mes photos pour CoffeeCup et écrit dans leur emplacement.

Quand j'ai aperçu mon site, je suis récompensé avec mes trois images à la fois, les uns sous les autres, avec une souris au-dessus de la légende. Parallèlement, les images sont un point.

Ce que je suis en train de réaliser est un Bxslider avec démarrage automatique, l'affichage de démarrage et d'arrêt des contrôles et de légendes.

J'ai essayé beaucoup de variations, le script que j'ai montré mon premier essai.

Le plus proche je suis arrivé à un travail Bxslider est de copier le code que j'ai trouvé à partir d'un site de l'ancienne version bxslider. Cela m'a donné un diaporama d'images avec les en-têtes. Si j'ai essayé de modifier le code de mon cahier des charges alors qu'il me faudrait retour à la case départ.

Je suis totalement conscient que je suis probablement une erreur évidente. Toutefois, pour l'œil non averti, il me fait rien, mais des maux de tête. Toute aide serait grandement apprécié.

InformationsquelleAutor Craig Walker | 2013-01-11

1

Le code Javascript que vous avez n'est pas valide. Essayez de modifier le Javascript pour:
```
<script type="text/javascript">
  $(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        auto: true,
        autoControls: false
    });
  });
</script>
```
Voir le travail jsfiddle - http://jsfiddle.net/FLuRH/
- Merci pour la réponse rapide! Le code javascript que vous avez tout juste d'envoyer une copie carbone de ce qu'un ami m'a envoyé la nuit dernière. J'ai aussi essayé ce, en remplacement de l'original, avec les mêmes résultats.
- Essayez de remplacer le script/lien étiquettes à partir de votre code avec ceux qui sont sur le dessus de jsfiddle (pastebin.com/97FCHjaG).
- La seule chose qui s'est produite pour moi, de voir que vous avez donné la même réponse que mon (mieux éduqués) ami, c'est que j'ai en quelque sorte lié les fichiers de mal?
- Yep, je pense donc - Essayez d'utiliser les bits de code de la jsfiddle et de voir si le curseur fonctionne, si c'est le cas alors vous savez que c'est les fichiers liés.
- Quand j'ai ouvert la "Insérer du code HTML' sur CoffeeCup je me suis montré une fenêtre avec trois onglets 'Corps HTML', 'en-Tête HTML" et "événements Onload', j'ai été mettre le tout dans le Corps HTML " pourrait-il y avoir un problème là? J'ai copié exactement ce qui est sur le jsfiddle avec le même résultat original de trois images, l'une en dessous de l'autre.
- Pouvez-vous coller le HTML qui est sortie par la page? Je ne suis pas familier avec CoffeeCup donc je ne peux pas aider à l'égard de qui j'en ai peur.
- J'ai supprimé tout et copié le jsfiddle vous lié, et il FONCTIONNE!J'ai été à ce pour deux jours maintenant, je ne l'ai demandé plus tôt. Je ne peux pas vous remercier assez, je ne sais vraiment pas ce que je fais quand il s'agit de cela.
- Le seul problème que j'ai c'est maintenant le bouton précédent est hors de l'image, de la création d'une salle de frontière autour d'elle, et les légendes sont coupés en deux au fond. Peut-être un problème avec mon image de tailles?
- Par les sons de celui-ci oui - j'aurais jouer avec les tailles de l'image, et si vous rencontrez toujours des problèmes, coller ce que vous avez une nouvelle question et je suis sûr que quelqu'un sera en mesure de vous aider.
- Je pense que j'ai peut-être. Merci encore, vraiment.
InformationsquelleAutor christian.thomas

j'ai remarqué quelque chose qui pourrait être un problème:

Vous n'avez pas fermé certaines partie de code correctement

C'est le vôtre:

    <script type="text/javascript">
      $(document).ready(function(){
        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            auto: true,
            autoControls: false
        });
      }); 
</script>

C'est la mienne:

<script type="text/javascript">
  $(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: 'true',
        auto: 'true',
        autoControls: 'false',
    });
  });
</script>

Aussi j'ai mis cette partie de code dans la section "head" et cela a fonctionné.
Lui donner un essai.
J'espère que j'ai aidé en quelque sorte.

InformationsquelleAutor David Pilcha

Voici code du travail(juste créer un nouveau fichier html où u extrait bxslider dossier)

    <!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery.bxslider.min.js"></script>
    <link href="jquery.bxslider.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".bxslider").bxSlider();
        });
    </script>
</head>

<body>
    <div style="width:700px;height:250px;align:center;padding-left:250px;">
        <ul class="bxslider">
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
        </ul>
    </div>
</body>
</html>

InformationsquelleAutor Raman Singh

Vous devez vous connecter pour publier un commentaire.