Skip to content

Instantly share code, notes, and snippets.

@rickycheers
Created January 19, 2012 19:06
Show Gist options
  • Save rickycheers/1641866 to your computer and use it in GitHub Desktop.
Save rickycheers/1641866 to your computer and use it in GitHub Desktop.
A very lightweight "Show/Hide" carousel in jQuery
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="showhide.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Show Hide Snippet</title>
</head>
<body>
<div id="showhide_container">
<div class="showhide_element">Element #1</div>
<div class="showhide_element">Element #2</div>
<div class="showhide_element">Element #3</div>
</div>
</body>
</html>
(function($){
$(document).ready(function(){
$('.showhide_element').hide();
$('.showhide_element::first').show();
var elements = $('.showhide_element'),
elements_length = elements.length,
visible_element_index = 0,
visible_element = $(elements[visible_element_index]),
isStopped = false;
var showhide = function() {
visible_element.hide('slow');
visible_element_index += 1;
visible_element_index = visible_element_index == elements_length ? 0 : visible_element_index;
visible_element = $(elements[visible_element_index]).show('slow');
};
var startLoop = function() {
console.info('start');
interval = setInterval(showhide, 6000);
};
var stopLoop = function() {
console.info('stop');
clearInterval(interval);
};
if($('showhide_element')){
var interval = setInterval(showhide, 6000);
$('#showhide_container').hover(stopLoop, startLoop);
}
});
})($);
body{ margin:0; padding:0; width:100%; height: 100%}
#showhide_container{
width: 99.9%;
height: 300px;
border: 1px solid #dbdbdb;
border-radius: 8px;
background: #eaeaea;
overflow: hidden;
}
.showhide_element{
font-family: "Helvetica Neue" Arial, Helvetica, sans-serif;
width: 100%;
height: 300px;
float: left;
text-align: center;
font-size: 50px;
margin-top: 100px;
text-shadow: 0 1px 1px #fcfcfc;
}
@demonio
Copy link

demonio commented Dec 22, 2022

Thanks for the JS, I have learned how to do this in the simplest way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment