2014-11-19 2 views
0

FlexSlider 2, кажется, положение Титры 10 пикселей выше нижней части отдельных слайдов с этим CSS от линии 97 flexslider.css:центрирующих подписи на FlexSlider с помощью JQuery

.flexslider p { 
    position: absolute; 
    bottom: 10px; 
} 

К этому я добавил свой собственный CSS:

.flexslider p { 
    font-family: 'Exo', san-serif; 
    font-size: 18pt; 
    text-align: center; 
} 

Я заметил, что другие люди, спрашивающие о подписях FlexSlider, используют класс под названием «flex-caption». Это не имеет смысла для меня, потому что строка «flex-caption» вообще не появляется в моих сравнительно недавних версиях flexslider.css и jquery.flexslider-min.js. Тем не менее, я добавил класс к моему HTML:

<div class="flexslider"> 
    <ul class="slides"> 
     <li> 
      <img src="images/slider/craft-the-future.jpg" /> 
      <p class="flex-caption">Craft the future!</p> 
     </li> 
     <li> 
      <img src="images/slider/plugged-in.jpg" /> 
     </li> 
     <li> 
      <img src="images/slider/athletics.jpg" /> 
     </li> 
     <li> 
      <img src="images/slider/make-reality.jpg" /> 
     </li> 
    </ul> 
</div> 

Я решил, что мне нужно добавить влево (или право) собственности на абсолютно позиционированный тега абзаца. Основываясь главным образом на ответе Гринна на this question, я решил использовать JavaScript, чтобы найти ширину пикселя тега абзаца, а затем вычесть эту ширину из ширины ползунка (720 пикселей), прежде чем присвоить значение , оставленное. ,

Я не утверждаю, что знаю JavaScript или jQuery, но я старался сделать все возможное, чтобы я мог с учебниками и документацией. Я не думаю, что я понял, как загрузить обычный JavaScript-код от Grinn, так что я решил перевести этот метод в более тяжелый формат jQuery. Я, наконец, успех в получении браузера распознавать JQuery, так как тревога действительно появляется, когда я перезагрузка: Это, кажется, не имеет значения, использую ли я «.flexslider р» или».flex-титры

$(document).ready(function() { 

    var caption = $(".flexslider p"); 

    alert(caption.length); // For debugging only 

    var indent = 720 - $(caption.innerWidth); 

    $(caption).css({ 
     left: 'indent' 
    }); 

}); 

", чтобы выбрать тег p.

ответ

0

Вы назначаете значение left как строку вместо своей переменной indent.

$(caption).css({ 
     left: 'indent' 
    }); 

Должно быть:

$(caption).css({ 
     left: indent 
    }); 
+0

Спасибо за ответы. Я не знал, нужно ли мне назначать строку или значение. Я задавался вопросом, может ли я превратить значение в строку и добавленные «px» к нему, потому что я использую пиксели в CSS. Однако просто вставка переменной все еще не работает, для меня. – PaulL

 Смежные вопросы

  • Нет связанных вопросов^_^