|
<< Click to Display Table of Contents >> jQuery - Carrocel estilo jw.org |
  
|
|
<< Click to Display Table of Contents >> jQuery - Carrocel estilo jw.org |
|
Tela
aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="teste2.aspx.cs" Inherits="Visual.teste2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#carousel').carouFredSel({
width: '100%',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000,
timeoutDuration: 3000
},
prev: '#prev',
next: '#next',
pagination: {
container: '#pager',
deviation: 1
}
});
atualiza();
});
function atualiza() {
var w = $(window).width();
nova_w = (w - 1140) / 2;
$("#prev").css("width", nova_w);
$("#next").css("width", nova_w);
}
$(window).resize(function () {
atualiza();
});
</script>
<style type="text/css">
#wrapper_slide
{
background-color: #fff;
width: 100%;
height: 347px;
overflow: hidden;
position: absolute;
top: 30px;
left: 0;
}
#carousel img
{
display: block;
float: left;
padding-top: 0px;
}
#prev, #next
{
background-color: rgba(255, 255, 255, 0.7);
display: block;
height: 347px;
width: 46%; /* 46%; fazer em java? */
top: 0;
position: absolute;
-moz-box-shadow: inset 0 2.5em .5em rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 0 2.5em .5em rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 0px 2.5em .5em rgba(0, 0, 0, 0.4);
}
#prev:hover, #next:hover
{
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
}
#prev
{
left: 0px;
}
#next
{
right: 0px;
}
#pager
{
margin-left: -470px;
position: absolute;
left: 46%;
bottom: 10px;
}
#pager a
{
border: 2px solid #fff;
border-radius: 10px;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px 0 0;
}
#pager a:hover
{
background-color: rgba(255, 255, 255, 0.5);
}
#pager a span
{
display: none;
}
#pager a.selected
{
background-color: #fff;
}
#corpo
{
min-height: 800px;
width: 1140px;
margin: auto;
-moz-box-shadow: 0 0 2.5em .5em rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 2.5em .5em rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 2.5em .5em rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="corpo">
<div id="wrapper_slide">
<div id="carousel">
<img src="/img/img1.jpg" onclick="" alt="" width="1140" height="347" />
<img src="/img/img2.jpg" onclick="" alt="" width="1140" height="347" />
<img src="/img/img3.jpg" onclick="" alt="" width="1140" height="347" />
<img src="/img/img1.jpg" onclick="" alt="" width="1140" height="347" />
<img src="/img/img2.jpg" onclick="" alt="" width="1140" height="347" />
</div>
<a href="#" id="prev" title="Anterior"></a>
<a href="#" id="next" title="Próxima"></a>
<div id="pager"></div>
</div>
</div>
</form>
</body>
</html>
Fontes
http://caroufredsel.dev7studios.com/