将维加斯滑块添加到 div 背景

Question

我有一个关于 Vegas 滑块的问题 (http://vegas.jaysalvat.com/)。

我想添加滑块作为黑色背景。

HTML代码：

<div class="ui inverted vertical masthead center aligned segment" id="slider1">
  <div class="ui container">
    <div class="ui large secondary inverted pointing menu" style="border-style: none;">
      <a class="toc item">
        <i class="sidebar icon"></i>
      </a>
      <a class="active item">Home</a>
      <a class="item" href="patron.php">Parton</a>
      <a class="item" href="insygnia.php">Insygnia</a>
      <a class="item" href="historia.php">Historia  szkoły</a>
      <a class="item" href="dokumenty.php">Dokumenty</a>
      <a class="item" href="matura.php">Matura</a>
      <a class="item" href="strony.php">Strony  WWW</a>
      <a class="item" href="galeria.php">Galeria</a>
      <a class="item" href="kontakt.php">Kontakt</a>
    </div>
  </div>
  <div class="ui text container">
    <h1 class="ui inverted header">
      Życie jest długie, jeżeli się umie z niego korzystać.
    </h1>
    <h2>
      Senega
    </h2>
  </div>
</div>

要粘贴的基本维加斯脚本：

$("#example, body").vegas({
  slides: [
    { src: "/img/slide1.jpg" },
    { src: "/img/slide2.jpg" },
    { src: "/img/slide3.jpg" },
    { src: "/img/slide4.jpg" }
]});

有人可以帮助我将此脚本实施到 html 吗？我不是典型的程序员，不懂JS语言

谢谢。

Answer 1

只需将 #example 更改为 #slider1 以匹配容器 ID，并替换 src 值以指向您站点上的图像。这是我在浏览器控制台中对您的站点进行测试的示例：

$("#slider1, body").vegas({
  slides: [
    { src: "http://i.imgur.com/Kf2zBCB.jpg" },
    { src: "http://i.imgur.com/OtjnTqO.jpg" },
    { src: "http://i.imgur.com/Sd44gRr.jpgg" },
    { src: "http://i.imgur.com/MXVqtDe.jpg" }
]});

当然，用你自己的图片替换这些。

将维加斯滑块添加到 div 背景

Adding vegas slider to div background

html

javascript

jquery

slider