向雨果添加响应式三面板滑块

Question

我正在尝试将滑块添加到我的Hugo网站上，该滑块连续显示三个图像，然后按下按钮后，将下一组滑动到下一组三个图像。如果屏幕尺寸很小，则滑块一次通过一次显示一个图像来做出响应。

我能够通过采用tbiering的 hugo slider shortcode < /a>。我无法将其修改为包含三张图像，因为我不熟悉jQuery。取而代之的是，我用 alcod> goaler> gallery-slider.html 页面=“ nofollow noreferrer”>此代码。我之所以选择它，是因为它使用了一个flexbox，这使我认为它更有可能响应，并且因为它是用javaScript编写的，我对此有所了解。

该代码是功能性滑块，但仅显示ALT文本。这就是我尝试添加图像的方式：

＆lt; div class =“ slider-item” data-position =“ 1”＆gt;＆lt; img src =“ ns1.jpg” alt =“ bird oon tree on tree on Tree” ＆gt;＆lt;/div＆gt;

我无法弄清楚哪个文件夹应保存图像文件。我尝试过：

• 在 content/static 中（其中图像通常居住在雨果中）；
• 在与引用短代码的页面相同的文件夹中；
• 在与包含短代码的文件夹中。
• 在任何文件夹中，都引用了绝对路径。
• 作为CSS IE的一部分，作为背景图像。 background-image：url（'file：////path/to/image/ns1.jpg'）;

需要明确的是，通往图像文件的路径是正确的；当我将其插入文件浏览器中时，它会显示出来。

感谢您的帮助。

---

更新：

我回到了Tbiering的脚本，我的想法是我可以设置一个flexbox parent div，拿着三个空的孩子div。对于每个空的孩子div，我可以循环浏览文件夹中的图像，并使代码停止循环，以便第一个空的DIV显示第一个图像，第二个空的DIV显示了第二张图像等。问题是我可以't完全停止了循环，我得到了看起来像这样的东西：

我已经附加了代码；由于没有放置降价的地方，它实际上没有起作用。

sliderJQuery = jQuery.noConflict();
sliderJQuery(function($) {
  $.global = new Object();
  $.global.total = 0;

  $(document).ready(function() {
    var slideWindowWidth = $('#slide-window').width();
    var slideCount = $('#slides-list li').length;
    var totalSlidesWidth = slideCount * slideWindowWidth;

    $.global.item = 0;
    $.global.total = slideCount;

    $('.slide').css('width', slideWindowWidth + 'px');
    $('#slides-list').css('width', totalSlidesWidth + 'px');

    $('#left').click(function() {
      resetAutoSlide();
      performSlide('back');
    });

    $('#right').click(function() {
      resetAutoSlide();
      performSlide('forward');
    });

  });

  function performSlide(direction) {
    if (direction == 'back') {
      var nextSlideId = $.global.item - 1;
    }
    if (direction == 'forward') {
      var nextSlideId = $.global.item + 1;
    }

    if (nextSlideId == -1) {
      /* At first position and requesting 'back' -> Go to last item */
      moveCss($.global.total - 1);
    } else if (nextSlideId == $.global.total) {
      /* At last position and requesting 'forward' -> Go to first item */
      moveCss(0);
    } else {
      /* Move to requested item */
      moveCss(nextSlideId);
    }
  }

  function moveCss(nextSlideId) {
    var slideWindowWidth = $('#slide-window').width();
    var margin = slideWindowWidth * nextSlideId;

    $('#slides-list').css('transform', 'translate3d(-' + margin + 'px,0px,0px)');

    $.global.item = nextSlideId;
  }

  {
    {
      if ne(.Get "auto-slide")
      "0"
    }
  }
  var autoSlide = parseInt({
    {
      $.Scratch.Get "auto-slide"
    }
  }, 10);
  var autoSlideInterval;

  function resetAutoSlide() {
    if (autoSlide) {
      if (autoSlideInterval) {
        clearInterval(autoSlideInterval);
      }
      autoSlideInterval = setInterval(function() {
        performSlide('forward');
      }, autoSlide)
    }
  }
  resetAutoSlide();

  {
    {
      -end
    }
  }
});

#slide-window {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 1080px;
}

#emptyplaceholder {
  width: {
    {
      $.Scratch.Get "width"
    }
  }
  ;
  height: {
    {
      $.Scratch.Get "height"
    }
  }
  ;
  overflow: hidden;
  top: 0px;
  left: 0px;
}

#slides-list {
  width: {
    {
      $.Scratch.Get "width"
    }
  }
  ;
  height: {
    {
      $.Scratch.Get "height"
    }
  }
  ;
  position: absolute;
  margin: 0px;
  padding: 0px;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  transition: all 0.66s ease;
  -webkit-transition: all 0.66s ease;
}

.slide {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  width: {
    {
      $.Scratch.Get "width"
    }
  }
  ;
  height: {
    {
      $.Scratch.Get "height"
    }
  }
  ;
  background: #ccc;
  text-align: center;
  line-height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  color: #fff;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -webkit-transform-style: preserve-3d;
}

.nav {
  position: absolute;
  z-index: 3;
  top: 45%;
  cursor: pointer;
  color: grey;
  opacity: 0.7;
  transition: all 0.66s ease;
  -webkit-transition: all 0.66s ease;
}

.nav:hover {
  opacity: 1.0;
}

#left {
  left: -25%;
  float: left;
  background: transparent;
}

#right {
  right: -25%;
  float: right;
  background: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="slide-window">
  <div id="emptyplaceholder">div1</div>
  {{- with (.Get "dir") -}} {{- $files := readDir (print "/static/" .) }} {{- range $files -}} {{- $absoluteUrl := print ($.Get "dir") "/" .Name | absURL }}
  <li class="slide" style="background-image:url({{ $absoluteUrl }});"></li>
  {{- end }} {{- end }}
  <div id="emptyplaceholder">div2</div>
  {{- with (.Get "dir") -}} {{- $files := readDir (print "/static/" .) }} {{- range $files -}} {{- $absoluteUrl := print ($.Get "dir") "/" .Name | absURL }}
  <li class="slide" style="background-image:url({{ $absoluteUrl }});"></li>
  {{- end }} {{- end }}
  <div id="emptyplaceholder">div3</div>
  {{- with (.Get "dir") -}} {{- $files := readDir (print "/static/" .) }} {{- range $files -}} {{- $absoluteUrl := print ($.Get "dir") "/" .Name | absURL }}
  <li class="slide" style="background-image:url({{ $absoluteUrl }});"></li>
  {{- end }} {{- end }}

  <span class="nav fa {{ $.Scratch.Get " arrow-left " }} fa-3x" id="left"></span>
  <span class="nav fa {{ $.Scratch.Get " arrow-right " }} fa-3x" id="right"></span>

Answer 1

static/目录默认使用 .resources 函数无法访问，因此您当前正在尝试读取 static/目录以获取访问到图像参数。

您应该做的是将图像放在网站的资产/目录中。通过这样做，您可以按名称访问图像，并可以访问诸如 .relpermalink ， .width 和。代码>

{{ $image := .Resources.GetMatch "sunset.jpg" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

如果您需要将图像保存在静态/文件夹中，则可以使用 static/目录安装。代码>资产/

# Mount the static dir to the assets, to be able to fetch the static files as assets and merge them together
[module]
[[module.mounts]]
  source = 'static/css'
  target = 'assets/css'

在此处的Hugo文档中的更多信息：