Home/ Questions/Q 8971139
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:53:12+00:00

The slider/carousel I’m trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/ This is my HTML, CSS

  • 0

The slider/carousel I’m trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/

This is my HTML, CSS & Javascript.

Problems:

  1. Images do not scroll by themselves (the button’s that exist don’t work either, justa link that says “prev & “next”, that I don’t even want there. I want custom .png's that should be clickable..

  2. The images aren’t “sliding”.

  3. If you look in the .css file, you’ll
    see I tried to add buttons for next & prev, which failed. Not sure what to put as .hero-something-next thingy, I saw a piece of code that I could implent by myself, but it says .slideshow-next in that one, and I know I have to have something different (name-wise), I just don’t know what it should say instead.

  4. There’s also a line in the beginning of the .js file that keeps putting
    “Prev” & “Next” links in the slide, which I don’t want. I just want
    the arrows to be the ones switching images.

  5. I’m not sure what that “easing” part is, nor the “pie” thingy, and why I have it in my css, if it’s even
    necessary.. (Had webdesign class for like a month, don’t have that much experience, keep it simple!)

Link of what it currently looks like: imgur.com/e0lh9

Fiddle 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)
        }
    })
};

And please, when providing answers, hold like a few minutes ’til I respond with confirmation that it works!

Result should be similar to that of: http://www.deadmau5.com

UPDATE

.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;               
}

UPDATE 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;

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Slightly updated your fiddle. See full result here http://jsfiddle.net/johnsmith123/P2YqR/11/

    First added jsfiddle and easyng lib (see in resources section on fiddle)
    then moved

    $(document).ready(function(){
    $('.hero-carousel').heroCarousel({
        easing: 'easeOutExpo',
        css3pieFix: true
    });
});

    to script setion.

    Update

    Images: http://jsfiddle.net/johnsmith123/P2YqR/11/

    CSS:

    .hero-carousel-nav li.prev {
    left: 48px;
    right: auto;
}

.hero-carousel-nav li a {
    background: none repeat scroll 0 0 #D21034;
    border: medium none;
    border-radius: 20px 20px 20px 20px;
    color: #FFFFFF;
    display: block;
    float: left;
    outline: medium none;
    padding: 5px 20px;
}


.hero-carousel-nav li.next a{
background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/css/../images/large-arrow-right.png') no-repeat;
display: inline-block;
width: 59px;        /*width of your img*/
height: 89px;      /*height of your img*/
font-size: 0px;    /*this is better than 1px*/
  }


.hero-carousel-nav li.prev a{
    background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/css/../images/large-arrow-left.png')    no-repeat;
    display: inline-block;
    width: 59px;        /*width of your img*/
    height: 89px;      /*height of your img*/
    font-size: 0px;    /*this is better than 1px*/
}
    • 0