Автоматический слайдер видеокурсов

by Andrey Dobrovoi

HTML

<div class="block">                

<ul id="tips" class="slides">
    <li>
        <h3>Создайте ваш уникальный шаблон Joomla с неповторимым дизайном</h3>
        <a href="http://course.webformyself.com/joomlafree?utm_medium=affiliate&utm_source=dobrovoi"><img src="http://webformyself.com/wp-content/themes/web4my/images/roter/joomla-mini.jpg" /></a>
        <div id="control">
            <a href="http://course.webformyself.com/joomlafree?utm_medium=affiliate&utm_source=dobrovoi" class="button btn9" target="_blank"><i class="dashicons dashicons-welcome-view-site"></i>Подробнее</a>
        </div>
    </li>
    <li>
        <h3>Как создать свой первый профессиональный дизайн сайта с нуля</h3>
        <a href="http://course.webformyself.com/masterwebdesignfree1?utm_medium=affiliate&utm_source=dobrovoi"><img src="http://course.webformyself.com/media/content/web4myself/15-08-14_f148f83_boxcover.png" /></a>
         <div id="control">
             <a href="http://course.webformyself.com/masterwebdesignfree1?utm_medium=affiliate&utm_source=dobrovoi" class="button btn9" target="_blank"><i class="dashicons dashicons-welcome-view-site"></i>Подробнее</a>
         </div>
    </li>
    <li>
        <h3>Бесплатная система обучения создания сайтов на WordPress</h3>
        <a href="http://course.webformyself.com/wordpressfree?utm_medium=affiliate&utm_source=dobrovoi"><img src="http://storage.webformyself.com/promotionalmaterials/free/wordpress/images/boxcover.png" /></a>
        <div id="control">
            <a href="http://course.webformyself.com/wordpressfree?utm_medium=affiliate&utm_source=dobrovoi" class="button btn9" target="_blank"><i class="dashicons dashicons-welcome-view-site"></i>Подробнее</a>
         </div>
    </li>
    <li>
        <h3>Профессиональное создание сайта со своей системой управления контентом</h3>
        <a href="http://course.webformyself.com/cmsfree?utm_medium=affiliate&utm_source=dobrovoi"><img...

CSS

.block {
    margin: 0 auto;
    max-width: 360px;
    border: 1px solid #ccc;
}
.slides {
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.slides h3 {
  padding: 0 0 5px;
  color: #3F7900;
  font: 300 15px/140% 'Exo 2',Tahoma,Verdana,Segoe,sans-serif;
  font-size: 1.2em;
  text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 2px #DDDDDD;
}
.slides img {
   max-width 100%;   
}
#control{margin:20px;text-align:center;}
.button{display:inline-block;padding:8px 20px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#ffffff;text-align:center;text-shadow:0 1px rgba(0, 0, 0, 0.3);font-weight:normal;font-size:14px;cursor:pointer;-khtml-border-radius:3px;}
.button:hover,
.button:visited,
.button:active,
.button:link{outline:medium none;color:#ffffff;text-decoration:none;}
.button span{display:inline-block;margin-right:.4em;vertical-align:middle;font:normal 16px/1'dashicons';-webkit-font-smoothing:antialiased;}
.button i{display:inline-block;margin-right:0.4em;vertical-align:middle;font:16px/1'dashicons';}
.btn9:link{background-color:#1abc9c;}
.btn9:visited{background-color:#1abc9c;}
.btn9:hover{background-color:#81dac9;-webkit-transition:0.5s;-moz-transition:0.5s;-o-transition:0.5s;transition:0.5s;}
.btn9:active{background-color:#17a98c;}

JavaScript

$(function () {
$('#tips > li:not(:first)').hide();
window.intervalReviews = setInterval(function () {
var index = $('#tips > li:visible').index() + 1;
if (!$('#tips > li:eq(' + index + ')').length) {
         index = 0;
}
$('#tips > li').hide().filter(':eq(' + index + ')').fadeIn('slow');
}, 5000);
});