Clever Geek Handbook

Remove border around bxslider slides

I am using jquery bx slider. I want to remove the border around the slides. How should I do it? I tried this but it didn't work:

ul.bxslider {
  -webkit-box-shadow: 0;
  -moz-box-shadow: 0;
  box-shadow: 0;
  border: none;
}
Run codeHide result


Any other ways to do this?

+3


source to share


5 answers


Since the accepted answer is correct (in 2018 - bxSlider v4.2.12), I added the CSS working here:

.bx-wrapper {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
}


!important

not required if you add this CSS after the link to the bxSlider CSS file.

+1


source


The "box-shadow" is not set to the ul, but to the parent (".bx-wrapper.bx-viewport"), remove the "box-shadow". you also have a border width of 5px, but the color is white (#fff), so choose whatever you want or not.



.bx-wrapper .bx-viewport
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
+2


source 


.bx-viewport {
    position: static!important; /* center to page correctly */
    border: 0!important; /* border */
    -webkit-box-shadow: none!important; /* these two shadows */
    box-shadow: none!important;
}
+2


source


If you look at the rendered styles bxSlider

you will see the wrapper <div class="bx-wrapper" style="max-width: 1100px;">

and the shadow will be set to bx-wrapper

. Thus, you can hide the shadow by overriding this class.

The previous solution didn't work for me. It worked when I was adding styles !important

to styles:

.bx-wrapper {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
+1


source


The only working solution for me was to change the wrapper class:

slider.bxSlider({
........
    wrapperClass: 'your-class-here'
........
});

From the documentation: wrapperClass - string with default value "bx-wrapper".

wrapperClass - class for wrapping the slider. Edit to prevent standard bxSlider styles from being used.

+1


source






More articles:


All Articles