A Pen by Alberto Cano

Thumbnail
This awesome code was written by albertocanog, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright albertocanog ©
  • HTML
  • CSS
  • JavaScript
    
<div id="slider" class="slideshow">
  <ul>
    <li>
      <div id="expedientes_elevados" class="slide">
        <div id="cabecera_elevados" class="cabecera">
            <label id="label_elevados" class="etiqueta" runat="server">
                <img alt="" src="https://dummyimage.com/32x32/ffffff/000000" class="imgIconoTitulo"/>
                Expedientes elevados a Sareb
            </label>
        </div>
        <div id="cuerpo_elevados" class="cuerpoTicker">
            <div id="haya_ele" class="firstCell">
                <div id="val_ele_hay" class="cellValue">1888</div>
                <div id="nom_ele_hay" class="cellText">Haya</div>
            </div>
            <div id="altamira_ele" class="centerCell">
                <div id="val_ele_alt" class="cellValue">2555</div>
                <div id="nom_ele_alt" class="cellText">Altamira</div>
            </div>
            <div id="servihabitat_ele" class="centerCell">
                <div id="val_ele_ser" class="cellValue">1457</div>
                <div id="nom_ele_ser" class="cellText">Servihabitat</div>
            </div>
            <div id="solvia_ele" class="lastCell">
                <div id="val_ele_sol" class="cellValue">5850</div>
                <div id="nom_ele_sol" class="cellText">Solvia</div>
            </div>
        </div>
    </div>
    </li>
    <li>
      <div id="expedientes_sancionados" class="slide">
        <div id="cabecera_sancionados" class="cabecera">
            <label id="label_sancionados" class="etiqueta">
                <img alt="" src="https://dummyimage.com/32x32/ffffff/000000" class="imgIconoTitulo"/>
                Expedientes sancionados por Sareb
            </label>
        </div>
        <div id="cuerpo_sancionados" class="cuerpoTicker">
            <div id="haya_san" class="firstCell">
                <div id="val_san_hay" class="cellValue">6598</div>
                <div id="nom_san_hay" class="cellText">Haya</div>
            </div>
            <div id="altamira_san" class="centerCell">
                <div id="val_san_alt" class="cellValue">3409</div>
                <div id="nom_san_alt" class="cellText">Altamira</div>
            </div>
            <div id="servihabitat_san" class="centerCell">
                <div id="val_san_ser" class="cellValue">1234</div>
                <div id="nom_san_ser" class="cellText">Servihabitat</div>
            </div>
            <div id="solvia_san" class="lastCell">
                <div id="val_san_sol" class="cellValue">9876</div>
                <div id="nom_san_sol" class="cellText">Solvia</div>
            </div>
        </div>
      </div>
    </li>
    <li>
      <div id="expedientes_cerrados" class="slide">
        <div id="cabecera_cerrados" class="cabecera">
            <label id="label_cerrados" class="etiqueta">
                <img alt="" src="https://dummyimage.com/32x32/ffffff/000000" class="imgIconoTitulo"/>
                Expedientes cerrados por Sareb
            </label>
        </div>
        <div id="cuerpo_cerrados" class="cuerpoTicker">
            <div id="haya_cer" class="firstCell">
                <div id="val_cer_hay" class="cellValue">2764</div>
                <div id="nom_cer_hay" class="cellText">Haya</div>
            </div>
            <div id="altamira_cer" class="centerCell">
                <div id="val_cer_alt" class="cellValue">8752</div>
                <div id="nom_cer_alt" class="cellText">Altamira</div>
            </div>
            <div id="servihabitat_cer" class="centerCell">
                <div id="val_cer_ser" class="cellValue">2642</div>
                <div id="nom_cer_ser" class="cellText">Servihabitat</div>
            </div>
            <div id="solvia_cer" class="lastCell">
                <div id="val_cer_sol" class="cellValue">1853</div>
                <div id="nom_cer" class="cellText">Solvia</div>
            </div>
        </div>
      </div>
    </li>
  </ul>  
</div>



/*Downloaded from https://www.codeseek.co/albertocanog/a-pen-by-alberto-cano-jPGrNK */
    body {
  margin: 0;
  font-family: Aller, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 0px;
  width: 384px;
  height: 185px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 185px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 384px;
  height: 185px;
  text-align: center;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}




 .slideshow {
        ddisplay:none;
        background-color: rgb(0, 143, 145);
        width: 384px;
        height: 185px;
    }
    .slide {
        margin-left: auto;
        margin-right: auto;
    }
    .cabecera {
        padding: 10px;
        padding-top: 20px;
    } /*id=cabecera*/
    .etiqueta {
        color: white;
        font-family: inherit;
        font-size: 20px;
        color: white !important;
        vertical-align: middle;
    } /*id=labelElevados*/
    .cuerpoTicker {
        padding: 10px;
        padding-top: 20px;
        margin-left: auto;
        margin-right: auto;
        color: white;
        max-height: 62px;
        min-height: 100px;
    } /*id=cuerpo*/
    .firstCell {
        float: left;
        width: 80px;
        text-align: center;
        padding: 4px;
        border-right: white 1px solid;
    } /*id=servicer1*/
    .centerCell {
        float: left;
        width: 80px;
        text-align: center;
        padding: 4px;
        border-right: white 1px solid;
    }/*id0servicer2 servicer3*/
    .lastCell {
        text-align: center;
        float: left;
        width: 80px;
        text-align: center;
        padding: 4px;
    }/*id=servicer4*/
    .cellValue {
        font-size: 28px;
    }
    .cellText {
        font-size: 13px;
        color: #68dec6;
        padding-top: 7px;
    }
    .imgIconoTitulo {
        width: 32px;
        text-align: left;
        padding: 5px;
        vertical-align: middle;
    }





/*Downloaded from https://www.codeseek.co/albertocanog/a-pen-by-alberto-cano-jPGrNK */
    jQuery(document).ready(function ($) {

  
    setInterval(function () {
        moveRight();
    }, 10000);
 
  
	var slideCount = $('#slider ul li').length;
	var slideWidth = $('#slider ul li').width();
	var slideHeight = $('#slider ul li').height();
	var sliderUlWidth = slideCount * slideWidth;
	
	$('#slider').css({ width: slideWidth, height: slideHeight });
	
	$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
	
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 1000, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 1000, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

});    


Comments