AccueilMembres connectés récemment
[MODERNBB] Création de slide sur PA
2 participants
Page 1 sur 1
- Serah
-
Mer 15 Sep 2021 - 22:25
- Version du forum :MODERNBB
- Templates modifiés :oui
- Navigateur :Chrome
Bonjour à tous :)
Je me tourne vers vous aujourd'hui car je suis face à un problème.
Pour la prochaine version de mon forum, la PA à coder est celle-ci :
Sur cette PA, il y a 2 zones sur laquelle je souhaite intégrer des slides (avec des textes et liens) : dans le cadre du centre et dans le cadre de gauche. On passe les slide en cliquant sur les flèches.
Je dois avouer avoir très peu de connaissance en codage donc j'espère que je m'exprime bien.. Mais du coup, je ne sais pas comment faire ces slides, et comment les cumuler (et qu'elles soient indépendantes l'une de l'autre) ? Je ne trouve aucun tuto là-dessus.. Merci d'avance![[MODERNBB] Création de slide sur PA 1f60a](https://2img.net/i/fa/twemoji/16x16/1f60a.png)
Je me tourne vers vous aujourd'hui car je suis face à un problème.
Pour la prochaine version de mon forum, la PA à coder est celle-ci :
Sur cette PA, il y a 2 zones sur laquelle je souhaite intégrer des slides (avec des textes et liens) : dans le cadre du centre et dans le cadre de gauche. On passe les slide en cliquant sur les flèches.
Je dois avouer avoir très peu de connaissance en codage donc j'espère que je m'exprime bien.. Mais du coup, je ne sais pas comment faire ces slides, et comment les cumuler (et qu'elles soient indépendantes l'une de l'autre) ? Je ne trouve aucun tuto là-dessus.. Merci d'avance
- Milouze14
Fondateur -
Jeu 16 Sep 2021 - 6:04
Coucou Anaïs,
alors oui je peux te donner un slide pour les deux blocs mais seras tu les mettre en place ensuite dans la page d'accueil ?
La page d'accueil est-elle déjà codée car une image ne me sert à rien
, il me faut les dimensions exactes de chaque bloc .
C'est juste pour le visu qui est d’ailleurs sympa
.
Si oui merci de me la fournir avec la css associée.
Message envoyé via la réponse rapide par: @Milouze14
alors oui je peux te donner un slide pour les deux blocs mais seras tu les mettre en place ensuite dans la page d'accueil ?
La page d'accueil est-elle déjà codée car une image ne me sert à rien
, il me faut les dimensions exactes de chaque bloc .C'est juste pour le visu qui est d’ailleurs sympa
.Si oui merci de me la fournir avec la css associée.
Message envoyé via la réponse rapide par: @Milouze14
- Serah
-
Sam 18 Sep 2021 - 13:26
Merci de ta réponse Milouze ! J'ai vaguement déjà tenté de la coder mais rien de concluant donc je ne suis pas certaine que cela t'aidera. Je peux te donner la dimension des blocs :
Celui de gauche : 150x150 px
Celui de droite : 230x245 px
Est-ce que c'est suffisant ? Encore merci de ton aide, j'aimerai beaucoup comprendre comment on fait![[MODERNBB] Création de slide sur PA 263a](https://2img.net/i/fa/twemoji/16x16/263a.png)
Celui de gauche : 150x150 px
Celui de droite : 230x245 px
Est-ce que c'est suffisant ? Encore merci de ton aide, j'aimerai beaucoup comprendre comment on fait
- Milouze14Fondateur
-
Sam 18 Sep 2021 - 17:10
Hello,
Comme tu veux par contre les flèches qui sont déjà présentes sur ta capture sont déjà incluses dans mon code HTML.
Message envoyé via la réponse rapide par: @Milouze14
Comme tu veux par contre les flèches qui sont déjà présentes sur ta capture sont déjà incluses dans mon code HTML.
Message envoyé via la réponse rapide par: @Milouze14
Serah aime ce message
- Milouze14Fondateur
-
Sam 18 Sep 2021 - 19:50
@Serah ,
alors, comme je n'ai pas la css de ta page d'accueil, je vais te donner le code brut :
La c.s.s:
Le code html a déposer dans le bloc ayant ces dimensions 150px sur 150px.
Les images sont a déposer en bas du code html est on une taille de 24px par 24px.
Puis le script :
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur l'index.
Déposer ceci:
Penser a cliquer sur le bouton
Tu peux aussi ne pas afficher d'image pour les boutons, le code html ci-dessous affichera "< " et " > " pour précédent et suivant:
Tu pourras personnaliser la couleur ici:
alors, comme je n'ai pas la css de ta page d'accueil, je vais te donner le code brut :
La c.s.s:
- Code:
/* DEBUT SLIDE 1*/
/*le conteneur de slide*/
.M14_slide_bloc_two
{
width:150px;
height:150px;
border:1px solid #333;
}
/*L interieur du conteneur de slide*/
#slider_bloc_two{
position: relative;
overflow: hidden;
margin:0px;
}
/*la balise ul avec hauteur*/
#slider_bloc_two ul {
position: relative;
margin: 0;
padding: 0;
height: 130px;
list-style: none;
}
/*ne pas toucher*/
#slider_bloc_two ul li {
position: relative;
display: block;
float: left;
text-align:left;
width:150px;
}
/*on donne une apparence au contenu slide*/
#slider_bloc_two ul li div
{
color:#000000;
font-size:9px;
width:150px;
height:130px;
padding:1px;
overflow-y: auto;
}
/*LE BLOC DES BOUTONS*/
.M14_slide_bloc_two_onglet_two
{
width:140px;
height: 20px;
position:absolute;
}
/*les boutons*/
a.control_prev_bloc_two,
a.control_next_bloc_two
{
width: 24px;
height: 24px;
cursor: pointer;
width: 60px;
text-align: center;
}
/*on positionne la fleche gauche a gauche*/
a.control_prev_bloc_two
{
float:left;}
/*on positionne la fleche droite a droite*/
a.control_next_bloc_two {float:right}
/*FIN SLIDE 1*/
Le code html a déposer dans le bloc ayant ces dimensions 150px sur 150px.
- Code:
<div class="M14_slide_bloc_two">
<div id="slider_bloc_two">
<ul>
<li>
<div>
CONTENU 1 DU SLIDE 2
</div>
</li>
<li>
<div>
CONTENU 2 DU SLIDE 2
</div>
</li>
<li>
<div>
CONTENU 3 DU SLIDE 2
</div>
</li>
<li>
<div>
Penitus est et alites caro et plerosque frumenti universis plerosque frumenti herbae sustentantur caro possint et vidimus caro vidimus ferina aucupium et lactisque est vini siquae qua ignorantes vidimus ignorantes qua caro frumenti aucupium vidimus per qua alites herbae universis aucupium aucupium est per vini vidimus abundans et est capi.
</div>
</li>
</ul>
</div>
<div class="M14_slide_bloc_two_onglet_two">
<a class="control_prev_bloc_two"><img src="https://i.servimg.com/u/f44/20/36/69/72/arrow-10.png" title="Précédent" /></a> <a class="control_next_bloc_two"><img src="https://i.servimg.com/u/f44/20/36/69/72/arrow-11.png" title="Suivant" /></a>
</div>
</div>
Les images sont a déposer en bas du code html est on une taille de 24px par 24px.
Puis le script :
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur l'index.
Déposer ceci:
- Code:
jQuery(document).ready(function ($) {
var slideCount = $('#slider_bloc_two ul li').length;
var slideWidth = $('#slider_bloc_two ul li').width();
var slideHeight = $('#slider_bloc_two ul li').height();
$('#slider_bloc_two').css({ width: slideWidth, height: slideHeight });
$('#slider_bloc_two ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider_bloc_two ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider_bloc_two ul li:last-child').prependTo('#slider_bloc_two ul');
$('#slider_bloc_two ul').css('left', '');
});
};
function moveRight() {
$('#slider_bloc_two ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider_bloc_two ul li:first-child').appendTo('#slider_bloc_two ul');
$('#slider_bloc_two ul').css('left', '');
});
};
$('a.control_prev_bloc_two').click(function () {
moveLeft();
});
$('a.control_next_bloc_two').click(function () {
moveRight();
});
});
Penser a cliquer sur le bouton
Tu peux aussi ne pas afficher d'image pour les boutons, le code html ci-dessous affichera "< " et " > " pour précédent et suivant:
- Code:
<div class="M14_slide_bloc_two">
<div id="slider_bloc_two">
<ul>
<li>
<div>
CONTENU 1 DU SLIDE 2
</div>
</li>
<li>
<div>
CONTENU 2 DU SLIDE 2
</div>
</li>
<li>
<div>
CONTENU 3 DU SLIDE 2
</div>
</li>
<li>
<div>
Penitus est et alites caro et plerosque frumenti universis plerosque frumenti herbae sustentantur caro possint et vidimus caro vidimus ferina aucupium et lactisque est vini siquae qua ignorantes vidimus ignorantes qua caro frumenti aucupium vidimus per qua alites herbae universis aucupium aucupium est per vini vidimus abundans et est capi.
</div>
</li>
</ul>
</div>
<div class="M14_slide_bloc_two_onglet_two">
<a class="control_prev_bloc_two"> < </a> <a class="control_next_bloc_two"> > </a>
</div>
</div>
Tu pourras personnaliser la couleur ici:
- Code:
/*les boutons*/
a.control_prev_bloc_two,
a.control_next_bloc_two
{
width: 24px;
height: 24px;
cursor: pointer;
width: 60px;
text-align: center;
}
Serah aime ce message
- Serah
-
Sam 18 Sep 2021 - 19:58
Merci infiniment Phil, je m'y penche dès que j'ai du temps libre (en ce moment compliqué pour moi). Encore merci pour ton temps !!!!
Message envoyé via la réponse rapide par: @Serah
Message envoyé via la réponse rapide par: @Serah
Milouze14 aime ce message
- Milouze14Fondateur
-
Sam 18 Sep 2021 - 20:01
@Serah ,
de rien ,
attention aux 5 jours sans réponse
.
Bonne soirée chère amie.
Message envoyé via la réponse rapide par: @Milouze14
de rien ,
attention aux 5 jours sans réponse
.Bonne soirée chère amie.
Message envoyé via la réponse rapide par: @Milouze14
Serah aime ce message
- Milouze14Fondateur
-
Mar 21 Sep 2021 - 17:51
Hello
Sujet résolu et déplacé dans le forum adéquate
A bientôt pour une prochaine demande
Sujet résolu et déplacé dans le forum adéquate
A bientôt pour une prochaine demande
Message envoyé via la réponse rapide par: @Milouze14
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum