我的箭頭與unslider jQuery插件的位置有問題

我正在按照unslider的文檔開發帶點和箭頭的滑塊顯示。我的箭頭與unslider jQuery插件的位置有問題

我已經有點像我想要的工作點，但箭頭我有一些問題。

我沒有成功將左側的箭頭對齊我的滑塊左側，右側的箭頭右側對齊我的幻燈片。我已經做了很多測試，但沒有任何工作。

你知道我們如何用unslider插件做到這一點嗎？

什麼我正嘗試： http://jsfiddle.net/jcak/RJqw8/

我的HTML：

<section id="banner-container"> 

    <div class="banner"> 

     <ul> 
      <li style="background-color:red; height:500px;">This is another slide.</li> 
      <li style="background-color:green; height:500px;">This is another slide.</li> 
      <li style="background-color:blue; height:500px;">This is another slide.</li> 
     </ul> 
     <a href="#" class="unslider-arrow prev"></a> 
     <a href="#" class="unslider-arrow next"></a> 
    </div> 

</section>

我的CSS：

#banner-container 
    { 
     width:100%; 
     float:left; 
    } 


    .banner 
    { position: relative; 
     overflow: auto; 
     width: 100%; 
    } 

    .banner li 
    { 
     list-style:none; 
     background-repeat:no-repeat; 
     background-size:cover; 
    } 

    .banner ul li 
    { 
     float: left; 
    } 

    .banner ul li img 
    { width:100%; 
     height:220px; 
    } 
    .banner .dots 
    { margin-left:50%; 
     bottom: 10px; 
     left: 0; 
     position: absolute; 
     right: 0; 
     display:none; 
    } 

    .banner:hover .dots 
    { 
     display:block; 
    } 

    .banner .dots li 
    { 
     border: 2px solid #fff; 
     border-radius: 6px; 
     cursor: pointer; 
     display: inline-block; 
     height: 10px; 
     margin: 0 4px; 
     opacity: .4; 
     text-indent: -999em; 
     -webkit-transition: background .5s, opacity .5s; 
     -moz-transition: background .5s, opacity .5s; 
     transition: background .5s, opacity .5s; width: 10px; 
    } 

    .banner .dots li.active 
    { 
     background: #fff; 
     opacity: 1; 
    } 

.arrows .prev { 
    position: relative; 
    top: -136px; 
} 
.arrows .next { 
    position: absolute; 
    right: 0; 
    top: 109px; 
}

我的jQuery：

$(function() { 
    $('.banner').unslider({ 

     speed: 2000, 
     delay: 2000, 
     fluid: true, 
     dots: true, 
     arrows: true, 
     pause: true 


    }); 
});

來源

2014-03-25 OzzC

問題你面對的是你的CSS代碼沒有adressing的<一>因爲他們有不同的類名。有兩個選項：

＃1 - 切換類名在CSS文件：

.unslider-arrow.prev {...} 
.unslider-arrow.next {...}

＃2 - 在<切換班> s到你正在使用CSS文件中的那些：

<a href="#" class="arrow prev"></a> 
<a href="#" class="arrow next"></a>

但是，使用第二個選項的時候，你有你的CSS改變關係：

.arrow.prev {} 
.arrow.next {}

來源

2014-03-25 03:43:22 Robin

感謝您的回答和糾正！但即使進行了這一修正，問題仍然存在，但一切都好了，我真的不知道問題出在哪裏！ – OzzC

我只是自己檢查過，繼承人是jsfiddle：http://jsfiddle.net/zc39D/2/（忽略滑塊不再工作，嘗試了一些東西） - 左和右定位正確，但似乎你的庫正在混合的東西.. – Robin

謝謝你，它的作品！我沒有爲.unslider-arrow {}放置代碼。 – OzzC

請檢查我的unslider.com html文件示例：

<!-- 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 15:11:57 Denzelq

我的箭頭與unslider jQuery插件的位置有問題

回答

相關問題