Tipo eu to com um script js chamado Slideshow que me passaram num grupo que tava a algum tempo:
var infoimgs = ["title", "desc", "img"]
infoimgs["title"][0] = "Servidor Survival"
infoimgs["desc"][0] = "---"
infoimgs["img"][0] = "slide0.png"
infoimgs["title"][1] = "Servidor FillPVP"
infoimgs["desc"][1] = "---"
infoimgs["img"][1] = "slide1.png"
infoimgs["title"][2] = "SkyWars"
infoimgs["desc"][2] = "---"
infoimgs["img"][2] = "slide2.png"
infoimgs["title"][3] = "Servidor KitPvP"
infoimgs["desc"][3] = "---"
infoimgs["img"][3] = "slide3.png"
infoimgs["title"][4] = "Hunger Games"
infoimgs["desc"][4] = "---"
infoimgs["img"][4] = "slide4.png"
var totaldebanners = 2
var viewimg = 0
$(document).ready(function(){
//--------//
var time;
var hideNave
$('.navslides').css({
"opacity": "0.0"
})
$('.slideshow-div').mouseover(function(){
$('.navslides').animate({
"opacity": "1.0"
}, 500)
clearTimeout(hideNav)
})
$('.slideshow-div').mouseleave(function(){
var hideNav = setTimeout(function(){
$('.navslides').animate({
"opacity": "0.0"
}, 500)
}, 500)
})
hideText()
showText(0)
$('.slideshow-div').css({
"background": "url('img/banners/"+infoimgs["img"][0]+"')",
"background-size": "cover"
})
resetTime(1)
$('.navslides-prox').click(function(){
viewimg = proxImage(viewimg+1)
})
$('.navslides-anter').click(function(){
if(viewimg >= 1)
{
viewimg = proxImage(viewimg-1)
}
})
})
function resetTime(imageAtual){
time = setTimeout(function() {
viewimg = proxImage(parseInt(imageAtual))
}, 5000)
}
function proxImage(img)
{
if(img <= totaldebanners)
{
$('.slideshow-div').css({
"background": "url('img/banners/"+infoimgs["img"][img]+"')",
"background-size": "cover"
})
clearTimeout(time)
resetTime(parseInt(img)+1)
hideText()
showText(parseInt(img))
return img
} else {
$('.slideshow-div').css({
"background": "url('img/banners/"+infoimgs["img"][0]+"')",
"background-size": "cover"
})
clearTimeout(time)
resetTime(1)
hideText()
showText(0)
return 0
}
}
function hideText(){
$('.slideshow-title').css({
"width": "0px"
})
$('.slideshow-desc').css({
"width": "0px"
})
$('.slideshow-title p').css({
"opacity": "0.0"
})
$('.slideshow-desc p').css({
"opacity": "0.0"
})
}
function showText(img){
$('.slideshow-title p').html(infoimgs["title"][img])
$('.slideshow-desc p').html(infoimgs["desc"][img])
$('.slideshow-title').animate({
"width": "30%",
})
$('.slideshow-desc').animate({
"width": "40%"
})
$('.slideshow-title p').animate({
"opacity": "1.0"
})
$('.slideshow-desc p').animate({
"opacity": "1.0"
})
}
E o CSS to com o da bootstrap http://fonts.googleapis.com/css?family=Ubuntu