Blogger.com：使用 HTML 和 Java 将 Header 更改为幻灯片

Question

我目前正在制作一个新模板，我想将我的 header 更改为幻灯片。如果我知道怎么做，我希望它看起来像下面这样：

http://www.masha-sedgwick.com/de/

不幸的是，我对网页设计一窍不通，所以我一个接一个地看教程，我正在努力 personalize/adjust 以取得足够的结果。

所以，一开始我尽力将下面的教程付诸实践。如您所见，仍有一些错误需要修复。

自动幻灯片教程： https://codepad.co/snippet/0p7cAgm1

这是我的测试网站： https://bt2dtest.blogspot.de/

有什么需要解决的？;

(1) header space 的大小必须根据照片进行调整

-> 但是，我无法在 HTML 中找到可以更改它的位置。如果有人有线索，请帮助我。

(2) 由于我的照片与教程中的照片尺寸不同，循环已关闭。

-> 我该如何更改？（如果有人能向我解释这个机制，我会非常高兴，这样我就能真正明白我在做什么。）

(3) 作为额外的我希望滑块能够在整个网站上工作，并从顶部有一些额外的 space。

-> 同样，我没有找到可以更改的行，请您帮助我。

感谢任何有帮助的回答。

X, 酶联免疫吸附

这是 HTML/CSS 我的博客包括：

https://www.file-upload.net/download-12829883/betterthan2day7.xml.html

Answer 1

实际上您不必从头开始设计滑块，而是使用许多预先设计的库之一。最受欢迎的是：
- Owl Carousel,
- Slick Slider.

虽然第二个好像被放弃了，但对我来说还是更好的。这两个滑块都会自动以滑块的形式显示图像。

现在 - 根据您的编码知识，创建滑块可能需要一些工作。首先，您需要在模板 header 中包含滑块和 jQuery 库（这不是 image/blog 名称，这是名为 header 的模板代码的一部分）。找到 </head> 标签并在其前面放置以下代码：

<script src='//code.jquery.com/jquery-2.2.4.min.js' type='text/javascript'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css' type='text/css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js' type='text/javascript' />

第一个代码加载 jQuery 对运行您的滑块至关重要的库。第二个代码是滑块的基本 CSS 样式，而第三个代码是滑块本身。

现在是有趣的部分 - 抓取一些图像，将它们上传到 Blogger 或外部图像托管服务并收集它们的地址。然后转到 Blogger 仪表板上的 "Layout" 部分，并在您希望滑块出现的位置添加新的 "HTML/JavaScript" 小部件。使用以下代码：

<div class="image-slider">
    <a href="POST_ADDRESS"><img src="YOUR_IMAGE" /></a>
    <a href="POST_ADDRESS"><img src="YOUR_IMAGE" /></a>
    <a href="POST_ADDRESS"><img src="YOUR_IMAGE" /></a>
    <a href="POST_ADDRESS"><img src="YOUR_IMAGE" /></a>
</div>
<script type="text/javascript">
    jQuery('.image-slider').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
          arrows: false,
          dots: false,
    });
</script>
<style type="text/css">
    .image-slider {
        margin-top: 25px;
    }
    .image-slider .slick-slide {
        margin: 0 3px;
        display: inline-block;
    }
    .image-slider a {
        display: block;
        width: 100%;
    }
    .image-slider img {
        width: 100%;
        height: auto;
    }
</style>

让我知道它是否有效:)

谢谢，
卢卡

Blogger.com：使用 HTML 和 Java 将 Header 更改为幻灯片

Blogger.com: Changing Header to slideshow with HTML & Java

html

css

templates

blogger

header