Hello! I'm using FlexSlider on a Bootstrap site and am getting two bullet points below my slideshow. I've checked through the other threads a few times, and have been google-searching for days. No luck. I've been able to narrow it down to this line of CSS:

.flex-direction-nav { display: none !important; }

That hides the directional arrow, but it also hides the bullets. It's the only CSS that seems to remove the bullets--but obviously I want the arrows. I've attached an image of what I'm talking about (look at the far-left). Thank you all for any help you can provide!

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

babusaheb.vikas’s picture

I have use this css for remove bullets.

ul.flex-direction-nav,
ul.flex-direction-nav li{
list-style:none;
list-style-image:none;
}

intaminfanatic’s picture

Thanks! That did the trick. Kicking myself for not realizing it was something so simple!

ul.flex-direction-nav, ul.flex-direction-nav li {
    list-style:none;
    list-style-image:none;
          }
intaminfanatic’s picture

Status: Active » Closed (fixed)
fabrizioprocopio’s picture

Excuse me
Where I should put this code?
What css file?

fabrizioprocopio’s picture

this worked for me in the style.css of the theme in use

.slides li:before {
content: none!important;
padding-left: 0!important;
margin-left: 0!important;
}
.slides li {
padding-left: 0!important;
margin-left: 0!important;
}

Anonymous’s picture

I am running a custom made subtheme of bootstrap CDN, and this code didn't work for me. Anyone know another way to force flex slider to remove bullets ?