Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Slider

Problems Implenting Hero Carousel Slider

Post a Comment
The slider/carousel I'm trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/ I know that I have to add HTML code for it, which I am unable to due to

Solution 1:

Embed these resources from the sample page that you provided:

<linkrel="stylesheet"media="all"href="jquery.heroCarousel.css"type="text/css" /><scripttype='text/javascript'src='jquery.heroCarousel-1.3.js'></script><scripttype='text/javascript'src='http://code.jquery.com/jquery-1.8.2.js'></script>

Then follow this HTML Structure:

<divclass="hero"><divclass="hero-carousel"><article><imgsrc="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" ></article><article><imgsrc="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" ></article><article><imgsrc="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" ></article><article><imgsrc="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" ></article></div>​

Then add this javascript code to the end of your site:

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

DEMO: http://jsfiddle.net/dCYB7/1/, http://fiddle.jshell.net/dCYB7/1/show/

EDIT:

The entire slider in one HTML+CSS+Javascript collection:

<style>#slider { width:100%; overflow:hidden; height:372px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-bg.png); margin-bottom:25px; }
#slider-container { height:352px; width:950px; margin:auto; padding-top:10px; position:relative; }
#slider-inner { width:10000px; height:352px; position:absolute; top:10px; left:-970px; }
.slide { width:938px; height:340px; border:6px solid #000; float:left; margin-right:20px; position:relative; }

#slider-arrow-left { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-left.png); position:absolute; left:-53px; top:120px; z-index:999; } #slider-arrow-left:hover { background-position:0 -124px; }
#slider-arrow-right { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-right.png); position:absolute; right:-53px; top:120px; z-index:999; } #slider-arrow-right:hover { background-position:0 -124px; }
#slider-fade-left { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png); position:absolute; left:-320px; top:0px; z-index:2; }
#slider-fade-left:hover { opacity:0.92; }
#slider-fade-right { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png); position:absolute; right:-320px; top:0px; z-index:2; }
#slider-fade-right:hover { opacity:0.92; }
#slider-black-left { height:372px; width:1000px; position:absolute; top:0px; left:-1300px; background-color:#0c100f; }
#slider-black-right { height:372px; width:1000px; position:absolute; top:0px; right:-1300px; background-color:#0c100f; }


</style><divid="slider"><divid="slider-container"><divid="slider-inner"><divclass="slide"><atarget="_blank"href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><imgalt="deadmau5 Banner"src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a></div><divclass="slide"><atarget="_blank"href="http://bzz.is/heapmau5"><imgalt="deadmau5 Banner"src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a></div><divclass="slide"><atarget="_blank"href="http://smarturl.it/albumtitlegoeshere"><imgalt="deadmau5 Banner"src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" /></a></div><divclass="slide"><atarget="_blank"href="http://bzz.is/neffmau5"><imgalt="deadmau5 Banner"src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" /></a></div><divclass="slide"><atarget="_blank"href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><imgalt="deadmau5 Banner"src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a></div><divclass="slide"><atarget="_blank"href="http://bzz.is/heapmau5"><imgalt="deadmau5 Banner"src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a></div></div><ahref="#"id="slide-left"><spanid="slider-arrow-left"></span></a><ahref="#"id="slide-right"><spanid="slider-arrow-right"></span></a><ahref="#"id="slide-left-fade"><spanid="slider-fade-left"></span></a><ahref="#"id="slide-right-fade"><spanid="slider-fade-right"></span></a><divid="slider-black-left"></div><divid="slider-black-right"></div><divid="hearts"><ahref="#"id="heart1"><spanclass="heart"></span></a><ahref="#"id="heart2"><spanclass="heart"></span></a><ahref="#"id="heart3"><spanclass="heart"></span></a><ahref="#"id="heart4"><spanclass="heart"></span></a></div></div></div><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><scripttype="text/javascript"src="http://malsup.github.com/chili-1.7.pack.js"></script><scripttype="text/javascript"src="http://malsup.github.com/jquery.cycle.all.js"></script><scripttype="text/javascript"src="http://malsup.github.com/jquery.easing.1.3.js"></script><scripttype="text/javascript">


$(document).ready(function() {
    functionslideLeft(evt) {
                    evt.preventDefault();
                    clearInterval(refreshId);

                    unbindAll();

                    var oldOrb = jQuery.data(document.body, 'activeOrb');

                    var newOrb = oldOrb - 1; if (newOrb < 1) { newOrb = 4; }
                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    $('#slider-inner').animate({
                        left: '+=970'
                    }, 600, 'easeOutQuart', function() {
                        var me = $(this);
                        var p = me.position();
                        if (p.left > -10) { me.css('left', '-3880px'); } 
                        bindAll();
                    });
                }   

                functionslideRight(evt) {
                    evt.preventDefault();
                    clearInterval(refreshId);

                    unbindAll();

                    var oldOrb = jQuery.data(document.body, 'activeOrb');
                    oldOrb = parseInt(oldOrb);

                    var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    $('#slider-inner').animate({
                        left: '-=970'
                    }, 600, 'easeOutQuart', function() {
                        var me = $(this);
                        var p = me.position();
                        if (p.left < -4840) { me.css('left', '-970px'); } 
                        bindAll();
                    });
                }   

                functionslideRight2() {

                    var oldOrb = jQuery.data(document.body, 'activeOrb');

                    var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    $('#slider-inner').animate({
                        left: '-=970'
                    }, 600, 'easeOutQuart', function() {
                        var me = $(this);
                        var p = me.position();
                        if (p.left < -4840) { me.css('left', '-970px'); } 

                    });
                }   

                functionslideTo(evt) {
                    evt.preventDefault();
                    clearInterval(refreshId);

                    unbindAll();

                    var oldOrb = jQuery.data(document.body, 'activeOrb');
                    var newOrb = $(this).attr('id'); newOrb = newOrb.substr(5,6);

                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    varTo;
                    if (newOrb == 1) { To = -970; } if (newOrb == 2) { To = -1940; } if (newOrb == 3) { To = -2910; } if (newOrb == 4) { To = -3880; }

                    $('#slider-inner').animate({
                        left: To
                    }, 600, 'easeOutQuart', function() {
                        bindAll();
                    });
                }   

                functionorbChange(orb) {
                    $('.heart-active', '#hearts').removeClass('heart-active');
                    $('#heart' + orb + ' span').addClass('heart-active');
                }

                functionbindAll() {
                    $('#slide-left').bind('click', slideLeft);  
                    $('#slide-right').bind('click', slideRight);
                    $('#slide-left-fade').bind('click', slideLeft); 
                    $('#slide-right-fade').bind('click', slideRight);
                    $('#hearts a').bind('click', slideTo);
                }

                functionunbindAll() {
                    $('#slide-left').unbind('click', slideLeft);    
                    $('#slide-right').unbind('click', slideRight);
                    $('#slide-left-fade').unbind('click', slideLeft);   
                    $('#slide-right-fade').unbind('click', slideRight);
                    $('#hearts a').unbind('click', slideTo);
                }

                var refreshId = setInterval(function() {
                    slideRight2();
                }, 6000);
                bindAll();
        });




</script>

Live DEMO | CODE

Solution 2:

add width and margin 0 auto in .hero class

.hero {
position: relative;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
width: 960px;
}

Post a Comment for "Problems Implenting Hero Carousel Slider"