Jump to content

Modification Flêches Homepage


Recommended Posts

Bonjour,

Je souhaiterais faire la même chose que sur le topic donc voici le lien (qui date de plus de 3 ans donc je préférais vous demander directement ici).

Je voudrais faire la même chose si possible, seulement le code et les lignes semblent différents.

Est ce que vous pourriez m'aider à modifier celui-ci pour obtenir le même resultat SVP? 

voici mon code :

/******************************************************************************
                        Home Page Slider
*******************************************************************************/
#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left;
  /*****************************************************************************
                          BXSlider Styles
  ********************************************************************************/ }
  @media (max-width: 767px) {
    #homepage-slider {
      width: 100%;
      max-width: 100%;
      padding-top: 20px; } }
  #homepage-slider #homeslider {
    margin: 0 auto;
    padding: 0; }
  #homepage-slider .homeslider-container {
    position: relative; }
  #homepage-slider .homeslider-image {
    position: absolute;
    left: 0;
    top: 0; }
  #homepage-slider .homeslider-description {
    position: absolute;
    left: 0;
    top: 0;
    padding: 50px 50px;
    cursor: pointer; }
    #homepage-slider .homeslider-description h2 {
      font-size: 2.7em;
      color: white;
      margin: 0;
      padding: 0; }
    #homepage-slider .homeslider-description p {
      width: 50%;
      font-size: 1.15em;
      line-height: 1.3em;
      padding: 0.5em 0;
      color: white; }
    #homepage-slider .homeslider-description button {
      font-size: 1.2em;
      text-transform: uppercase; }
    @media (max-width: 1200px) {
      #homepage-slider .homeslider-description {
        padding: 20px;
        font-size: 0.8em; } }
    @media (max-width: 768px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.7em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.5em; } }
    @media (max-width: 480px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.5em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.7em; } }
  #homepage-slider .bx-wrapper a {
    display: block; }
  #homepage-slider .bx-wrapper img {
    height: auto; }
  #homepage-slider .bx-wrapper .bx-viewport {
    width: 100%;
    direction: ltr !important; }
  #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {
    background: #666; }
  #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: auto;
    margin-top: 0px;
    font-size: 1em;
    bottom: 10px;
    outline: 0;
    width: 52px;
    height: 52px;
    text-indent: -9999px;
    z-index: 9999;
    border: 2px solid #fff;
    line-height: 18px; }
    #homepage-slider .bx-wrapper .bx-controls-direction a:before {
      height: 48px;
      width: 48px;
      display: block;
      background: #fff;
      content: ".";
      opacity: 0.14;
      text-indent: -9999px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1; }
    #homepage-slider .bx-wrapper .bx-controls-direction a:after {
      display: block;
      width: 48px;
      height: 48px;
      color: #fff;
      text-indent: 0;
      text-align: center;
      font-size: 21px;
      font-family: "FontAwesome";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 16px 0 0 0; }
    #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before {
      background: #333;
      opacity: 0.83; }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 60px;
    left: auto; }
    #homepage-slider .bx-wrapper .bx-prev:after {
      content: "\f053"; }
  #homepage-slider .bx-wrapper .bx-next:after {
    content: "\f054"; }

.ie8 #homepage-slider .bx-wrapper .bx-controls-direction a:before {
  background: #333; }

Share this post


Link to post
Share on other sites

Bonjour a vous ☠️

Je ne crois pas reconnaitre le code du carrousel d'origine de PS 1.7xx peut être, êtes vous sur 1.6xx (que je ne connais pas donc plouf) ,sinon  je suppose donc que vous êtes sur un thème autre que celui d'origine...

Et votre question si j'ai bien compris consiste à savoir comment placer les "flèches" du carrousel principal: une à droite une à gauche centrées sur la hauteur de l'image ?

auriez vous un lien vers votre site à nous communiquer? (c'est pas que votre code css ne me parle pas (ca viendrait pas de owl d'ailleur?) mais entre nous on  ne va pas dire non plus qu'il chante...dans l'idée vous avez des choses comme :

  #homepage-slider .bx-wrapper .bx-controls-direction

sur lesquels il va falloir sans doute faire quelque chose.

Franchement le css hors contexte c'est faisable mais tellement plus fastidieux qu'un lien vers une page...

Share this post


Link to post
Share on other sites

Bonsoir.

voici les les css à changer (mettez ça directement dans custom.css vous vous embêterez pas)

#homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 45%;
}
#homepage-slider .bx-wrapper .bx-prev {
    right: auto;
    left: 10px;
}

 

ci après le screenshot du résultat:

Capture d’écran 2021-02-03 à 21.12.20.png

Edited by Remy FRK Corp (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

Merci beaucoup pour votre aide.

Finalement après visualisation du screenshot je crois que je préfère laisser les flèches au même endroit. Par contre ce que je souhaiterais faires c'est réduire de moitié la taille des flêches mais uniquement sur mobile. Elles sont beaucoup trop grosses par rapport à la version PC.

Est ce que vous sauriez m'indiquer comment effectuer cette manip ?

Merci encore :)

 

Share this post


Link to post
Share on other sites

Bonsoir TDM

essayez ca dans le custom css :

         
  @media (max-width:767px) {
  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
}

vous pouvez jouer sur les valeurs pour atteindre la taille souhaité normalement

la le réglage est sensé donner ca :

 

Capture d’écran 2021-02-04 à 21.57.48.png

Share this post


Link to post
Share on other sites

Bonjour TDM

je vous ai fais le réglage et j'y ai mis des commentaires, vous pouvez ajuster au besoin en changeant les valeurs en % et en px.

 /*Reglages sur ordinateur */ 


  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }
   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 90%; /* reglage hauteure des fleches droites et gauche  */
  }


/*Reglages Mobile */

  @media (max-width:767px) {

  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }

   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 80%; /* reglage hauteure des fleches droites et gauche  */


  }
}

 

 

Edited by Remy FRK Corp (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

Merci encore.

Par contre je voudrais réduite à peine la taille des fleches mais uniquement sur mobile et j'ai tout essayé dès que je bouge quelque chose ca modifie en même temps le mobile et PC.

D'autres part, j'aurais aimé réduire l'espace entre les slides et le menu toujours sur mobile uniquemen (voir PJ), sauriez vous m'aider à ce niveau là ?

IMG_4258.PNG

Share this post


Link to post
Share on other sites

Bonsoir TDM

La partie supérieur sert pour les pc la partie inférieur pour les mobiles :

  
   /* ci dessous Reglages sur ordinateur */ 


  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }
   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 90%; /* reglage hauteure des fleches droites et gauche  */
  }


/* ci dessous Reglages Mobile */

  @media (max-width:767px) {

  #homepage-slider .bx-wrapper .bx-controls-direction a {
      font-size: 1em;
      width: 32px;
      height: 32px;
      line-height: 0px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::before {
      height: 32px;
      width: 32px;
  }
  #homepage-slider .bx-wrapper .bx-controls-direction a::after {
      width: 28px;
      height: 28px;
      font-size: 13px;
      padding: 15px 0 0 0;
  }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 50px; /* reglage positon fleche gauche  */
  }

   #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: 80%; /* reglage hauteure des fleches droites et gauche  */


  }
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More