Carousel & Slider Arrows Customisation

Edgar Atukunda

• December 20, 2022 09:15

How do we change the icon and increase the size of the arrows for both the carousel and the slider.

0

• 

  Permanently deleted user

  • December 20, 2022 13:31

  Hello

  Thank you for contacting us.

  1. If you need to customize the arrow from the carousel element please click on Settings -Carousel-Navigation -Arrows. See here.

  2. If you need to customize the arrow from the slider element please click on the Setting block of the slider-> Colors -> Arrows and change the color. Please see this video.  Also, if you need to change the size of the arrow, click on the Setting block -slider- arrows. See this screenshot.

  Please let us know if you have any further questions.

  Best regards, Nelea.

  0
• 

  Edgar Atukunda

  • December 20, 2022 13:42

  This is not what i was referring to though.

  Please attached the images for the kind of customisation i was referring to and even the location of the navigation arrows for example top right corner or bottom not just left and right. I hope this makes sense.

  0
• 

  Permanently deleted user

  • December 20, 2022 14:17

  Hi,

  You can't add this type of arrow to the slider or carousel, we don't have that option in Brizy builder. You can only change the size of the arrow from the setting.

  Best regards, Nelea.

   

  0
• 

  Edgar Atukunda

  • April 15, 2024 07:09

  i am coming back to you Nelea,

  Is this something that you have planned and you are working on it or it is not on your schedule.

   

  0
• 

  Ariel H.

  • April 15, 2024 09:46
  • Edited

  Hi Edgar,

  Thank you for reaching out to us.

  I'm sorry to inform you that the feature you are looking for is not currently available. However, you can customize it using custom CSS.

  You have the option to modify the background color, position and padding as needed. You may also make the background transparent by using RGBA color with opacity.

  .brz-carousel__slider .brz-slick-slider__arrow-prev {
      left: 100px;
      border: solid 2px red;
      padding: 50px;
      border-radius: 50%;
      background-color: yellow;
  }
  
  
  .brz-carousel__slider .brz-slick-slider__arrow-next {
      right: 100px;
      border: solid 2px red;
      padding: 50px;
      border-radius: 50%;
      background-color: yellow;
  }

  

  In the meantime, I recommend posting this on our website at https://www.brizy.io/ideas-and-roadmap. This forum allows other users to engage by commenting and voting for the suggested feature. Our team reviews all the suggestions thoroughly, and those that receive significant support will be prioritized or potentially included in our development roadmap.

  Best regards,
  Ariel H.

  0
• 

  Edgar Atukunda

  • April 16, 2024 08:47

  I have implemented this and this works for now. The challenge though is what happens when you have several sliders implemented with in the website because the styles are global and not for a specific slider.

  0
• 

  Ariel H.

  • April 16, 2024 09:21

  Hi Edgar,

  Thank you for the update.

  To get around this, you can add the custom CSS directly into the specific carousel element as shown below:

  
  CSS:

  element{
    
  .brz-carousel__slider .brz-slick-slider__arrow-prev {
      left: 100px;
      border: solid 2px red;
      padding: 50px;
      border-radius: 50%;
      background-color: yellow;
  }
  
  
  .brz-carousel__slider .brz-slick-slider__arrow-next {
      right: 100px;
      border: solid 2px red;
      padding: 50px;
      border-radius: 50%;
      background-color: yellow;
  }
  
  }

  If you have any further questions, please let us know.

  Best regards,
  Ariel H.

  0

Please sign in to leave a comment.