ДЕМО
Код
<meta charset="utf-8" />
<html>
<head>
<!-- FlexSlider pieces -->
<link rel="stylesheet" href="http://www.novickiy.ru/1clide/according2/default.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://www.novickiy.ru/1clide/according2/jquery.flexslider-min.js"></script>
<!-- Kwiks pieces -->
<script src="http://www.novickiy.ru/1clide/according2/kwiks.js"></script>
<!-- Includes for this demo -->
<link rel="stylesheet" href="http://www.novickiy.ru/1clide/according2/demo.css" type="text/css" media="screen" />
<!-- Hook up the FlexSlider -->
<script type="text/javascript">
var Main = Main || {};
Main.cachedWidth = jQuery(window).width();
jQuery(window).load(function() {
Main.gallery = new Gallery();
}).resize(function() {
Main.gallery.update();
});
function Gallery(){
var container = jQuery('.flexslider'),
clone = container.clone( false ),
width = jQuery(window).width();
this.init = function ( width ){
console.log(width)
if( width >= 1024 ){
container.find('.slides').kwicks({
max : 300,
spacing : 0
}).find('li > a').click(function (){
return false;
});
} else {
container.flexslider();
}
}
this.update = function () {
var width = jQuery(window).width();
if((Main.cachedWidth >= 1024 && width <=1023) || (Main.cachedWidth <= 1023 && width >= 1024) ) {
Main.cachedWidth = width;
container.replaceWith( clone );
container = clone;
clone = container.clone(false);
this.init( width );
}
}
this.init( width );
}
</script>
</head>
<body>
<div id="container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="http://www.novickiy.ru"><img src="http://www.novickiy.ru/1clide/slide1.jpg" /></a>
<div class="flex-caption">
<h3>Пейзаж</h3>
<p>Картина - это оригинальный подарок друзьям. Никогда не бывает лишних картин в интерьере. - <a href="http://novickiy.ru/"><span style="color:#00FF00;">КАРТИНЫ ДЛЯ ИНТЕРЬЕРА</span></a></p>
</div>
</li>
<li>
<a href="http://www.novickiy.ru"><img src="http://www.novickiy.ru/1clide/slide2.jpg" /></a>
<div class="flex-caption">
<h3>Средиземноморье</h3>
<p>На сайте представлены работы художника. В галерее: пейзаж, натюрморт, сюжетные картины и др. <a href="http://novickiy.ru/"><span style="color:#00FF00;">КАРТИНЫ ДЛЯ ИНТЕРЬЕРА</span></a></p>
</div>
</li>
<li>
<a href="http://www.novickiy.ru"><img src="http://www.novickiy.ru/1clide/slide3.jpg" /></a>
<div class="flex-caption">
<h3>Пейзаж</h3>
<p>Живопись - редкий и удачный корпоративный подарок, для оформления интерьеров. <a href="http://novickiy.ru/"><span style="color:#00FF00;">КАРТИНЫ ДЛЯ ИНТЕРЬЕРА</span></a></p>
</div>
</li>
<li>
<a href="http://www.novickiy.ru"><img src="http://www.novickiy.ru/1clide/slidep.jpg" /></a>
<div class="flex-caption">
<h3>Пейзаж</h3>
<p>Пейзаж по своей природе искусство, в котором наиболее непосредственно выражаются эмоции.<a href="http://novickiy.ru/"><span style="color:#FF0000;">КАРТИНЫ ДЛЯ ИНТЕРЬЕРА</span></a> </p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>