Artem_A, документация по плагину и макет где?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<title>Slider</title>
<style>
.wrapper {
background: rgba(0,0,0,0.3);
overflow: hidden;
border: 2px solid #f00;
width: 200px;
height: 100px;
}
.wrapper ul {
margin:0px;
padding:0px
}
.slider {
display: block;
width:100%;
height:100%;
}
.imageClass {
width: 100%;
height: 100%;
}
#ar{
margin-top: 2000px;
}
</style>
<script>
(function ($) {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this;
};
}(jQuery));
$(function () {
var effects = "blindX,blindY,blindZ,cover,curtainX,curtainY,fade,fadeZoom,growX,growY,none,scrollUp,\
scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,\
turnUp,turnDown,turnLeft,turnRight,uncover,wipe,zoom".split(',');
var len = Math.floor(Math.random()*effects.length)
var slider = $('.slider').cycle({
fx: effects[len],
speed: 'slow',
timeout: 1000
}).cycle('pause');
$('a').on({click : function(event) {
event.preventDefault();
var id = $(this).attr('href')
$(id).scrollTo(1000, 'swing',function() {
$('.slider').cycle('resume')
})
}})
});
</script>
</head>
<body>
<a href="#ar">go</a>
<div class="wrapper" id="ar">
<ul class="slider">
<li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img1.jpg"/></li>
<li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img2.jpg"/></li>
<li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img3.jpg"/></li>
<li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img4.jpg"/></li>
<li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img5.jpg"/></li>
<li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img6.jpg"/></li>
</ul>
</div>
</body>
</html>