当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - jquery image slider "Unslider" not working correctly

问题描述:

I got this snippet http://unslider.com/. I did everything asked there to get it working. But somehow it doesn't seem to load the next image in the queue and in return gives a blank space... You can see it here. easycounseling.org/new.html .. Here's the code:

<script>

$(function() {

$('.ss-area').unslider();

});

</script>

<div class="ss-area clearfix">

<ul class="img-sli">

<li class="fimg">

<div class="contents clearfix">

<div class="info-box">

<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>

<div class="con-us-btn-wr">

<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>

</div>

<p>

to signup and avail of our limited period promotional offer!

</p>

</div>

</div>

<div class="mer-usp-wr">

<ul class="mer-usp clearfix" style="font-size:18px;">

<li><a href="#hi-con">DEmo DEmo </a></li>

<li><a href="#bett-pri">DEmo DEmo DEmo </a></li>

<li><a href="#zero-sign">DEmo e</a></li>

<li><a href="#grt-supp">DEmo DEmo </a></li>

<li><a href="#go-mob">DEmo DEmo </a></li>

</ul>

</div>

</li>

<li class="simg">

<div class="contents clearfix">

<div class="info-box">

<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>

<div class="con-us-btn-wr">

<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>

</div>

<p>

to signup and avail of our limited period promotional offer!

</p>

</div>

</div>

<div class="mer-usp-wr">

<ul class="mer-usp clearfix" style="font-size:18px;">

<li><a href="#hi-con">DEmo DEmo </a></li>

<li><a href="#bett-pri">DEmo DEmo DEmo </a></li>

<li><a href="#zero-sign">DEmo e</a></li>

<li><a href="#grt-supp">DEmo DEmo </a></li>

<li><a href="#go-mob">DEmo DEmo </a></li>

</ul>

</div>

</li>

</ul>

</div>

网友答案:

The plugin is based on jQuery library

So you need to include jQuery and the plugin script file to make it work. The order in which they are loaded is important

--->  jQuery

--->  unslider plugin

Put this in the section where you have included the other script files. You can always test this by inspecting the console in Developer tools of the browser. It clearly shows the error.

网友答案:

Hi check this my unslider.com help file:

        <!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
    <title>Unslider.com example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>

        <!-- JavaScript -->

    <script type="text/javascript">

$(function() {
$('.banner').unslider({
    speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 3000,              //  The delay between slide animations (in milliseconds)
    complete: function() {},  //  A function that gets called after every slide animation
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    fluid: false              //  Support responsive design. May break non-responsive designs

});
var unslider = $('.banner').unslider();

  $('.prev').click(function() {
      unslider.data('unslider').prev();
  });

  $('.next').click(function() {
      unslider.data('unslider').next();
  });
  return false;
});
</script>

    <!-- CSS -->
    <style type="text/css">

* { 
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box; 
}

.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/

font-size: 18px;
line-height: 24px;
text-align: center;

color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);

background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;

min-height: 500px;

-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;

box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}

.banner .inner {
padding: 360px 0 110px;

float: left;
vertical-align:-100px;
}

.banner h1, .banner h2 {

font-size: 40px;
line-height: 52px;
color: #fff;
}

.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;

color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}

.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;

width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;

text-indent: -999em;


border: 2px solid #fff;
border-radius: 6px;

cursor: pointer;
opacity: .4;

-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}




.unslider-arrow {
  font-family: Expressway;
  font-size: 50px;
  text-decoration: none;
  color: #3d3d3d;
  background: rgba(255,255,255,0.7);
  padding: 0 20px 5px 20px;
}

.next {
  position: absolute;
  top: 65%;
  right: 0  
}

.prev {
  position: absolute;
  top: 65%;
  right: 90 /* change to left:0; if u wanna have arrow on left side */ 
}
</style>
     </head>
    <!-- Body of HTML document -->

    <body>
        <div class="slider">
        <div class="banner">
          <ul>
          <li style="background-image: url('http://lorempixel.com/1200/600/');">
            <div class="inner">
              <h1>Some h1 text</h1>
             <p>smaller p text</p>

                <a class="btn" href="http://www.yourlink.com">Hyperlink</a>
            </div>
          </li>

          <li style="background-image: url('http://lorempixel.com/1200/600/');">
            <div class="inner">
              <h1>Some h1 text</h1>
             <p>smaller p text</p>

              <a class="btn" href="http://www.yourlink.com">Hyperlink</a>
              </div>
              </li>

           <li style="background-image: url('http://lorempixel.com/1200/600/');">
             <div class="inner">
              <h1>Some h1 text</h1>
             <p>smaller p text</p>

              <a class="btn" href="http://www.yourlink.com">Hyperlink</a>
              </div>
          </li>

          <li style="background-image: url('http://lorempixel.com/1200/600/');">
          <div class="inner">
              <h1>Some h1 text</h1>
             <p>smaller p text</p>

              <a class="btn" href="http://www.yourlink.com">Hyperlink</a>
            </div>
          </li>
      </ul>


        </div>
          <a href="#" class="unslider-arrow prev">&larr;</a>
          <a href="#" class="unslider-arrow next">&rarr;</a>
        </div>
   </body>  

</html>
分享给朋友:
您可能感兴趣的文章:
随机阅读: