Добрый день!
У меня есть слайдер, написанный на 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); }
Заранее большущее спасибо!
