Question

我有SlidesJS工作但由于某种原因它认为帧比它们大。因此，如果我将4个段落作为幻灯片放映，则幻灯片显示仍会占据页面的大部分内容。

我尝试在底部的脚本中放入较小的宽度和高度值，但它似乎没有什么区别。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SlidesJS Standard Code Example</title>
  <meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
  <meta name="author" content="Nathan Searles">

  <!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
  <meta name="viewport" content="width=device-width">
  <!-- End SlidesJS Required -->

  <!-- CSS for slidesjs.com example -->
  <link rel="stylesheet" href="css/example.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">

</head>
<body>

  <!-- SlidesJS Required: Start Slides -->
  <!-- The container is used to define the width of the slideshow -->
  <div class="container">
    <div id="slides">
      <p>Hello</p>
      <p>Hello1</p>
      <p>Hello2</p>
      <p>Hello3</p>

      <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
      <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
    </div>
  </div>
  <!-- End SlidesJS Required: Start Slides -->

  <!-- SlidesJS Required: Link to jQuery -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Link to jquery.slides.js -->
  <script src="js/jquery.slides.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 94,
        height: 52
      });
    });
  </script>
  <!-- End SlidesJS Required -->
</body>
</html>

Answer 1

更新：我发现example.css中的响应式css覆盖了我的高度和宽度。

 /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 1170px
      }

我改变了这个宽度，最后听了。

我遇到了同样的问题。不能说我真的找到了正确的解决方案，但我发现谷歌小组正在谈论这个问题。 https://groups.google.com/forum/#!topic/slidesjs/mvbfqq0Fig4 我基本上尝试按照说明并在它周围放置div并为该div设置高度和宽度。

Answer 2

example.css中的CSS可能会覆盖您在脚本中设置的宽度和高度。尝试在CSS中调整宽度和高度。

调整SlidesJS幻灯片的大小

2 个答案: