remove border around bxslider slides

Question

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

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

Any other ways to do so?

score 3 · Accepted Answer · answered Feb 14 '18 at 15:42

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

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

!important is not necessary, if you add this CSS after linking to bxSlider's CSS file.

score 2 · Answer 2 · answered May 16 '15 at 21:46

2

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

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

answered May 16 '15 at 21:46

Eran.E

940
5
8

Not working in 2018, bxSlider v4.2.12, added solution worked in 2018. – Legionar Feb 14 '18 at 15:39

score 2 · Answer 3 · answered May 18 '16 at 12:47

2

.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;
}

answered May 18 '16 at 12:47

cizi

31
2

1

While this code block may answer the question, it would be best if you could provide a little explanation for why it does so. – Rakete1111 May 18 '16 at 13:08
Not working in 2018, bxSlider v4.2.12, added solution worked in 2018. – Legionar Feb 14 '18 at 15:39

score 2 · Answer 4 · edited Apr 06 '20 at 15:13

2

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

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

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

wrapperClass - Class to wrap the slider in. Change to prevent from using default bxSlider styles.

edited Apr 06 '20 at 15:13

Crasher

2,211
2
18
17

answered Mar 06 '18 at 08:51

Zhulian Atanasov

21
1

score 1 · Answer 5 · answered Apr 06 '17 at 12:54

1

If you look at styles of rendered bxSlider you will see the wrapper <div class="bx-wrapper" style="max-width: 1100px;"> and shadow is set by bx-wrapper class. So you can hide shadow it by override this class.

Previous solution didn't work for me. It worked when i add !important to styles:

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

answered Apr 06 '17 at 12:54

valex

5,163
2
33
40

Not working in 2018, bxSlider v4.2.12, added solution worked in 2018. – Legionar Feb 14 '18 at 15:39

remove border around bxslider slides

5 Answers5