Question

由于我的失败，我真的很无聊。

我有滑块，我的滑块在#slider div中工作，但每当我将图像放到.items滑块时，我的滑块无效，我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple jQuery Image Slider Part One</title>
    <!-- Add bower components -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- Demo content -->
    <div id="slider">
        <div class="controls">
            <div id="next">İleri</div>
            <div id="prev">Geri</div>
        </div>
        <div class="items">
            <img src="img/img-1.jpg" height="2334" width="3500" alt="">
            <div class="detail">
                <h2>Title of mine</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nesciunt nisi, doloremque assumenda, ipsam quas, dolore amet cumque fugiat dignissimos maiores nobis sint architecto omnis, vero voluptatum facilis. Expedita, aut.</p>
            </div>
        </div>

        <div class="items">
            <img src="img/img-2.jpg" height="2334" width="3500" alt="">
            <div class="detail">
                <h2>Detail of mine</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nesciunt nisi, doloremque assumenda, ipsam quas, dolore amet cumque fugiat dignissimos maiores nobis sint architecto omnis, vero voluptatum facilis. Expedita, aut.</p>
            </div>
        </div>

        <div class="items">
            <img src="img/img-3.jpg" height="2334" width="3500" alt="">
            <div class="detail">
                <h2>Slider of mine</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nesciunt nisi, doloremque assumenda, ipsam quas, dolore amet cumque fugiat dignissimos maiores nobis sint architecto omnis, vero voluptatum facilis. Expedita, aut.</p>
            </div>
        </div>
    </div>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/jquery-cycle2/build/jquery.cycle2.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

的CSS。

/* line 2, ../sass/main.scss */
#slider {
  position: relative;
  width: 960px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}
/* line 8, ../sass/main.scss */
#slider .controls {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 99;
  background: #fff;
  padding: 7px;
}
/* line 16, ../sass/main.scss */
#slider .items {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}
/* line 20, ../sass/main.scss */
#slider .items img {
  width: 100%;
  height: 100%;
}
/* line 24, ../sass/main.scss */
#slider .items .detail {
  position: absolute;
  background: rgba(204, 17, 5, 0.7);
  bottom: 0;
}
/* line 28, ../sass/main.scss */
#slider .items .detail h2 {
  padding: 5px;
  margin: 0;
  color: #fff;
  font-size: 22px;
}
/* line 34, ../sass/main.scss */
#slider .items .detail p {
  margin: 0;
  padding: 5px;
  color: #fff;
  line-height: 20px;
  word-spacing: -1px;
  font-family: tahoma;
  font-size: 12px;
}

JS

$('#slider ').cycle({
        fx: 'scrollHorz',
        next: '#next',
        prev: '#prev',
        pager: '#pager',
        timeout: 3000,
        speed:900
    });

但它的工作方式如下;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple jQuery Image Slider Part One</title>
    <!-- Add bower components -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- Demo content -->
    <div id="slider">
        <div class="controls">
            <div id="next">İleri</div>
            <div id="prev">Geri</div>
        </div>

            <img src="img/img-1.jpg" height="2334" width="3500" alt="">
            <img src="img/img-2.jpg" height="2334" width="3500" alt="">

    </div>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/jquery-cycle2/build/jquery.cycle2.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

但它并不适合我，我想在我的滑块图片上info-details内容，这就是为什么我把它们放到另一个div以避免混淆

你能帮我吗？

循环滑块不适用于另一个div

0 个答案: