Flexslider DISABLE полноразмерный дисплей, автоматическая настройка

0

Я только что установил шаблон блога, который включает слайдер. Шаблон происходит от:

sight-soratemplates.blogspot.com

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

Как я могу это изменить? Я полный новичок в кодировке html. Я бы хотел, чтобы ползунок автоматически адаптировался для каждого изображения.

Код html для слайдера вместе с 1 изображением:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='slider' style='overflow:hidden;'>
     <div class='fullwidth flexslider' id='homeslider'>
          <ul class='slides'>
               <li data-height='500' style='position:relative; background: url(http://x.jpg) 50% 0'>
                    <div class='caption_wrapper'>
                         <div class='caption'>
                              <h3><a href='#'>Random Title</a></h3>Random Caption<a href='#'>Read more </a>
                         </div>
                    </div>
               </li>
Теги:
slider
flexslider

1 ответ

0
Лучший ответ

Это потому, что background image действительно повторяется. Вы можете избежать этого, добавив no-repeat ко всем вашим изображениям.

Например, у вас есть следующее:

element.style {
    background: url("https://lh3.googleusercontent.com/-X29Krwb_fbQ/UcMfaRJm_TI/AAAAAAAAB2Y/QaQkIwWMZ5c/s1600/9d.jpg") repeat scroll 50% 0 rgba(0, 0, 0, 0);

Измените его на

element.style {
    background: url("https://lh3.googleusercontent.com/-X29Krwb_fbQ/UcMfaRJm_TI/AAAAAAAAB2Y/QaQkIwWMZ5c/s1600/9d.jpg") no-repeat scroll 50% 0 rgba(0, 0, 0, 0);

PS: ваш сайт выглядит великолепно.

  • 0
    Работал красиво! Спасибо!
  • 0
    Нет проблем, рад, что это помогло.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню