1

在这种情况下，我真的很困惑。我使用了 Unslider 滑块，直到现在我都可以正常工作。滑块的问题之一是所涉及的照片。默认情况下，第一张照片将显示为第一张，但我无法滑动到下一张照片，因为第二张照片位于第一张的正下方。可以说每张幻灯片有多张照片。下一张幻灯片显示空白。

还有一件事是我的导航文本不允许我转到另一个 .html 页面，尽管我列出了每个导航选项的标签。

代码

.photo {
  width: 800px;
  height: 500px;
}
.my-slider {
  float: right;
  position: relative;
  right: 11em;
  bottom: 1em;
  width: 800px;
  height: 500px;
}
/* Slider */

.unslider {
  overflow: auto;
  margin: 0;
  padding: 30px;
  position: relative;
}
.unslider-wrap {
  position: relative
}
.unslider-wrap .unslider-carousel>li {
  float: right
}
.unslider-vertical>ul {
  height: 100%
}
.unslider-fade {
  position: relative
}
.unslider-fade .unslider-wrap li {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 8
}
.unslider-fade .unslider-wrap li .unslider-active {
  z-index: 10
}
.unslider li,
.unslider ol,
.unslider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
.unslider-arrow {
  position: absolute;
  left: 20px;
  z-index: 2;
  cursor: pointer;
  clear: both;
}
.unslider-arrow.next {
  top: 33em;
  left: 56em;
  right: 20px;
}
.unslider-arrow.prev {
  top: 33em;
  left: 41em;
}
/* Slider Navigation */

.unslider-nav ol {
  list-style: none;
  text-align: center;
  position: relative;
  left: 33.5em;
  bottom: 1em;
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #fff;
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js"></script>

<body>
  <nav>
    <ul>
      <a href="index.html">
        <li>Home</li>
      </a>
      <a href="portfolio.html">
        <li>Portfolio</li>
      </a>
      <a href="gallery.html">
        <li>Gallery</li>
      </a>
      <a href="contact.html">
        <li>Contact</li>
      </a>
      <a href="feedback.html">
        <li>Feedback</li>
      </a>
    </ul>
  </nav>

  <div class="my-slider unslider-horizontal">
    <ul class="unslider-wrap unslider-carousel">
      <li class="unslider-active">
        <img src="http://lorempixel.com/output/nature-q-c-800-500-3.jpg" alt="Shadowed (2015)" class="photo">
      </li>
      <li>
        <img src="http://lorempixel.com/output/nature-q-c-800-500-3.jpg" alt="Shaped (2015)" class="photo">
      </li>
    </ul>
  </div>

  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <script src="unslider.js"></script>
  <script src="//stephband.info/jquery.event.move/js/jquery.event.move.js"></script>
  <script src="//stephband.info/jquery.event.swipe/js/jquery.event.swipe.js"></script>

  <script>
    jQuery(document).ready(function($) {
      $('.my-slider').unslider({});
    });
  </script>
  <script>
    $('.infinite-slider').unslider({
      infinite: true
    });
  </script>
</body>

4

0 回答 0