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

Question

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

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

不幸的是，我在网页设计方面是个菜鸟，所以我在看一个又一个教程，我正在尝试个性化/调整它以获得足够的结果。

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

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

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

有什么需要解决的？

(1) 标题空间的大小必须根据照片进行调整

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

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

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

(3) 作为额外的，我希望滑块可以在整个站点上工作，并从顶部有一些额外的空间。

-> 再次，我还没有找到可以更改的行，请您帮助我。

感谢您提供任何有用的答案。

X, 伊丽莎

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

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

Answer 1

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

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

现在 - 根据您的编码知识，创建滑块可能需要一些工作。首先，您需要在模板标题中包含滑块和jQuery 库（这不是图像/博客名称，这是名为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 仪表板上的“布局”部分，并在您希望滑块出现的位置添加新的“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>

让我知道它是否有效:)

谢谢，
卢卡