Поочередное переключение input radio
 

Добрый день!
У меня есть слайдер, написанный на CSS без скриптов... все бы хорошо, но слайдер не умеет переключаться самостоятельно, только по клику на lable.
Помогите написать скрипт на jQuery с такими возможностями:
- указание интервала листания слайдов;
- при наведении на слайд листание приостанавливается, убираем мышь и слайдер продолжает листать.

Вот код слайдера:

<div class="index-entry-slider">
            <input type="radio" name="point" id="slide1" checked>
            <input type="radio" name="point" id="slide2">
            <input type="radio" name="point" id="slide3">
            <input type="radio" name="point" id="slide4">
            <div class="slider">
                <div class="slides slide1">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(1)).'" title="'.get_the_category_by_ID(1).'">'.get_the_category_by_ID(1).'</a>'); ?>
                        <p>Гибкие ленточные ПВХ завесы (термошторы) снижают затраты на охлаждение и обогрев любых помещений.</p>
                    </div>
                </div>
                <div class="slides slide2">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(15)).'" title="'.get_the_category_by_ID(15).'">'.get_the_category_by_ID(15).'</a>'); ?>
                        <p>Для изготовления ленточных завес мы постовляем ПВХ ленту европейского качества французской компании Extruflex.</p>
                    </div>
                </div>
                <div class="slides slide3">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(16)).'" title="'.get_the_category_by_ID(16).'">'.get_the_category_by_ID(16).'</a>'); ?>
                        <p>Современные распашные и откатные термоизоляционные двери для холодильных и морозильных камер.</p>
                    </div>
                </div>
                <div class="slides slide4">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(17)).'" title="'.get_the_category_by_ID(17).'">'.get_the_category_by_ID(17).'</a>'); ?>
                        <p>Гибкие и жесткие распашные двери открываются в обе стороны и фиксируются в заданном положении.</p>
                    </div>
                </div>
            </div>
            <div class="controls">
                <label for="slide1" data-ami-number="1" title="<?php echo(get_the_category_by_ID(1)); ?>"></label>
                <label for="slide2" data-ami-number="2" title="<?php echo(get_the_category_by_ID(15)); ?>"></label>
                <label for="slide3" data-ami-number="3" title="<?php echo(get_the_category_by_ID(16)); ?>"></label>
                <label for="slide4" data-ami-number="4" title="<?php echo(get_the_category_by_ID(17)); ?>"></label>
            </div>
        </div>

Вот его CSS:

.index-entry-slider { height:326px;	width:435px; position:relative;	float:left; margin:0 30px 35px 0; cursor:default; }
.slider { height:inherit; overflow:hidden; position:relative; width:inherit; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; }
.slides { height:inherit; opacity:0; position:absolute;	width:inherit; z-index:0; background-size:100% 100%; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); -webkit-transition:transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition:transform ease-in-out .5s, opacity ease-in-out .5s; -o-transition:transform ease-in-out .5s, opacity ease-in-out .5s; transition:transform ease-in-out .5s, opacity ease-in-out .5s; }
.slides-overlay { position:relative; top:238px; left:0; background:rgba(0,0,0,0.7); border-top:2px solid #04aeec; height:86px; z-index:1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.slides .slides-overlay:hover { border-top:2px solid #04aeec; background:rgba(0,0,0,0.9); }
.slides a { position:relative; top:0; left:0; display:block; height:79px; padding:7px 5px 0 15px; font-size:21px; color:#fff; font-weight:300; text-decoration:none; z-index:3; }
.slides p { position:relative; top:-46px; left:0; text-align:left; margin:0; font-size:13px; line-height:17px; color:#fff; font-weight:300; padding:0 15px 12px 15px; z-index:2; }
.slide1 { background-image:url(images/index-pvc.jpg); }
.slide2 { background-image:url(images/index-oborudovanie.jpg); }
.slide3 { background-image:url(images/index-nergaveyka.jpg); }
.slide4 { background-image:url(images/index-mayatnikdoor.jpg); }
#slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4 { opacity:1; z-index:1; -webkit-transform:scale(1);	-moz-transform:scale(1); -o-transform:scale(1);	transform:scale(1); }
.index-entry-slider > input { display:none; }
.index-entry-slider .controls { margin:10px 0; text-align:center; }
.index-entry-slider label {	cursor:pointer;	display:inline-block; height:10px; width:10px; margin:0 5px; position:relative;	background:#ddd; -webkit-border-radius:50%; -moz-border-radius:50%;	-o-border-radius:50%; border-radius:50%; -webkit-transition:background ease-in-out .3s;	-moz-transition:background ease-in-out .3s; -o-transition:background ease-in-out .3s; transition:background ease-in-out .3s; }
.index-entry-slider label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) { background:#04aeec; box-shadow:0 0 10px rgba(0,0,0,0.5); -webkit-box-shadow:0 0 10px rgba(0,0,0,0.5); -moz-box-shadow:0 0 10px rgba(0,0,0,0.5); }

Заранее большущее спасибо!

Автозапуск для слайдера на css3
 

EvilDevil,
с такими пожеланиями лучше потом сразу в раздел работа ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .index-entry-slider { height:326px;	width:435px; position:relative;	float:left; margin:0 30px 35px 0; cursor:default; }
.slider { height:inherit; overflow:hidden; position:relative; width:inherit; border-radius:2px;   }
.slides { height:inherit; opacity:0; position:absolute;	width:inherit; z-index:0; background-size:100% 100%; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); -webkit-transition:transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition:transform ease-in-out .5s, opacity ease-in-out .5s; -o-transition:transform ease-in-out .5s, opacity ease-in-out .5s ; transition:transform ease-in-out .5s , opacity ease-in-out .5s; }
.slides-overlay { position:relative; top:238px; left:0; background:rgba(0,0,0,0.7); border-top:2px solid #04aeec; height:86px; z-index:1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.slides .slides-overlay:hover { border-top:2px solid #04aeec; background:rgba(0,0,0,0.9); }
.slides a { position:relative; top:0; left:0; display:block; height:79px; padding:7px 5px 0 15px; font-size:21px; color:#fff; font-weight:300; text-decoration:none; z-index:3; }
.slides p { position:relative; top:-46px; left:0; text-align:left; margin:0; font-size:13px; line-height:17px; color:#fff; font-weight:300; padding:0 15px 12px 15px; z-index:2; }
.slide1 { background-image:url(images/index-pvc.jpg); }
.slide2 { background-image:url(images/index-oborudovanie.jpg); }
.slide3 { background-image:url(images/index-nergaveyka.jpg); }
.slide4 { background-image:url(images/index-mayatnikdoor.jpg); }
#slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4 { opacity:1; z-index:1; -webkit-transform:scale(1);	-moz-transform:scale(1); -o-transform:scale(1);	transform:scale(1); }
.index-entry-slider > input { display:none; }
.index-entry-slider .controls { margin:10px 0; text-align:center; }
.index-entry-slider label {	cursor:pointer;	display:inline-block; height:10px; width:10px; margin:0 5px; position:relative;	background:#ddd;  	-o-border-radius:50%; border-radius:50%; -webkit-transition:background ease-in-out .3s;	-moz-transition:background ease-in-out .3s; -o-transition:background ease-in-out .3s; transition:background ease-in-out .3s; }
.index-entry-slider label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) { background:#04aeec; box-shadow:0 0 10px rgba(0,0,0,0.5);  -moz-box-shadow:0 0 10px rgba(0,0,0,0.5); }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
   $(function() {
    var slider = $(".index-entry-slider"),
        item = $("> input", slider),
        block = $(".slides", slider),
        pause = 3000,
        play = true,
        timer;

    function sliderAuto() {
        var i = item.index($(":checked")),
            i = ++i % item.length;
            play && item.eq(i).prop({
                "checked": true })
        timer = window.setTimeout(sliderAuto, pause)
    }
    slider.on("mouseenter", function() {
        play = false;
        window.clearTimeout(timer)
    });
    slider.on("mouseleave", function() {
        play = true;
        timer = window.setTimeout(sliderAuto, pause)
    });
    sliderAuto()

});
  </script>
</head>

<body>
<div class="index-entry-slider">
            <input type="radio" name="point" id="slide1" checked >
            <input type="radio" name="point" id="slide2">
            <input type="radio" name="point" id="slide3">
            <input type="radio" name="point" id="slide4">
            <div class="slider">
                <div class="slides slide1">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(1)).'" title="'.get_the_category_by_ID(1).'">'.get_the_category_by_ID(1).'</a>'); ?>
                        <p>Гибкие ленточные ПВХ завесы (термошторы) снижают затраты на охлаждение и обогрев любых помещений.</p>
                    </div>
                </div>
                <div class="slides slide2">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(15)).'" title="'.get_the_category_by_ID(15).'">'.get_the_category_by_ID(15).'</a>'); ?>
                        <p>Для изготовления ленточных завес мы постовляем ПВХ ленту европейского качества французской компании Extruflex.</p>
                    </div>
                </div>
                <div class="slides slide3">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(16)).'" title="'.get_the_category_by_ID(16).'">'.get_the_category_by_ID(16).'</a>'); ?>
                        <p>Современные распашные и откатные термоизоляционные двери для холодильных и морозильных камер.</p>
                    </div>
                </div>
                <div class="slides slide4">
                    <div class="slides-overlay">
                        <?php echo('<a href="'.esc_url(get_category_link(17)).'" title="'.get_the_category_by_ID(17).'">'.get_the_category_by_ID(17).'</a>'); ?>
                        <p>Гибкие и жесткие распашные двери открываются в обе стороны и фиксируются в заданном положении.</p>
                    </div>
                </div>
            </div>
            <div class="controls">
                <label for="slide1" data-ami-number="1" title="<?php echo(get_the_category_by_ID(1)); ?>"></label>
                <label for="slide2" data-ami-number="2" title="<?php echo(get_the_category_by_ID(15)); ?>"></label>
                <label for="slide3" data-ami-number="3" title="<?php echo(get_the_category_by_ID(16)); ?>"></label>
                <label for="slide4" data-ami-number="4" title="<?php echo(get_the_category_by_ID(17)); ?>"></label>
            </div>
        </div>

</body>

</html>

рони,
ты просто лучший!!!!
как еще сделать так, что бы первый слайд (дефолтный) имел задержку перед переключением на следующий слайд? а то при загрузке страницы почти сразу переключается на следующий слайд...
Могу отблагодарить))) скинь мне в ЛС свой R-кошелек, скину немного деньжат ;)

Уже разобрался как))