Javascript-форум - Карусель картинок

barbosss,
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <style type="text/css">
      *,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
   body{margin:0;}
   #gkBottom1.bottom2-fullwidth,.bottom4-fullwidth #gkBottom4 .content{max-width:100%;padding:0!important;width:100%;}

.gkNspPM-JomSocialPhotos{/* overflow:hidden; */}
.gkNspPM-JomSocialPhotos > div{background:#152136;line-height:1;margin:0;position:relative;}
.gkNspPM-JomSocialPhotos figure{display:inline-block;position:relative;left:0;}

  .gkNspPM-JomSocialPhotos[data-cols="6"] figure{max-width:16.666666%;}
  .gkNspPM-JomSocialPhotos[data-cols="7"] figure{max-width:14.285714%;}
  .gkNspPM-JomSocialPhotos[data-cols="8"] figure{max-width:12.5%;}
  .gkNspPM-JomSocialPhotos figcaption{background:rgba(12,19,31,0.6);height:100%;opacity:0;padding:60px 50px;position:absolute;text-align:left;top:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;width:100%;z-index:3;}
  .gkNspPM-JomSocialPhotos figure:hover figcaption{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
  .gkNspPM-JomSocialPhotos figure img{display:block;opacity:0.5;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-ms-transition:all .4s ease-out;-o-transition:all .4s ease-out;transition:all .4s ease-out;}
  .gkNspPM-JomSocialPhotos figure img.hide{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);}
  .gkNspPM-JomSocialPhotos figcaption small{color:#fff;display:block;font-size:14px;font-weight:700;margin:0 0 20px 0;opacity:0;position:relative;text-transform:uppercase;top:35px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-transition-delay:.15s;-moz-transition-delay:.15s;-ms-transition-delay:.15s;-o-transition-delay:.15s;transition-delay:.15s;}
  .gkNspPM-JomSocialPhotos figure:hover figcaption small{opacity:1;top:0;}.gkNspPM-JomSocialPhotos figcaption p{color:#b7c0ce;font-size:12px;height:32px;line-height:16px;margin:0 0 10px 0;overflow:hidden;opacity:0;position:relative;text-overflow:ellipsis;top:25px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-ms-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;}
  .gkNspPM-JomSocialPhotos figure:hover figcaption p{opacity:1;top:0;}.gkNspPM-JomSocialPhotos figcaption a{opacity:0;position:relative;top:20px;}.gkNspPM-JomSocialPhotos figcaption a:active,.gkNspPM-JomSocialPhotos figcaption a:focus,.gkNspPM-JomSocialPhotos figcaption a:hover{color:#fff;}
  .gkNspPM-JomSocialPhotos figure:hover figcaption a{opacity:1;top:0;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-transition-delay:.35s;-moz-transition-delay:.35s;-ms-transition-delay:.35s;-o-transition-delay:.35s;transition-delay:.35s}

figure{
  margin-left: 40px;
}

.content{
   width: 100%;
   overflow: hidden;
}


  </style>

<title> by barbosss</title>
</head>

<body>
  <section id="gkBottom4" class="gkSingleModule">
<div class="box nomobile gkmod-1">
<div class="content gkPage">
<div class="gkNspPM gkNspPM-JomSocialPhotos" data-cols="4">
<div style="width: 3000px">
<figure style="width: 310px; "><img src="https://demo.gavick.com/joomla25/university/modules/mod_news_pro_gk5/cache/photos.983.2.1779fd18b7aa0803d05cb12ansp-777.jpg" alt="The Young Coaches Programme (YCP) is set to expand to include a Tennis Leaders course."><figcaption><small>Mildred Wright</small><p>The Young Coaches Programme (YCP) is set to expand to include a Tennis Leaders course.</p>
<a href="/joomla25/university/index.php/jomsocial/983-mildred-wright/photos/photo?albumid=2&amp;photoid=2">Read more</a></figcaption></figure>
<figure style="width: 310px;"><img src="https://demo.gavick.com/joomla25/university/modules/mod_news_pro_gk5/cache/photos.985.4.b755aa7d966f9f27ab66c1censp-777.jpg" alt="I just finished my first yoga class, it was so nice to take my mind off all the stresses, to stretch, to breathe &amp; just to relax…"><figcaption><small>Peyton Douglas</small><p>I just finished my first yoga class, it was so nice to take my mind off all the stresses, to stretch, to breathe &amp; just to relax…</p><a href="/joomla25/university/index.php/jomsocial/985-peyton-douglas/photos/photo?albumid=4&amp;photoid=4">Read more</a></figcaption></figure>
<figure style="width: 310px;"><img src="https://demo.gavick.com/joomla25/university/modules/mod_news_pro_gk5/cache/photos.987.6.2107961df4c897e30605e10dnsp-777.jpg" alt="What an incredible start to the 2014 year with a massive win for the men's team against league leaders Oxford University!"><figcaption><small>Laurie Lee</small><p>What an incredible start to the 2014 year with a massive win for the men's team against league leaders Oxford University!</p><a href="/joomla25/university/index.php/jomsocial/987-laurie-lee/photos/photo?albumid=6&amp;photoid=6">Read more</a></figcaption></figure>
<figure style="width: 310px;"><img src="https://demo.gavick.com/joomla25/university/modules/mod_news_pro_gk5/cache/photos.989.8.22f0660b82a7ac0bef916418nsp-777.jpg" alt="My first attempt at using a GoPro Hero 3+ camera!"><figcaption><small>Bonnie Marshall</small><p>My first attempt at using a GoPro Hero 3+ camera!</p><a href="/joomla25/university/index.php/jomsocial/989-bonnie-marshall/photos/photo?albumid=8&amp;photoid=8">Read more</a></figcaption></figure>
<figure style="width: 310px;"><img src="https://demo.gavick.com/joomla25/university/modules/mod_news_pro_gk5/cache/photos.988.7.5ede436281953a76ab505c12nsp-777.jpg" alt="Is anyone going to the baseball game?"><figcaption><small>Leo Barnes</small><p>Is anyone going to the baseball game?</p><a href="/joomla25/university/index.php/jomsocial/988-leo-barnes/photos/photo?albumid=7&amp;photoid=7">Read more</a></figcaption></figure>
<figure style="width: 310px;"><img src="https://demo.gavick.com/joomla25/university/modules/mod_news_pro_gk5/cache/photos.986.5.8e25e4f391bde884ffab5312nsp-777.jpg" alt="Tickets for Roots Picnic 2014 are now available on a special Early Bird Pre-Sale basis as of right now!"><figcaption><small>Milton Hudson</small><p>Tickets for Roots Picnic 2014 are now available on a special Early Bird Pre-Sale basis as of right now!</p><a href="/joomla25/university/index.php/jomsocial/986-milton-hudson/photos/photo?albumid=5&amp;photoid=5">Read more</a></figcaption></figure>
</div></div></div></div>
</section>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
    function go() {
        var el = $('figure:first'), w = 310+40;
        el.delay(3000).animate({
            marginLeft: -w
        }, 2000, function () {
            $(this).appendTo($('.gkNspPM > div'))
            .css({
                marginLeft: '40px'
            });
            go()
        })
    }
    go()
})
  </script>


</body>

</html>