Я только что установил шаблон блога, который включает слайдер. Шаблон происходит от:
sight-soratemplates.blogspot.com
Как видно из ползунка, изображения имеют полную ширину страницы, однако изображения, которые я их заменяю, составляют примерно половину ширины, но вместо того, чтобы отображать изображение как есть, он повторяет их, чтобы покрыть всю ширину страницы.
Как я могу это изменить? Я полный новичок в кодировке html. Я бы хотел, чтобы ползунок автоматически адаптировался для каждого изображения.
Код html для слайдера вместе с 1 изображением:
<b:if cond='data:blog.pageType == "index"'>
<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>
Это потому, что 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: ваш сайт выглядит великолепно.