Bonjour à tous,

Après avoir visionner la video "Tutoriel jQuery : Owl Carousel" sur youtube, j'ai souhaiter modifier mon .js pour mon bandeau de photo d'images miniatures situées sous la grande image : https://www.bilum.fr/e-commerce/fr/cabine/8-cabine.html

Ce que je fais

J'ai donc entrepris l'écriture du bout de code ci-dessous :
responsive: {
992: {
items: 4
},

        1200: {
            items: 4
        },
    },

Mais cela ne change rien du tout en front office ; ci-dessous mon fichier owl.carrousel.js :
https://pastebin.com/BCUJNGxC

Ce que je veux

Je voudrais que les 4 images miniatures de mon bandeau sous la grande image sois toujours afficher quelque soit le format de l'écran.

Ce que j'obtiens

nada...

Merci par avance pour vos lumières !

Bonne journée

FH

10 réponses


Bonsoir.
Les codes à copier dans les sujets sont les codes persos, pas les codes des librairies, car là en plus d'avoir une tonne de code que nous pourrions simplement consulter via un simple lien, tu n'as même pas du relire ce que tu as posté car on retrouve du code dans la balise code et en dehors, ce qui rend encore plus difficile sa lecture.
Au lieu de nous donner une tonne de code imbuvable, il serait plus judicieux de nous fournir ton code complet (JavaScript) concernant ton carousel, car là tu ne nous donne que ce qui semble être les options que tu définies pour celui-ci, mais sans en voir la totalité, il va nous être difficile de voir d'où vient le problème, surtout que tu définies pour les résolutions 992 et 1200 ce qui ne correspond qu'à un type de support et tu leur fournit exactement le même nombre d'items à afficher dans le carousel, ce qui n'a que très peu d'intérêt.

FHP
Auteur

Bonjour,

Désolé de toutes ces maladresses, je suis nouveau sur ce forum.

Je vais tacher d'être plus clair et "ergonomique" dans ma requête. Sur mes pages produit > https://www.bilum.fr/e-commerce/fr/cabine/8-cabine.html , je souhaiterais qu'il y est en permanence (quelque soit la taille d'écran) 4 images miniatures sous la grande.

Voici le code javascript : https://codepen.io/greeksolid/pen/XXjLvY

J'ai changé la ligne 202 en remplacant le nombre 3 par le 4 mais cela ne change rien à ma page. Pourriez-vous m'éclairez sur ce point ?

Merci beaucoup.

Tu n'as pas compris comment utiliser une librairie.
Il ne faut pas modifier le fichier de la librairie, tu commences par charger le fichier de la librairie dans ta page HTML et ensuite, après soit entre les balises <script>, soit dans un fichier JS, tu mets quelque chose comme ceci :

$('.owl-carousel').owlCarousel({
    items: 4,
    responsive: false
});

Étant donné que tu ne veux pas utiliser le responsive, il est inutile d'utiliser la méthode responsive et autant définir le nombre d'items généralement.
Par contre, si tu écris le code dans un fichier JS, n'oublies pas de le charger après celui de la librairie.
Sinon, un conseil, la prochaine fois que tu veux partager du code JavaScript, au lieu d'utiliser CodePen, utilises plutôt Pastebin, CodePen est bien si tu as aussi du code HTML/CSS pour avoir une prévisualisation du résultat d'un code, mais si c'est juste pour partager du code, Pastebin est plus approprié.
Tant qu'à y être, supprimes tout le code superflu dans le contenu de ton sujet.

Je vois que tu as fait quelques modifications au niveau du contenu de ton sujet, par contre (et ce serait mieux que tu le fasse en ajoutant un commentaire, comme celui-ci), on ne peut pas savoir si tu as fait ce que je t'ai dit dans mon précédent commentaire, soit d'ajouter ton propre code JavaScript sur ta page, de manière à instancier le carousel et définir tes options personnelles.

FHP
Auteur

Bonjour,
En voulant charger le nouveau fichier JS contenant le code conseillé, je voudrais, comme vous l'indiquer, le charger après celui de la librairie.. le problème est que dans mon fichier header.tpl, le fichier de la librairie n'apparait pas : https://pastebin.com/pjBSAiPn
Celui-ci apparait pourtant bien quand j'inspecte la page sur mon navigateur. Serait-il possible de copier le .js de la librairie ET le .js nouveau à la suite dans header.tpl ?

Merci pour votre retour.

le problème est que dans mon fichier header.tpl, le fichier de la librairie n'apparait pas

N'as-tu pas remarqué le code suivant ? :

{foreach from=$js_files item=js_uri}
    <script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>
{/foreach}

Ce qui veut dire qu'il y a une boucle de fichiers JavaScript et donc, comme tu le dis :

Celui-ci apparait pourtant bien quand j'inspecte la page sur mon navigateur

Donc où est le problème vu que les fichiers s'ont correctement chargés ?
Il serait totalement inutile de les charger en double.

FHP
Auteur

Bonjour,
Je n'avais en effet pas compris que le code sus-cité était une boucle de fichiers JavaScript merci ; dans ce cas, pour charger le nouveau fichier .JS après celui de la librairie, j'imagine que je me dois quand même de l'écrire sous ce code dans le header ?
Et si je me trompe, comment faire alors pour être sûr que je fichier ajouter soit chargé après celui de la librairie ?

Merci pour votre retour et votre patience .

FHP
Auteur

Bonjour,
Je me permets de vous relancer quant à mes dernières questions. Merci pour votre retour.
Bonne soirée

Il serait totalement inutile de les charger en double.

FHP
Auteur

A priori je n'ai pas réussi à me faire comprendre sur un problème qui me paraissait pourtant simple à résoudre... Je chercherai la solution ailleurs. Merci quand même.