如何在 eBay 拍卖中正确设置 JSsor？

Question

我了解 HTML 的 非常基础知识 并且正在尝试 post 我的 ebay 列表中的图像幻灯片。为了让 Jssor 发挥作用，我尝试了以下方法：

已从 Jssor slider 下载 slider-19.0.1 GitHub。
尝试使用 photobucket 和 imgur 多次关注 ebay/blog post guide on jssor's website。最终结果显示在我的 ebay 清单上，要么是原始代码的显示，要么是一张不会滑动到任何地方的静态图像。是的，我确实使用 Jssor.Compress.exe 工具压缩了它 successfully.I 已经安装并且重新通过 GitHub.
[ 安装了该工具=53=]
我还尝试按照说明从 "examples-no-jQuery" 文件夹中的 GitHub 下载示例源文件。是的，我确实从 imgur 插入了我自己的链接。即vertical-slider.source.html和simple-slider.source.html。压缩后，它们都以一长串代码的形式出现在我的易趣拍卖的描述中。是的，我用的是ebay上的HTML编辑器，不是纯文本描述框。但是，当直接用我的网络浏览器 (Firefox) 打开时，实际上显示了第一张图片 (!)，但它从来没有滑动到任何地方，并且显示了 none 的其他图片。

我可能在某处遗漏了一个关键步骤，如果您能指出正确的方向，我将不胜感激。以下是压缩版本，源自源示例直接来自您的网站，我的照片链接已修补，运行最近的压缩器工具，它们对我不起作用它们肯定是压缩的，因为它们比源文件短了大约 50%：

垂直示例，来自 here on the jssor github：（压缩前 >100 行）

/*Jssor*/

.jssora08l,
.jssora08r {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: url(../img/a08.png) no-repeat;
  overflow: hidden;
  opacity: .4;
  filter: alpha(opacity=40)
}

.jssora08l {
  background-position: -5px -35px
}

.jssora08r {
  background-position: -65px -35px
}

.jssora08l:hover {
  background-position: -5px -35px;
  opacity: .8;
  filter: alpha(opacity=80)
}

.jssora08r:hover {
  background-position: -65px -35px;
  opacity: .8;
  filter: alpha(opacity=80)
}

.jssora08l.jssora08ldn {
  background-position: -5px -35px;
  opacity: .3;
  filter: alpha(opacity=30)
}

.jssora08r.jssora08rdn {
  background-position: -65px -35px;
  opacity: .3;
  filter: alpha(opacity=30)
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Slider - Jssor Slider, Carousel, Slideshow</title>
</head>

<body style="font-family:Arial, Verdana;background-color:#fff;">
  <script type="text/javascript" src="../js/jssor.slider.min.js"></script>

  <script>
    jssor_slider1_starter = function(containerId) {
      var options = {
        $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
        $DragOrientation: 2, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        $ArrowNavigatorOptions: {
          $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
          $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
          $AutoCenter: 1, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
          $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
        }
      };
      var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
  </script>
  <div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
    <div u="loading" style="position:absolute;top:0px;left:0px;">
      <div style="filter:alpha(opacity=70);opacity:0.7;position:absolute;display:block;background-color:#000000;top:0px;left:0px;width:100%;height:100%;">
      </div>
      <div style="position:absolute;display:block;background:url(../img/loading.gif) no-repeat center center;top:0px;left:0px;width:100%;height:100%;">
      </div>
    </div>
    <div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">

      <div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
    </div>
    <span u="arrowleft" class="jssora08l" style="top:8px;left:8px;">
</span>
    <span u="arrowright" class="jssora08r" style="bottom:8px;left:8px;">
</span>
    <a style="display:none" href="http://www.jssor.com">Image Slider</a>
    <script>
      jssor_slider1_starter('slider1_container');
    </script>
  </div>
</body>

</html>

来自 here on the jssor website 的 "simple slider" 示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
</head>

<body style="font-family:Arial, Verdana;background-color:#fff;">
  <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
  <script>
    jssor_slider1_starter = function(containerId) {
      var options = {
        $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $DragOrientation: 1 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
      };
      var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
  </script>
  <div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
    <div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">
      <div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
    </div>
    <a style="display:none" href="http://www.jssor.com">Image Slider</a>
    <script>
      jssor_slider1_starter('slider1_container');
    </script>
  </div>
</body>

</html>

所有编辑都是用 vim 完成的。我可能遗漏了一些非常简单的东西，但我不明白它是如何不起作用的，因为我遵循了 T 的指南，然后使用了网站上的示例资源。我觉得我已经消除了任何可能导致错误的因素。

Answer 1

请运行垂直-slider.compress.bat,你会得到垂直-slider.html.

打开，<body></body>之间的代码就是你需要的

此外，还有 jssor slider maker you can generate code by one click, see export slider code.

如何在 eBay 拍卖中正确设置 JSsor？

How to set up JSsor on an eBay auction properly?

html

slideshow

jssor

imgur