Стрелки Flexslider не отображаются должным образом

Я застрял в этой проблеме некоторое время и не могу найти ответа, поэтому решил прямо спросить.

Я использую плагин Flexslider для отображения нескольких изображений на сайте, однако навигационная стрелка, отображаемая при падении изображения, отключена. Стрелка отрезается вверху, а текст под ней, который должен быть полностью скрыт, частично отображается. Вот скриншот проблемы:

Я пытался поработать с CSS, но я просто не могу понять это. Может ли кто-нибудь помочь мне?

Ответ 1

Удалите overflow: hidden; из .flex-direction-nav a:

.flex-direction-nav a  { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin: -20px 0 0; 
    position: absolute; 
    top: 50%; z-index: 10; 
    overflow: hidden; /* Remove this line */
    opacity: 0; 
    cursor: pointer; 
    color: rgba(0,0,0,0.8); 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3); 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
}

Если вам нужно изменить или удалить текст, отображаемый по умолчанию для "Предыдущий" и "Следующий", обратитесь к документации по параметрам "Тейлор к вашим потребностям" для плагина здесь: http://www.woothemes.com/flexslider/

После этого просто обновите настройки для:

prevText: "Previous",    //String: Set the text for the "previous" directionNav item
nextText: "Next",        //String: Set the text for the "next" directionNav item

Ответ 2

Вы также можете добавить line-height, чтобы решить эту проблему:

.flex-direction-nav a  {
    line-height: 40px;
}

PS: Кажется, это ошибка Flexslider, что она не работает должным образом с настройками по умолчанию.

Ответ 3

Мне удалось заставить его работать, изменив размер шрифта "flexslider-icon" в CSS flexslider (около строки 70 в flexslider.css).

Кажется, что он установлен на 40 пикселей по умолчанию, но изменение его на 30 пикселей отлично работает на двух сайтах, которые я создаю.

Ответ 4

Откройте файл jquery.flexslider.js и выполните поиск "// Primary Controls" по строке 1125 (приблизительно). Вы найдете

// Primary Controls
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",

Здесь вам нужно удалить следующий и предыдущий текст и снова сохранить его.

Надеюсь, это поможет.

Ответ 5

Просто добавьте

.flex-direction-nav li a{
      height:50px; 
}

Это переопределяет значение по умолчанию css