I am using the code prepared by #Cybernetic which can be found here (Active Search Bar for images). The code is mainly for searching for images through a search box using jquery. #Cybernetic did an outstanding job with his code and I couldn't post a comment there because I don't have enough points. I wish he can see this posting and answer my question.
What I wanted to ask about is whether we can set the code to hide images when we run it. Because I am using this code with hundreds of relatively large images! So, running it will load all these images at once which is causing the browser to slow down.
So, again, how can we set it to show no images until we start typing in the search box.
Thanks!
Update
<h2>Search for Image</h2>
<style>
.imgContainer{
float:left;
}
img {
width: 1220px !important;
border: 3px;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 40px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
img{
border: 5px solid #33cc33;
}
</style>
<!-- <button type="mybutton">Click Me!</button> -->
<input type="text" id="myinput" name="search" placeholder="search..." style="width:600px; height: 40px; border-radius: 4px; font-size: 18px;"><br><br>
<center>
<div id="images">
<img src="C:\dir..............\image-1.jpg" width=1130></a>
<img src="C:\dir..............\image-2.jpg" width=1130></a>
<img src="C:\dir..............\image-3.jpg" width=1130></a>
<img src="C:\dir..............\image-4.jpg" width=1130></a>
<img src="C:\dir..............\image-5.jpg" width=1130></a>
</div>
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
$("img[alt*=" + val + " i]").show();
}
});
<!-- $("#mybutton").on('click', function() { -->
<!-- var myinput = $('#mytextbox'); -->
<!-- var val = $.trim(myinput.value); -->
<!-- if (val === "") -->
<!-- $('img').show(); -->
<!-- else { -->
<!-- $('img').hide(); -->
<!-- $("img[alt*=" + val + "]").show(); -->
<!-- } -->
<!-- }); -->
</script>
CHANGES:
added regExp check for special chars.
edited result's style.
set images display to none to display only on search.
added hover action to images.
add span to show no result found if search didn't met any images.
$(document).ready(function() {
$("#mybutton").on('click', function() {
var mysrchbox = $("#myinput").val();
mysrchbox = mysrchbox.replace(/[^a-zA-Z ]/g, "")
var val = $.trim(mysrchbox);
if (val === "") {
$('#none').show();
$('img').hide();
} else {
val = val.split(" ").join("\\ ");
if ( $("img[alt*=" + val + " i]").attr('alt') === undefined ) {
$('#none').show();
$('img').hide();
} else {
$('#none').hide();
$('img').hide();
$("img[alt*=" + val + " i]").show();
$("img[alt*=" + val + " i]").css('display', 'inline-flex');
}
}
});
});
body {
background: white !important;
}
#images {
position: relative;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
flex-basis: 33.3%;
width: 100%;
margin: auto;
text-align: center;
}
#images img {
background: white;
position: relative;
margin: auto;
display: none;
object-fit: contain;
height: max-content;
padding: 0.5rem;
text-align: center;
margin: auto;
}
#images img:hover {
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Search for Image</h2>
<input type="button" id="mybutton" value="Search!">
<input type="text" id="myinput" name="search" placeholder="search..." style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>
<div id="images"><span id="none" hidden="true">no result related for your search.</span>
<img src="https://p.kindpng.com/picc/s/108-1082674_bitcoin-png-bitcoin-clipart-transparent-png.png" alt="eBitcoin" width=130>
<img src="https://png.pngitem.com/pimgs/s/692-6924771_blockchain-cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" alt="Ethereum" width=130>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" alt="Ripple" width=130>
<img src="https://i.redd.it/tsmzy49d4adz.jpg" alt="eBitcoin Cash" width=130>
<img src="https://freepikpsd.com/wp-content/uploads/2019/10/cardano-logo-png-5-Transparent-Images.jpg" alt="eCardano" width=130>
<img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" alt="NEM" width=130>
<img src="https://bitkee.com/icons/litecoin-logo.png" alt="LiteCoin" width=130>
<img src="http://bittrust.s3.amazonaws.com/1486429998.png" alt="Stellar Lumens" width=130>
</div>
I do not know how to show the menu above the slide-show images after clicking the hamburger icon. I used z-index and .addClass in order to add the diplay:none property to the #slideshow. This did not work. I do not know what I can do next.
https://jsfiddle.net/ft31scgw/
main.js
<script>
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
function hMenu() {
var menu = document.getElementById("toggle");
if(menu) {
var hide = $("#slideshow").hide();
} else {
var show = $("#slideshow").show();
}
}
</script>
style.css
enter image description here
#media only screen and (max-width: 736px) {
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
button {
text-transform: uppercase;
font-weight: bold;
}
.logo img {
width: 80%;
max-width: 473px;
height: 50px;
}
label{
display: block;
cursor: pointer;
z-index: 10;
}
.menu {
text-align: center;
width: 100%;
display: none;
background: black;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 1;
}
#toggle:checked + .menu {
display: block;
z-index: 10;
}
#slideshow {
z-index: 0;
}
.disappear {
display:none;
z-index: -2;
}
}/* #media min-width 736px */
index.html
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" onclick="hMenu()" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" alt=""></div>
<div><img src="img/image2.jpg" alt=""></div>
<div><img src="img/image3.jpg" alt=""></div>
</div>
</section>
Good to know, that z-index specifies the stack order of siblings elements. In your case <div class="header"> needs z-index greater than <section id="slideshow">. z-index only works on positioned elements, so both of them should have position:relative. I made a working example for you on jsFiddle.
I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.
I have different elements and want to connect them with lines after clicking on them. The problem is that each element can be connected with several other elements, so there are more than one possibilities to combine each element, which means I have to click all of the elements I want to be connected to show the lines between.
For example: when you click #button1 and #button2 a line appears between them. When you click now #button3 a line between #button2 and #button3 would show up in addition to the first line. (The lines are images which should be shown after clicking the buttons).
I couldn't find any solutions where you can trigger an event after clicking two or more elements. Hope somebody can help me!
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>
Try something like this. Remember that you should incluse your js
var firstEl = -1;
$("#button1").on("click",function(){
if (firstEl == -1){
firstEl = 1;
} else {
$("line" + firstEl + "1").show();
console.log("show " + "line" + firstEl + "1");
firstEl = -1;
}
});
$("#button2").on("click",function(){
if (firstEl == -1){
firstEl = 2;
} else {
$("line" + firstEl + "2").show();
console.log("show " + "line" + firstEl + "2");
firstEl = -1;
}
});
$("#button3").on("click",function(){
if (firstEl == -1){
firstEl = 3;
} else {
$("line" + firstEl + "3").show();
console.log("show " + "line" + firstEl + "3");
firstEl = -1;
}
});
$("#button4").on("click",function(){
if (firstEl == -1){
firstEl = 4;
} else {
$("line" + firstEl + "4").show();
console.log("show " + "line" + firstEl + "4");
firstEl = -1;
}
});
#button1{
border:#000000 solid;
width:100px;
float:left;
}
#button2{
border:#000000 solid;
width:100px;
margin-left:300px;}
#button3{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:0px;
float:left;}
#button4{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:300px;
}
#line12 {
margin-left:55px;
margin-top:17.5px;
position:absolute;
visibility:hidden;
}
#line24 {
margin-left: 350px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line14 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line13 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line32 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line12"><img src="img/line12.png"></div>
<div id="line14"><img src="img/line14.png"></div>
<div id="line24"><img src="img/line24.png"></div>
<div id="line13"><img src="img/line13.png"></div>
<div id="line32"><img src="img/line32.png"></div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>
Try using following code :
HTML :
<div id="line12" class="line-image-container">
<img src="img/line12.png">
</div>
<div id="line14" class="line-image-container">
<img src="img/line14.png">
</div>
<div id="line24" class="line-image-container">
<img src="img/line24.png">
</div>
<div id="line13" class="line-image-container">
<img src="img/line13.png">
</div>
<div id="line32" class="line-image-container">
<img src="img/line32.png">
</div>
<div id="button1" data-line-no="1">show lines 1</div>
<div id="button2" data-line-no="2">show lines 2</div>
<div id="button3" data-line-no="3">show lines 3</div>
<div id="button4" data-line-no="4">show lines 4</div>
jQuery :
var i=0;
var line_obj = array();
$('button').on('click', function() {
$('.line-image-container').css('visibility', 'hidden');
if(i<=2) {
var line = $(this).attr('data-line-no');
line_obj.push(line);
i++;
}
if(i == 2) {
$('#line'+line_obj[0]+line_obj[1]).css('visibility', 'visible');
i = 0;
}
});
It would be better if you add your code in jsfiddle.
You could try something like this:
$(function() {
var buttonClicks = [];
$(".test").click(function(e) {
var btnId = $(e.target).attr('id');
// make sure the same button wasnt clicked twice
if (buttonClicks[0] === btnId)
return;
buttonClicks.push(btnId);
if (buttonClicks.length === 2) { // 2 buttons clicked
// put your line drawing logic here
console.log("Show line between " + buttonClicks[0] + " and " + buttonClicks[1]);
buttonClicks = []; // reset button clicks
}
});
});
.test {
cursor: pointer;
}
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div class="test" id="button1">show lines 1</div>
<div class="test" id="button2">show lines 2</div>
<div class="test" id="button3">show lines 3</div>
<div class="test" id="button4">show lines 4</div>
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 little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS & Javascript. The HTML is what I THINK it should look like, which is obviously wrong.
HTML
<div class="what here?">
<ul class="and what here?">
anything here?
<li><img src="images/deadmau5/slide1.jpg" ></li>
<li><img src="images/deadmau5/slide2.jpg" ></li>
<li><img src="images/deadmau5/slide3.jpg" ></li>
<li><img src="images/deadmau5/slide4.jpg" ></li>
</ul>
</div>
CSS
.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}
.hero-carousel article {
width: 980px;
margin: 0 auto;
height: 480px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
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;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #D21034;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #89051C;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
border: none;
outline: none;
}
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.prevText+'</li><li class="next">'+a.nextText+"</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)}})};
Embed these resources from the sample page that you provided:
<link rel="stylesheet" media="all" href="jquery.heroCarousel.css" type="text/css" />
<script type='text/javascript' src='jquery.heroCarousel-1.3.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
Then follow this HTML Structure:
<div class="hero">
<div class="hero-carousel">
<article><img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" >
</article>
<article>
<img src="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>
<div id="slider">
<div id="slider-container">
<div id="slider-inner">
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://smarturl.it/albumtitlegoeshere"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/neffmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
</div>
<span id="slider-arrow-left"></span>
<span id="slider-arrow-right"></span>
<span id="slider-fade-left"></span>
<span id="slider-fade-right"></span>
<div id="slider-black-left"></div>
<div id="slider-black-right"></div>
<div id="hearts">
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function slideLeft(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();
});
}
function slideRight(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();
});
}
function slideRight2() {
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'); }
});
}
function slideTo(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);
var To;
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();
});
}
function orbChange(orb) {
$('.heart-active', '#hearts').removeClass('heart-active');
$('#heart' + orb + ' span').addClass('heart-active');
}
function bindAll() {
$('#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);
}
function unbindAll() {
$('#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
add width and margin 0 auto in .hero class
.hero {
position: relative;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
width: 960px;
}