Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

Membres connectés récemment
Voir tous les membres

[MODERNBB] Création de slide sur PA

 :: Astuces Forumactif :: Les sujets résolus

Voir le sujet précédent Voir le sujet suivant Aller en bas

Sujet résolu [MODERNBB] Création de slide sur PA

1
Serah
Serah
http://art-design.forumactif.fr/

MessageSerah 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


Dernière édition par Serah le Mar 21 Sep 2021 - 15:06, édité 1 fois

Sujet résolu Re: [MODERNBB] Création de slide sur PA

2
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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  clin oeil , il me faut les dimensions exactes de chaque bloc clin oeil .
C'est juste pour le visu qui est d’ailleurs sympa  Merci .


Si oui merci de me la fournir avec la css associée.



Message envoyé via la réponse rapide par: @Milouze14

Sujet résolu Re: [MODERNBB] Création de slide sur PA

3
Serah
Serah
http://art-design.forumactif.fr/

MessageSerah 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

Sujet résolu Re: [MODERNBB] Création de slide sur PA

4
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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

Serah aime ce message

Sujet résolu Re: [MODERNBB] Création de slide sur PA

5
Serah
Serah
http://art-design.forumactif.fr/

MessageSerah Sam 18 Sep 2021 - 18:10

Milouze14 aime ce message

Sujet résolu Re: [MODERNBB] Création de slide sur PA

6
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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:
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 Valid




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;
}
 


Dernière édition par Milouze14 le Lun 20 Sep 2021 - 7:11, édité 2 fois

Serah aime ce message

Sujet résolu Re: [MODERNBB] Création de slide sur PA

7
Serah
Serah
http://art-design.forumactif.fr/

MessageSerah 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

Milouze14 aime ce message

Sujet résolu Re: [MODERNBB] Création de slide sur PA

8
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 18 Sep 2021 - 20:01

@Serah ,
de rien ,
attention aux 5 jours sans réponse ok .

Bonne soirée chère amie.

Message envoyé via la réponse rapide par: @Milouze14

Serah aime ce message

Sujet résolu Re: [MODERNBB] Création de slide sur PA

9
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 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 clin oeil



Message envoyé via la réponse rapide par: @Milouze14

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Sujets similaires
» [AWESOMEBB] Compteur de caractère à la création d'un sujet
» [MODERNBB] Mettre à jour le tuto "Quick quote" pour la version ModernBB
» [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB
» [MODERNBB] Largeur forum modernBB
» [INVISION] Création boutons comme edge

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Astuces Forumactif :: Astuces Forumactif :: Les sujets résolus

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit | Informatique et Internet | Informatique et électronique