私が示唆しようとしているスライダー/カルーセルはこれです：http：//www.paulwelsh.info/jquery-plugins/hero-carousel/
これは私のHTML、CSS、Javascriptです。
問題：
画像はそれ自体ではスクロールしません（存在するボタンも機能しません。「前へ」と「次へ」というリンクだけで、そこには必要ありません。
I want custom .png's that should be clickable..画像は「スライド」していません。
.cssファイルを見ると、自分で実装できるコードを見た
I tried to add buttons for next & prev, which failed.ので、何を入れるべきかわからないことがわかり.hero-something-next thingy,ますが、その中には.slideshow-nextと書かれており、何か違う（名前に関して）、私はそれが代わりに何を言うべきかわからない。.jsファイルの先頭には、スライドに「前へ」と「次へ」のリンクを入れ続ける行もありますが、これは不要です。画像を切り替える矢印にしたいだけです。
その「イージング」の部分が何であるか、「パイ」の部分が何であるか、そしてそれが必要な場合でも、なぜ私がcssにそれを持っているのかわかりません。経験して、シンプルにしてください！）
現在の様子のリンク：imgur.com/e0lh9
フィドルjsfiddle.net/P2YqR/2
HTML
<div class="hero">
<div class="hero-carousel">
<article>
<img src="images/deadmau5/slide1.jpg" />
</article>
<article>
<img src="images/deadmau5/slide2.jpg" />
</article>
<article>
<img src="images/deadmau5/slide3.jpg" />
</article>
<article>
<img src="images/deadmau5/slide4.jpg" />
</article>
</div>
</div>
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
CSS
.hero {
width: 1366px;
height: 340px; position:absolute;top:270px;
overflow: hidden;
margin-bottom: 48px;margin: 0 auto; border-top:9px solid rgba(51, 51, 51, .30);border-bottom: 9px solid rgba(51, 51, 51, .30); padding: 0 0 12px 0; }
.hero-carousel article {
width: 960px;
margin: 0 auto;
height: 470px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
border-style:solid;border-width:6px;color:#000; position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
a.hero-carousel_next{ WHAT HERE? <----
background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
display: inline-block;
width: 59px; /*width of your img*/
height: 59px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
}
.hero-carousel-nav_prev{ SAME HERE <---?
background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
display: inline-block;
width: 59px; /*width of your img*/
height: 59px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
}
Javascript
jQuery.fn.heroCarousel = function (a) {
a = jQuery.extend({
animationSpeed: 1000,
navigation: true,
easing: "",
timeout: 5000,
pause: true,
pauseOnNavHover: true,
prevText: "Previous",
nextText: "Next",
css3pieFix: false,
currentClass: "current",
onLoad: function () {},
onStart: function () {},
onComplete: function () {}
}, a);
if (jQuery.browser.msie && parseFloat(jQuery.browser.version) < 7) {
a.animationSpeed = 0
}
return this.each(function () {
var k = jQuery(this),
b = k.children();
currentItem = 1;
childWidth = b.width();
childHeight = b.height();
if (b.length > 2) {
b.each(function (m) {
if (a.itemClass) {
jQuery(this).addClass(a.itemClass)
}
});
b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));
var d = Math.round(childWidth * k.children().length),
l = "-" + Math.round(childWidth + Math.round(childWidth / 2)) + "px";
k.addClass("hero-carousel-container").css({
position: "relative",
overflow: "hidden",
left: "50%",
top: 0,
"margin-left": l,
height: childHeight,
width: d
});
k.before('<ul class="hero-carousel-nav"><li class="prev"><a href="#">' + a.prevText + '</a></li><li class="next"><a href="#">' + a.nextText + "</a></li></ul>");
var e = k.prev(".hero-carousel-nav"),
h;
if (a.timeout > 0) {
var j = false;
if (a.pause) {
k.hover(function () {
j = true
}, function () {
j = false
})
}
if (a.pauseOnNavHover) {
e.hover(function () {
j = true
}, function () {
j = false
})
}
function c() {
if (!j) {
e.find(".next a").trigger("click")
}
}
h = window.setInterval(c, a.timeout)
}
e.find("a").data("disabled", false).click(function (p) {
p.preventDefault();
var m = jQuery(this),
n = m.parent().hasClass("prev"),
o = k.children();
if (m.data("disabled") === false) {
a.onStart(k, e, o.eq(currentItem), a);
if (n) {
f(o.filter(":last"), "previous")
} else {
f(o.filter(":first"), "next")
}
m.data("disabled", true);
setTimeout(function () {
m.data("disabled", false)
}, a.animationSpeed + 200);
if (a.timeout > 0) {
window.clearInterval(h);
h = window.setInterval(c, a.timeout)
}
}
});
function f(m, q) {
var o = parseFloat(k.position().left),
n = parseFloat(k.css("margin-left"));
if (q === "previous") {
m.before(m.clone().addClass("carousel-clone"));
k.prepend(m);
var p = Math.round(n - childWidth);
var r = "+="
} else {
m.after(m.clone().addClass("carousel-clone"));
k.append(m);
var p = l;
var r = "-="
}
if (a.css3pieFix) {
g(jQuery(".carousel-clone"))
}
k.css({
left: o,
width: Math.round(d + childWidth),
"margin-left": p
}).animate({
left: r + childWidth
}, a.animationSpeed, a.easing, function () {
k.css({
left: "50%",
width: d,
"margin-left": n
});
jQuery(".carousel-clone").remove();
i()
})
}
function g(n) {
var m = n.attr("_pieId");
if (m) {
n.attr("_pieId", m + "_cloned")
}
n.find("*[_pieId]").each(function (o, p) {
var q = $(p).attr("_pieId");
$(p).attr("_pieId", q + "_cloned")
})
}
function i() {
var m = k.children();
m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);
a.onComplete(k, k.prev(".hero-carousel-nav"), m.eq(currentItem), a)
}
if (jQuery.browser.msie) {
e.find("a").attr("hideFocus", "true")
}
a.onLoad(k, e, k.children().eq(currentItem), a)
}
})
};
そして、答えを提供するときは、それが機能することを確認して応答するまで、数分待ってください。
結果は次のようになります：http ：//www.deadmau5.com
アップデート
.hero-carousel-nav li.next a {
background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
display: inline-block;
width: 100px; /*width of your img*/
height: 120px; /*height of your img*/
font-size: 0px;
right: -15px; /*this is better than 1px*/
bottom: 90px;
}
.hero-carousel-nav li.prev a {
background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
display: inline-block;
width: 100px; /*width of your img*/
height: 120px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
left: -50px;
bottom: 90px;
}
更新2
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: -50px;
right: auto;
bottom: 100px;
}
.hero-carousel-nav li.next {
right: -30px;
left: auto;
bottom: 100px;
}
.hero-carousel-nav li a {
background: none repeat scroll 0 0 #D21034;
color: #FFFFFF;
display: block;
float: left;
}
.hero-carousel-nav li.next a {
background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
display: inline-block;
width: 115px; /*width of your img*/
height: 100px; /*height of your img*/
font-size: 0px;
right: -15px; /*this is better than 1px*/
bottom: 100px;
overflow:hidden;
}
.hero-carousel-nav li.prev a {
background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
display: inline-block;
width: 115px; /*width of your img*/
height: 100px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
left: -50px;
bottom: 100px;
overflow:hidden;
}
