ResponsiveSlides无法正常工作

问题描述

我正在使用responsiveSlides Slider但是在自动模式为真之前它无法正常工作。我有一个代码如下...



Js代码：

I am using responsiveSlides Slider but it is not working till auto mode is true. I have a code as follow...

Js Code :

<script src="Scripts/responsiveslides.min.js" type="text/javascript"></script>
<script src="Scripts/responsiveslides.js" type="text/javascript"></script>
<link href="Styles/responsiveslides.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    (function () {
        $("#slider").responsiveSlides({
            maxwidth: 800,
            speed: 500
        });
    });
</script>

这是css代码：

Here is css code :

<style type="text/css">
    .rslides {
      position: relative;
      list-style: none;
      overflow: hidden;
      width: 100%;
      padding: 0;
      margin: 0;
      }

    .rslides li {
      -webkit-backface-visibility: hidden;
      position: absolute;
      display: none;
      width: 100%;
      left: 0;
      top: 0;
      }

    .rslides li:first-child {
      position: relative;
      display: block;
      float: left;
      }

    .rslides img {
      display: block;
      height: auto;
      float: left;
      width: 100%;
      border: 0;
      }
</style>

这里是html代码：

And here is html code :

<div id="wrapper">
    <ul class="rslides" id="slider">
        <li>
            <img src="Images/slide1.png" alt=""></li>
        <li>
            <img src="Images/slide2.png" alt=""></li>
        <li>
            <img src="Images/slide3.png" alt=""></li>
        <li>
            <img src="Images/slide4.png" alt=""></li>
        <li>
            <img src="Images/slide5.png" alt=""></li>
    </ul>
</div>

我还附上了jquery.min.js版本是v1.8.3：

And I have also attached jquery.min.js version is v1.8.3:

<script src="Scripts/jquery.min.js" type="text/javascript"></script>

我没有对css&的所有文件做任何改动。 response.slides文件的javascript，它们就是这样，我上面附有文件。

And I haven't made any change in all files of css & javascript of responsiveSlides files, they are as it is and I have attached files as above.

推荐答案

这是css代码：

Here is css code :

<style type="text/css">
    .rslides {
      position: relative;
      list-style: none;
      overflow: hidden;
      width: 100%;
      padding: 0;
      margin: 0;
      }

    .rslides li {
      -webkit-backface-visibility: hidden;
      position: absolute;
      display: none;
      width: 100%;
      left: 0;
      top: 0;
      }

    .rslides li:first-child {
      position: relative;
      display: block;
      float: left;
      }

    .rslides img {
      display: block;
      height: auto;
      float: left;
      width: 100%;
      border: 0;
      }
</style>

这里是html代码：

And here is html code :

<div id="wrapper">
    <ul class="rslides" id="slider">
        <li>
            <img src="Images/slide1.png" alt=""></li>
        <li>
            <img src="Images/slide2.png" alt=""></li>
        <li>
            <img src="Images/slide3.png" alt=""></li>
        <li>
            <img src="Images/slide4.png" alt=""></li>
        <li>
            <img src="Images/slide5.png" alt=""></li>
    </ul>
</div>

我还附上了jquery.min.js版本是v1.8.3：

And I have also attached jquery.min.js version is v1.8.3:

<script src="Scripts/jquery.min.js" type="text/javascript"></script>

我没有对css&的所有文件做任何改动。 responseSlides文件的javascript，它们就是这样，我上面附有文件。

And I haven't made any change in all files of css & javascript of responsiveSlides files, they are as it is and I have attached files as above.

这篇关于ResponsiveSlides无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！