Blog Borchani Studios

Auto playing featured Content Slider, una divertida forma para mostrar gran cantidad de contenido en una pequeña área. Estaremos usando XHTML / CSS para la construcción y el estilo de widgets. Junto con las librerías jQuery y Coda Slider plugin para los efectos de animación. Este featured Content Slider, posee un contenido principal (grupos), que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay enlaces que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier grupo en particular. Estos vínculos pueden estar formados por hipervínculo de texto, miniatura, etc.

• Diferentes tipos de contenido personalizado en los paneles. Se puede poner lo que queramos en los paneles, pero para que sea más fácil para nosotros mismos, habrá un par de diferentes formatos a respetar. Una imagen de fondo cubriéndolo por completo, pero con una superposición de textos.
• Auto-play. Podemos hacer click en los paneles para saltar a cada grupo especifico, o dejar que las transiciones se produzcan de forma automática.
• Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

Ver demo - Mas informacion y descarga Auto playing featured Content Slider – By css-tricks
Instalacion:

JavaScript:

<script type=“text/javascript” src=“js/jquery-1.2.6.min.js”></script>
    <script type=“text/javascript” src=“js/jquery-easing-1.3.pack.js”></script>
    <script type=“text/javascript” src=“js/jquery-easing-compatibility.1.2.pack.js”></script>
    <script type=“text/javascript” src=“js/coda-slider.1.1.1.pack.js”></script>
    <script type=“text/javascript”>
        var theInt = null;
        var $crosslink, $navthumb;
        var curclicked = 0;
        theInterval = function(cur){
            clearInterval(theInt);
            if( typeof cur != ‘undefined’ )
                curclicked = cur;
            $crosslink.removeClass(“active-thumb”);
            $navthumb.eq(curclicked).parent().addClass(“active-thumb”);
                $(“.stripNav ul li a”).eq(curclicked).trigger(‘click’);
            theInt = setInterval(function(){
                $crosslink.removeClass(“active-thumb”);
                $navthumb.eq(curclicked).parent().addClass(“active-thumb”);
                $(“.stripNav ul li a”).eq(curclicked).trigger(‘click’);
                curclicked++;
                if( 6 == curclicked )
                    curclicked = 0;
            }, 3000);
        };
        $(function(){
            $(“#main-photo-slider”).codaSlider();
            $navthumb = $(“.nav-thumb”);
            $crosslink = $(“.cross-link”);
            $navthumb
            .click(function() {
                var $this = $(this);
                theInterval($this.parent().attr(‘href’).slice(1) – 1);
                return false;
            });
            theInterval();
        });
    </script>

Agregando estilo

CSS:

/*
    SLIDER
*/
.slider-wrap                                { width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul                     { text-align: left; margin: 0 15px 0 30px; }
.stripViewer                                { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel   { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav       { display: none; }
.nav-thumb      { border: 1px solid black; margin-right: 5px; }
#movers-row   { margin: -43px 0 0 62px; }
#movers-row div  { width: 20%; float: left; }
#movers-row div a.cross-link             { float: right; }
.photo-meta-data                            { background: url(images/transpBlack.png); padding: 10px; height: 30px;
                                              margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span          { font-size: 13px; }
.cross-link   { display: block; width: 62px; margin-top: -14px;
                                              position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb             { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

Contenido

HTML:

<div class=”slider-wrap”>
    <div id=”main-photo-slider” class=”csw”>
        <div class=”panelContainer”>
            <div class=”panel” title=”Panel 1″>
                <div class=”wrapper”>
                    <!– REGULAR IMAGE PANEL –>
                    <img src=”images/tempphoto-1.jpg” alt=”temp” />
                    <div class=”photo-meta-data”>
                        Photo Credit: <a href=”http://flickr.com/photos/astrolondon/2396265240/”>Kaustav Bhattacharya</a><br />
                        <span>“Free Tibet” Protest at the Olympic Torch Rally</span>
                    </div>
                </div>
            </div>
            <div class=”panel” title=”Panel 2″>
                <div class=”wrapper”>
                    <!– PANEL CONTENT –>
                </div>
            </div>
            <div class=”panel” title=”Panel 3″>
                <div class=”wrapper”>
                    <!– EXAMPLE OF OTHER PANEL POSSIBILITIES –>
                    <img src=”images/scotch-egg.jpg” alt=”scotch egg” class=”floatLeft”/>
                    <h1>How to Cook a Scotch Egg</h1>
                    <ul>
                        <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
                        <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
                        <li>1/2 cup AP flour</li>
                        <li>1-2 eggs, beaten</li>
                        <li>3/4 cup panko-style bread crumbs</li>
                        <li>Vegetable oil for frying</li>
                    </ul>
                </div>
            </div>
            <div class=”panel” title=”Panel 4″>
                <div class=”wrapper”>
                    <!– PANEL CONTENT –>
                </div>
            </div>
            <div class=”panel” title=”Panel 5″>
                <div class=”wrapper”>
                    <!– PANEL CONTENT –>
                </div>
            </div>
            <div class=”panel” title=”Panel 6″>
                <div class=”wrapper”>
                    <!– PANEL CONTENT –>
                </div>
            </div>
        </div>
    </div>
    <!– TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
          AND THE CLASS=”CROSS-LINK” ARE REQUIRED –>
    <a href=”#1″ class=”cross-link active-thumb”><img src=”images/tempphoto-1thumb.jpg” class=”nav-thumb” alt=”temp-thumb” /></a>
    <div id=”movers-row”>
        <div><a href=”#2″ class=”cross-link”><img src=”images/tempphoto-2thumb.jpg” class=”nav-thumb” alt=”temp-thumb” /></a></div>
        <div><a href=”#3″ class=”cross-link”><img src=”images/tempphoto-3thumb.jpg” class=”nav-thumb” alt=”temp-thumb” /></a></div>
        <div><a href=”#4″ class=”cross-link”><img src=”images/tempphoto-4thumb.jpg” class=”nav-thumb” alt=”temp-thumb” /></a></div>
        <div><a href=”#5″ class=”cross-link”><img src=”images/tempphoto-5thumb.jpg” class=”nav-thumb” alt=”temp-thumb” /></a></div>
        <div><a href=”#6″ class=”cross-link”><img src=”images/tempphoto-6thumb.jpg” class=”nav-thumb” alt=”temp-thumb” /></a></div>
    </div>
</div>

Ver demo – Mas informacion y descarga Auto playing featured Content Slider – By css-tricks