CODEWITHSUNDEEP
jquerycssbxslider
arximughal
arximughal

Reputation: 270

remove border around bxslider slides

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?

Upvotes: 4

Views: 7745

Answers (5)

Zhulian Atanasov
Zhulian Atanasov

Reputation: 21

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.

Upvotes: 2

Legionar
Legionar

Reputation: 7597

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.

Upvotes: 3

valex
valex

Reputation: 5789

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

Upvotes: 1

cizi
cizi

Reputation: 31

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

Upvotes: 2

Eran.E
Eran.E

Reputation: 940

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

Upvotes: 2

Related Questions