skip to Main Content

I am trying to get rid of the white border around a box slider. It displays a 5px white solid border. I tried border:0 !important in css and outline:0 in the js. I tried box-sizing:border-box. And i tried box-shadow:none.
The result is a 5px white border around bxSlider

CSS

#wrapper {
    width: auto;
    margin: 70px 0px;
    padding: 0px;
    background-color: #d8d2d2;
}

a.slide {
    width: 100%;
}

#bxSlider {
    background-color: #d8d2d2;
    border:0 !important;
}

JS

`$('.bxSlider').bxSlider({
    mode: 'vertical',
  speed: 500,
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  nextText: '<i class="fa fa-angle-right" style="color:black; font-size:42px"/> </i>',  
  prevText: '<i class="fa fa-angle-left" style="color:black; font-size:42px"/> &nbsp; </i>',    
  slideMargin: 0,
  infiniteLoop: true,
  pager: false,
  outline: 0,  
  minSlides: 3,
  maxSlides:3,
  moveSlides: 3,
  adaptiveHeight: false,
  slideSelector: 'a.slide'
});`

2

Answers


  1. Have you tried :

    .bx-wrapper {
        border:0 !important;
    }
    

    Cause it looks like the border is applied on the wrapper and not on the slidder

    Login or Signup to reply.
  2. You can try adding a parent class to the #bxSlider element and use that in your CSS:

        #wrapper {
          /* existing code */
        }
        .slider-container #bxSlider {
          border: 0 !important;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search