<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Script/prinsopale_Informa.css" rel="stylesheet" type="text/css">
<link href="slick-slider/slick-slider/style.css" rel="stylesheet" type="text/css">
<link href="slick-slider/slick-slider/css/slick.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<div class="container-slider">
<div class="slidere conteiner-for">
<div><img src="slick-slider/slick-slider/1.jpg" alt="Muro di Berlino"/><h1>Muro di Berlino</h1></div>
<div><img src="slick-slider/slick-slider/2.jpg" alt="Strada blu"/><h2>strada blu</h2></div>
<div><img src="slick-slider/slick-slider/3.jpg" alt="tre "/><h3>terzo</h3></div>
<div><img src="slick-slider/slick-slider/4.jpg" alt="quattro "/><h4>quarto</h4></div>
<div><img src="slick-slider/slick-slider/5.jpg" alt="cinque "/><h5>Quinto</h5></div></div></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: false,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
});
</script>
</body>
</html>