Created
April 4, 2014 18:49
-
-
Save alexortiz201/9980875 to your computer and use it in GitHub Desktop.
simple slider w/background img headline and paragraph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function () { | |
var slides = [], | |
liSize = $(window).width(), | |
autoplay = true, | |
step = 1, | |
current = 0, | |
maximum = 0, | |
visible = 1, | |
speed = 200, | |
carousel_height = $('#featured').height(), | |
ulSize = liSize * maximum, | |
divSize = liSize * visible, | |
container = $('#feature'), | |
headlineDiv = $('#feature').find('h1'), | |
leadDiv = $('#feature').find('p.lead'); | |
slides = [ | |
{ | |
'url': '/assets/img/carousel_Imgs/rallybot-color.png', | |
'headline': 'Supercharge Your Content Calendar', | |
'lead' : 'You need to send a dozen Tweets, 3 Facebook posts, 8 LinkedIn Updates, write a blog post and send your email newsletter? Our content marketing platform can help.' | |
}, | |
{ | |
'url': '/assets/img/carousel_Imgs/kids-color.png', | |
'headline': 'Make Your Organization More Social', | |
'lead' : 'Share ready-to-send social posts with your whole organization via email or mobile and make your colleagues a force multiplier for your content marketing.' | |
}, | |
{ | |
'url': '/assets/img/carousel_Imgs/robots-color.png', | |
'headline': 'Real Technology Means You Go Faster', | |
'lead' : 'Our patented content recommendation engine plus a full suite of publishing, CRM and analytics tools mean you get more done — and look good doing it.' | |
} | |
]; | |
maximum = slides.length; // Here we have 3 slides. | |
liSize = $(window).width() > 1140 ? 1140 : $(window).width(); | |
//////////// | |
function nextimage(autoplay) { | |
$('#feature').fadeOut("slow", function(){ | |
if (current + step > maximum - visible){ | |
current = 0; | |
} else { | |
current++; | |
} | |
//swap bg url and text | |
// background: url('/assets/img/carousel_Imgs/rallybot-color.png') center -80px no-repeat; | |
$(container).css('background', 'url('+ slides[current].url +') center -80px no-repeat'); | |
$(headlineDiv).text(slides[current].headline); | |
$(leadDiv).text(slides[current].lead); | |
//then fade back in | |
$('#feature').fadeIn("slow", showSlide(autoplay)); | |
}); | |
}; | |
//////////// | |
function showSlide(autoplay) { | |
if (autoplay) { | |
setTimeout(function () { | |
nextimage(true); | |
}, 7000); | |
} | |
} | |
//////////// | |
$('#featured .next').on('click',function (e) { | |
if (current + step > maximum - visible){ | |
current = 0; | |
} else { | |
current = current + step; | |
} | |
$('#carouselIndex ul').fadeIn("slow", showSlide()); | |
return false; | |
}); | |
$('#featured .prev').on('click', function (e) { | |
if (current - step < 0){ | |
current = maximum - 1; | |
} else { | |
current = current - step; | |
} | |
$('#carouselIndex ul').fadeIn("slow", showSlide()); | |
return false; | |
}); | |
/*$( window ).on('resize', function() { | |
liSize = $(window).width() > 1140 ? 1140 : $(window).width(); | |
carousel_height = $('#featured').height(); | |
ulSize = liSize * maximum; | |
divSize = liSize * visible; | |
$('#carouselIndex ul').css({"width": ulSize + "px", | |
"left": '-' + (current * liSize) + "px", | |
"position": "absolute" | |
}); | |
$('#carouselIndex').css({"width": divSize + "px", | |
"height": carousel_height + "px", | |
"visibility": "visible", | |
"overflow": "hidden", | |
"max-width": "1140px", | |
"position": "relative" | |
}); | |
$('#featured #carouselIndex li').css({"width": liSize + "px", | |
"left": '-' + (current * liSize) + "px", | |
"position": "absolute" | |
}); | |
});*/ | |
showSlide(autoplay); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment