Unslider не работает с кнопками

Я использую OpenSource «unslider» и im, используя код, чтобы позволить кнопкам «скользить» к тому или иному изображению. Код, указанный здесь: http:www.unslider.com «Добавление предыдущих/следующих строк» не работает.Unslider не работает с кнопками

я обеспечиваю правила CSS и HTML-теги Я использую:

div class="wrapper"> 
<div id="banner_promos"> 
<!-- Botones del banner e imagen --> 
    <div id ="left_arrow"> 
     <a href="#" class="unslider-arrow prev"><img src="images/arrow-left-02.png" width="40" height="40"></a> 
    </div> 
    <div id ="right_arrow"> 
     <a href="#" class="unslider-arrow next"><img src="images/arrow-right-01.png" width="40" height="40"></a> 
    </div> 
    <div id="img_banner" class="banner"> 
     <script src="pages/scripts/slider.js"></script> 
     <ul> 
      <li> 
       <img src="images/promos/pepes_promo.jpg" width="700" height="350"/> 
      </li> 
      <li> 
       <img src="images/promos/guidos_promo.jpg" width="700" height="350"/> 
      </li> 
     </ul> 
    </div> 
</div>

и здесь правила CSS:

#left_arrow, #right_arrow{ 
    margin-top:140; 
} 
#left_arrow{ 
    float:left; 
} 
#right_arrow{ 
    float:right; 
} 
#img_banner{ 
    /*float:left; 
    */ 
} 
.banner { position: relative; overflow: auto; top: 0px } 
    .banner li { list-style: none; } 
     .banner ul li { float: left; }

Код им с помощью является следующие:

var unslider = $('.banner').unslider(); 
$('.unslider-arrow').click(function(event) { 
    alert('entra'); 
    event.preventDefault(); 
    if ($(this).hasClass('next')) { 
     unslider.data('unslider')['next'](); 
    } else { 
     unslider.data('unslider')['prev'](); 
    }; 
});

источник

2013-07-26 chntgomez

Оповещение стрельбы? Любые ошибки? – Omar

Предупреждение никогда не срабатывает. – chntgomez

Вы завернули свой код в '$ (document) .ready (function() {your code});'? Как указано на шаге 4 на веб-сайте. – Omar

Поместите свой код внутри

$(document).ready(function() { 
// code goes here 
});

источник

2013-07-26 00:42:53 Omar

Привет проверить это мой unslider.com файл справки:

<!-- 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>

Кнопки выполняют свою работу

источник

2014-06-21 16:56:35 Denzelq

Unslider не работает с кнопками

ответ

Смежные вопросы