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"/> </i>',
slideMargin: 0,
infiniteLoop: true,
pager: false,
outline: 0,
minSlides: 3,
maxSlides:3,
moveSlides: 3,
adaptiveHeight: false,
slideSelector: 'a.slide'
});`
2
Answers
Have you tried :
Cause it looks like the border is applied on the wrapper and not on the slidder
You can try adding a parent class to the #bxSlider element and use that in your CSS: