jQuery - Carrocel estilo jw.org

<< Click to Display Table of Contents >>

Navigation:  jQuery >

jQuery - Carrocel estilo jw.org

Previous pageReturn to chapter overviewNext page

Tela

 

carrocel1

 

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;

            width100%;

            height347px;

            overflowhidden;

            positionabsolute;

            top30px;

            left0;

        }

 

        #carousel img

        {

            displayblock;

            floatleft;

            padding-top0px;

        }

 

        #prev#next

        {

            background-colorrgba(255, 255, 255, 0.7);

            displayblock;

            height347px;

            width46%/* 46%;  fazer em java?  */

            top0;

            positionabsolute;

            -moz-box-shadowinset 0 2.5em .5em rgba(0, 0, 0, 0.4);

            -webkit-box-shadowinset 0 0 2.5em .5em rgba(0, 0, 0, 0.4);

            box-shadowinset 0px 0px 2.5em .5em rgba(0, 0, 0, 0.4);

        }

 

            #prev:hover#next:hover

            {

                background-color#fff;

                background-colorrgba(255, 255, 255, 0.8);

            }

 

        #prev

        {

            left0px;

        }

 

        #next

        {

            right0px;

        }

 

        #pager

        {

            margin-left-470px;

            positionabsolute;

            left46%;

            bottom10px;

        }

 

            #pager a

            {

                border2px solid #fff;

                border-radius10px;

                displayinline-block;

                width10px;

                height10px;

                margin0 5px 0 0;

            }

 

                #pager a:hover

                {

                    background-colorrgba(255, 255, 255, 0.5);

                }

 

                #pager a span

                {

                    displaynone;

                }

 

                #pager a.selected

                {

                    background-color#fff;

                }

 

        #corpo

        {

            min-height800px;

            width1140px;

            marginauto;

            -moz-box-shadow0 0 2.5em .5em rgba(0, 0, 0, 0.4);

            -webkit-box-shadow0 0 2.5em .5em rgba(0, 0, 0, 0.4);

            box-shadow0px 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/