michael2
9/11/2017 - 12:23 AM

Carousel - clients can update, can add links. Create a table with as many rows as icons, name table with class="carousel". example: http://w

Carousel - clients can update, can add links. Create a table with as many rows as icons, name table with class="carousel". example: http://www.boostermag.com/

carousel-4customers.js
content_copyfile_download
<script>

$(function() {  
  $('table.carousel').wrap('<div class="carouselWrap" />');
  $(".carousel tr").clone().insertAfter(".carousel tr");
  });

</script>
carousel-4customers.html
content_copyfile_download
<table class="carousel" border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td>IMGHERE</td>
<td>IMGHERE</td>
<td>IMGHERE</td>
<td>IMGHERE</td>
<td>IMGHERE</td>
<td>IMGHERE</td>
</tr>
</tbody>
</table>
carousel-4customers.css
content_copyfile_download
/* ---------------------------------- */
/* ----------- carousel CSS --------- */
/* ---------------------------------- */

.carouselWrap {
  overflow: hidden;
  width: 100% !important;
  position: relative;
  margin: 20px auto;
  height: 60px; /*must set height*/
  width: 100%;
}

.carousel img {
  max-width: none; 
  margin: 0 15px;
}

.carousel img {
  opacity: 0.5;
}
.carousel img:hover {
  opacity: 1;
}

.carousel tr {
  position: absolute;
  top: 0;
  left: 0;
}

.carousel tr:first-child {
  -webkit-animation: carousel 60s linear infinite;
          animation: carousel 60s linear infinite;
}
.carousel tr:last-child {
  -webkit-animation: carouseltwo 60s linear infinite;
          animation: carouseltwo 60s linear infinite;
}

@-webkit-keyframes carousel {
  0% { 
            -webkit-transform: translatex(0%); 
  }
  100% { 
            -webkit-transform: translatex(-100%); 
  }
}

@keyframes carousel {
  0% { 
            transform: translatex(0%) 
  }
  100% {  
            transform: translatex(-100%)
  }
}

@-webkit-keyframes carouseltwo {
  0% { 
            -webkit-transform: translatex(100%); 
  }
  100% { 
            -webkit-transform: translatex(0%); 
  }
}

@keyframes carouseltwo {
  0% { 
           transform: translatex(100%); 
  }
  100% { 
           transform: translatex(0%);
  }
}