Skip to content

Instantly share code, notes, and snippets.

@xpac27

xpac27/index.html

Created August 7, 2012 08:50
Show Gist options
  • Save xpac27/3283435 to your computer and use it in GitHub Desktop.
Save xpac27/3283435 to your computer and use it in GitHub Desktop.
Download ZIP
Simple JQuery carousel
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
#spots
{
width: 480px;
position: absolute;
left: 50%;
margin-left: -240px;
margin-top: 20px;
}
.spots
{
width: 480px;
height: 320px;
position: relative;
}
.spot
{
width: 100%;
height: 100%;
position: absolute;
background-position: center center;
}
.spot.flower1
{
background-image:url(http://images.flowers.vg/picture/abflowers2660.jpg);
}
.spot.flower2
{
background-image:url(http://images.flowers.vg/picture/abflowers2363.jpg);
}
.spot.flower3
{
background-image:url(http://images.flowers.vg/picture/rose_red_bloomed_flower.jpg);
}
.infos
{
margin-top: 10px;
text-align: center;
}
.navigation
{
width: 90%;
margin-left: 5%;
margin-top: 10px;
position: relative;
}
.navigation .bullets_holder
{
position: absolute;
left: 50%;
}
.navigation .bullets
{
position: relative;
left: -50%;
}
.navigation .bullets,
.navigation .arrow
{
cursor: pointer;
}
.navigation .bullet_on { background: grey; }
.navigation .arrow_right { float: right; }
.navigation .arrow_left { float: left; }
.spot, .info, .navigation, .preload { display: none; }
</style>
</head>
<body>
<div id="spots">
<div class="spots">
<div class="spot flower1"></div>
<div class="spot flower2"></div>
<div class="spot flower3"></div>
</div>
<div class="infos">
<div class="info">Flower 1, ouaaaa!</div>
<div class="info">Flower 2, very nice…</div>
<div class="info">Flower 3, woooooonderfull!!</div>
</div>
<div class="navigation">
<span class="arrow arrow_right">&gt;&gt;</span>
<span class="arrow arrow_left">&lt;&lt;</span>
<div class="bullets_holder">
<div class="bullets">
<span class="bullet bullet_on">+</span>
<span class="bullet bullet_off">+</span>
<span class="bullet bullet_off">+</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function()
{
var DELAY = 3000;
var spot = $('#spots');
var spots = spot.find('.spot');
var infos = spot.find('.info');
var bullets = spot.find('.bullet');
var spotsHolder = spot.find('.spots');
var navigation = spot.find('.navigation');
var spotTimeout = 0;
var current_spot = 0;
var previous_spot = 0;
var total_spot = spots.length;
spots.eq(0).fadeIn();
infos.eq(0).fadeIn();
navigation.show();
spot.bind('mouseover', cancelSlide);
spot.bind('mouseout', scheduleSlide);
navigation.children('.arrow_right').bind('click', nextSpot);
navigation.children('.arrow_left').bind('click', prevSpot);
bullets.bind('click', function () { goToSpot(bullets.index(this)); })
function scheduleSlide() { spotTimeout = setTimeout(nextSpot, DELAY); }
function cancelSlide() { clearTimeout(spotTimeout); }
function nextSpot() { goToSpot(++ current_spot%total_spot); }
function prevSpot() { goToSpot(-- current_spot%total_spot); }
function goToSpot(spot)
{
cancelSlide();
bullets.eq(spot).toggleClass('bullet_off bullet_on');
bullets.eq(previous_spot).toggleClass('bullet_off bullet_on');
infos.eq(spot).fadeIn('fast');
infos.eq(previous_spot).hide();
spots.eq(spot).show().detach().prependTo(spotsHolder);
spots.eq(previous_spot).fadeOut('fast');
previous_spot = spot;
scheduleSlide();
}
scheduleSlide();
});
</script>
<!-- I know it's awfull but it will change -->
<img src="http://images.flowers.vg/picture/abflowers2660.jpg" class="preload"/>
<img src="http://images.flowers.vg/picture/flowers_pics_3861.jpg" class="preload"/>
<img src="http://images.flowers.vg/picture/rose_red_bloomed_flower.jpg" class="preload"/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment