:

NV-slider (Test-Templates)

, -, .. ""( ). , , .

"", . , , . , . , - , .

, . jQuery. , javascript . - = )

. :

NV-slider (Test-Templates)


, . , , - . , , .

, html :


<div class="nv-slider">

<!--    -->
<div class="nv-slider-item">

<!-- - -->
<div class="nv-slider-item-small">
<div class="nv-slider-item-small-overflow">
<img src="images/1-small.jpg" alt="" />
</div>
</div>

<!--   -->
<div class="nv-slider-item-big">

<div class="nv-slider-item-big-overflow">
<img src="images/1.jpg" alt="" />
<a href="#" class="title-link"> .  ,    </a>
</div>

</div>

</div>

<!--    -->
<div class="nv-slider-item">

<!-- - -->
<div class="nv-slider-item-small">
<div class="nv-slider-item-small-overflow">
<img src="images/1-small.jpg" alt="" />
</div>
</div>

<!--   -->
<div class="nv-slider-item-big">

<div class="nv-slider-item-big-overflow">
<img src="images/1.jpg" alt="" />
<a href="#" class="title-link"> .  ,    </a>
</div>

</div>

</div>

.....   ,  14      

</div>


, , , . - , - . , css . css. . - . . css :


.nv-slider {
position: relative;
width: 1000px;
margin: 0 auto 0 auto;
text-align: left;
height: 310px;
padding: 500px 0 0 0;
}

.nv-slider-item {

}

.nv-slider-item-small {
width: 130px;
height: 120px;
margin: 10px 0 0 11px;
float: left;
background: #3d3d3d;
border-radius: 5px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
box-shadow:0 0 8px 0 #090c12;
-webkit-box-shadow:0 0 8px 0 #090c12;
-moz-box-shadow:0 0 8px 0 #090c12;
position: relative;
cursor: pointer;
}

.nv-slider-item-small-overflow {
width: 106px;
height: 98px;
position: absolute;
overflow: hidden;
border: 1px #fff solid;
left: 12px;
top: 11px;
}

.nv-slider-item-small-overflow img {
height: 98px;
border: 0;
}

.nv-slider-item-big {
display: none;
position: absolute;
left: 0;
top: 0;
width: 1000px;
height: 500px;
box-shadow:0 0 20px 0 #000;
-webkit-box-shadow:0 0 20px 0 #000;
-moz-box-shadow:0 0 20px 0 #000;
}

.nv-slider-item-big-overflow {
width: 980px;
height: 480px;
position: absolute;
left: 10px;
top: 10px;
border: 1px #fff solid;
overflow: hidden;

}

.nv-slider-item-big-overflow img {
width: 980px;
border: 0;
}


. - :

NV-slider (Test-Templates)


css3, .

- js . :


//     
function sliderShow() {
var currentBlock = $('.nv-slider-item-active');
var nextBlock = currentBlock.next('.nv-slider-item').length ? currentBlock.next('.nv-slider-item') : $('.nv-slider-item:first');

currentBlock.find('.nv-slider-item-big').fadeOut(1000);
currentBlock.removeClass('nv-slider-item-active');
nextBlock.addClass('nv-slider-item-active');
nextBlock.find('.nv-slider-item-big').fadeIn(1000);

setTimeout(sliderShow, 8000);//   
};


:

function sliderShow() {




var currentBlock = $('.nv-slider-item-active');

currentBlock, ( ). .nv-slider-item-active. , .


var nextBlock = currentBlock.next('.nv-slider-item').length ? currentBlock.next('.nv-slider-item') : $('.nv-slider-item:first');

, , . . nextBlock, .nv-slider-item, currentBlock ( , ). . a ? b : c , = true, b, c. :
currentBlock.next('.nv-slider-item').length 0, .. .nv-slider-item currentBlock, currentBlock .nv-slider-item, , , .. .nv-slider-item . = )


:
currentBlock.find('.nv-slider-item-big').fadeOut(1000);




currentBlock.removeClass('nv-slider-item-active');

nv-slider-item-active


nextBlock.addClass('nv-slider-item-active');

nv-slider-item-active


nextBlock.find('.nv-slider-item-big').fadeIn(1000);




setTimeout(sliderShow, 8000);

8

= ) . . :


//    
function clickShow() {
var clickBlock = $(this);
$('.nv-slider-item').removeClass('nv-slider-item-active');
$('.nv-slider-item-big').fadeOut();

clickBlock.parent().addClass('nv-slider-item-active');
clickBlock.next('.nv-slider-item-big').fadeIn(1000);

}

//         
$('.nv-slider-item-small').click(clickShow);


- . - . :


//       -
$(".nv-slider-item-big").hover(
function() {
$(this).find('.title-link').slideDown(300);
}, function() {
$(this).find('.title-link').slideUp(300);
});


. :


$(document).ready(function() {

sliderShow();

//     
function sliderShow() {
var currentBlock = $('.nv-slider-item-active');
var nextBlock = currentBlock.next('.nv-slider-item').length ? currentBlock.next('.nv-slider-item') : $('.nv-slider-item:first');

currentBlock.find('.nv-slider-item-big').fadeOut(1000);
currentBlock.removeClass('nv-slider-item-active');
nextBlock.addClass('nv-slider-item-active');
nextBlock.find('.nv-slider-item-big').fadeIn(1000);

setTimeout(sliderShow, 8000);//   
};

//    
function clickShow() {
var clickBlock = $(this);
$('.nv-slider-item').removeClass('nv-slider-item-active');
$('.nv-slider-item-big').fadeOut();

clickBlock.parent().addClass('nv-slider-item-active');
clickBlock.next('.nv-slider-item-big').fadeIn(1000);

}

//         
$('.nv-slider-item-small').click(clickShow);

//       -
$(".nv-slider-item-big").hover(
function() {
$(this).find('.title-link').slideDown(300);
}, function() {
$(this).find('.title-link').slideUp(300);
});

});


:

.nv-slider-item-active .nv-slider-item-small {
background: #fff1cc;
}

.nv-slider-item-active .nv-slider-item-small-overflow {
border: 1px #000 solid !important;
}

.nv-slider-item-small:hover {
background: #747474;
}

.title-link {
position: absolute;
width: 100%;
left: 0;
display: none;
padding: 10px;
color: #fff;
bottom: 0;
background: url(images/png.png);
height: 15px;
}



. , .
Assassin674 28 2011 19:44
/ /
. smile
:
, , .
:

2017 !

31-12-2016, 00:24
2017 ! ! ?) DLE 11.2 - FanBox (Test-Templates)!

11.11 ! 50%! !

11-11-2016, 17:32
! 50% ! =) icq !
Test-Templates Google+

Test-Templates Youtube

:
WP?
,
,
WP