Unslider圓點和箭頭

我在SharePoint網站上使用了Unslider image slider，我遇到了點和箭頭問題。在這一點上，我看到小方塊充當「點」，兩個文本箭頭出現在彼此的頂部（但是充當箭頭應該）。Unslider圓點和箭頭

我真的需要放置箭頭圖像的文本箭頭，箭頭圖像彼此相鄰並按照箭頭現在的功能運行。（將方塊改爲點也會有幫助，但不是必需的。）

有人可以幫忙嗎？這不是我的專業領域和我有問題。以下是我使用的CSS：

dots { 

} 
.dots LI { 
BORDER-BOTTOM: #101 2px solid; BORDER-LEFT: #101 2px solid; TEXT-INDENT: -999em; MARGIN: 0px 4px; WIDTH: 10px; DISPLAY: inline; HEIGHT: 100px; BORDER-TOP: #101 2px solid; CURSOR: pointer; BORDER-RIGHT: #101 2px solid; opacity: .4; border-radius: 100%; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s 
} 
.dots LI.active { 
BACKGROUND: #101; opacity: 1 
} 
.arrows { 
POSITION: absolute; TEXT-ALIGN: right; BOTTOM: 16px; DISPLAY: inline; HEIGHT: 50px; FONT-SIZE: 11pt; RIGHT: 300px; FONT-WEIGHT: bold; LEFT: 10px 
} 
A IMG { 
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px 
}

非常感謝！

來源

2014-02-28 TAD

請詢問箭頭的URL https://github.com/idiot/unslider/issues/39 –

嗨嘗試的CSS包含在此文件

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

    <head> 
    <title>Unslider.com arrow 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><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
      <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
      <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
      <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></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:49:41 Denzelq

Unslider圓點和箭頭

回答

相關問題