Codigo


Hace ya algunos años personal de Microsoft desarrollo la interfaz Modern UI (Metro), en las siguientes lineas se puede ver una emulacion que se asemeja a su funcionamiento utilizando el plugin de JQuery carouFredSel.
// llamamos los javascript
...
type="text/javascript" language="javascript" src="js/jquery-1.8.2.min.js">
type="text/javascript" language="javascript" src="js/jquery.carouFredSel-6.2.0-packed.js">
...
            
// se le da estilo a los carruseles
...
.html_carousel {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    position: relative;
  }
  .html_carousel img {
    width:350px;
    height:400px;
  }
  .html_carousel div.slide {
    width: 350px;
    height: 400px;
    position: relative;
  }
  .html_carousel div.slide div {
    background-color: rgb(0, 104, 208);
    background-color: rgba(0, 104, 208, 1);
    width:350px;
    display: none;
    position: absolute;
    bottom: 0;
  }
  .html_carousel div.slide p {
    color: white;
    padding: 20px 20px 20px 20px;
    margin: 0;
  }
  .html_carousel2 {
    position:absolute;
    left:350px; 
    top:0px; 
    width:350px; 
  }
  .html_carousel2 img {
    width:350px;
    height:400px;
  }
  .html_carousel2 div.slide {
    width: 350px;
    height: 400px;
    position: relative;
  }
  .html_carousel2 div.slide div {
    background-color: rgb(0, 146, 168);
    background-color: rgba(0, 146, 168, 1);
    width:350px;
    display: none;
    position: absolute;
    top:0;
  }
  .html_carousel2 div.slide p {
    color: white;
    padding: 20px 20px 20px 20px;
    margin: 0;
  }
  .html_carousel3 {
    position:absolute;
    left:700px;
    top:248px; 
    width:298px;
  }
  .html_carousel3 div.slide {
    width: 298px;
    height: 482px;
    position: relative;
  }
  .html_carousel3 div.slide div {
    background-color: rgb(0, 121, 239);
    background-color: rgba(0, 121, 239, 1);
    width:300px;
    display: none;
    position: absolute;
    top:0px;
    height:482px;
  }
  .html_carousel3 div.slide p {
    color: white;
    padding: 20px 20px 20px 20px;
    margin: 0;
  }
  .html_carousel4 {
    top:0px;
    left:420px;
    position: relative;
  }
  .html_carousel4 img {
    width:280px;
    height:200px;
  }
  .html_carousel4 div.slide {
    width: 280px;
    height: 200px;
    position: relative;
  }
  .html_carousel4 div.slide div {
    background-color: rgb(0, 104, 208);
    background-color: rgba(0, 104, 208, 1);
    width:280px;
    display: none;
    position: absolute;
    bottom: 0;
  }
  .html_carousel4 div.slide p {
    color: white;
    padding: 20px 20px 20px 20px;
    margin: 0;
  }
  ...
            
// dentro del head asignamos los parametros para cada carusel
...
$(function() {
    $("#car1 .slide div").show();
    $("#car1").carouFredSel({
        items     : 1,
        direction : "up",
        auto : {
        duration  : 1000,
        pauseOnHover: true
      }
    });
    $("#car2 .slide div").show();
    $("#car2").carouFredSel({
        items     : 1,
        direction : "down",
        auto : {
        duration  : 1500,
        pauseOnHover: true
      }
    });
    $("#car3 .slide div").show();
    $("#car3").carouFredSel({
        items     : 1,
        direction : "up",
        auto : {
        duration  : 2000,
        pauseOnHover: true
      }
    });
    $("#car4 .slide div").show();
    $("#car4").carouFredSel({
        items     : 1,
        scroll    : {
          fx      : "crossfade",
          duration    : 2500
        },
        auto : {
        pauseOnHover: true
      }
    });
  });
...
            
// mostramos cada carrusel ya dentro del body
...
div class="html_carousel">
        div id="car1">
              div class="slide">
                img src="img/al_dia/47.jpg"/>
                div>
                  p>Nibh ultricies vehicula ut id elit./p>
                div>
              /div>
              div class="slide">
                img src="img/al_dia/46.jpg"/>
                div>
                  p>Egestas eget quam. Donec id elit non mi porta gravida./p>
                /dv>
              /div>
      /div>
        div class="clearfix">/div>
    /div>
            
     div class="html_carousel2">
        div id="car2">
                div class="slide">
                img src="img/al_dia/42.jpg"/>
                div>
                  p>Nibh ultricies vehicula ut id elit./p>
                /div>
              /div>
                div class="slide">
                img src="img/al_dia/41.jpg"/>
                div>
                  p>Egestas eget quam. Donec id./p>
                /div>
              /div>
        /div>
        div class="clearfix">/div>
    /div>
    
    div style="position:absolute;left:750px; top:100px;">
      carrusel con info del clima
    /div>
    
    div style="position:absolute;left:100px; top:500px;">
      carrusel con mas info
    /div>
                    
    div class="html_carousel3">
        div id="car3">
            div class="slide">
                div>
                    p>
                      div>Santoral/div>
                        div> IsidroBR> LabradorBR> TorcuatoBR> TesifonteBR> Cecilio/div>
                    /p>
                /div>
            /div>
            div class="slide">
                div>
                    p>
                      div>Aniversario/div>
                        div>Pierre Curie, físico francés.(1859)/div>
                    /p>
                /div>
            /div>
        /div>
        div class="clearfix">/div>
    /div>
    
    div class="html_carousel4">
        div id="car4">
            div class="slide">img src="img/1.jpg"/>/div>
            div class="slide">img src="img/2.jpg"/>/div>
            div class="slide">img src="img/3.jpg"/>/div>
        /div>
        div class="clearfix">/div>
    /div>
...
            

Quedando algo asi...

Manuel Ortega © 2019 | Contacto