| |
|
|
| | Всем привет!Хотел вставить на сайт вот такой слайдер
https : // codepen . io / supah / pen/BJYorJ
По факту получается так. | |
| |
|
|
| |
 48 Кб |
|
| |
для: mardrake
(16.01.2018 в 13:41)
| | | Вот | |
| |
|
|
| |
|
|
| |
для: mardrake
(16.01.2018 в 13:42)
| | | Jquery и остальное подключили? | |
| |
|
|
| |
|
|
| |
для: KPETuH
(17.01.2018 в 10:21)
| | | <!DOCTYPE HTML>
<head>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="css/gallery.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.slider').clone().removeAttr('id').attr('id', 'slider-2').appendTo('body');
$('#slider-1').slick({
arrows: false,
speed: 750,
asNavFor: '#slider-2',
dots: false
}).on('mousedown touchstart', function () {
$('body').addClass('down');
}).on('mouseleave mouseup touchend', function () {
$('body').removeClass('down');
});
$(window).on('keydown', function () {
$('body').addClass('down');
}).on('keyup', function () {
$('body').removeClass('down');
});
$('#slider-2').slick({
fade: true,
arrows: false,
speed: 300,
asNavFor:
'#slider-1',
dots: false
});
setTimeout(function(){
$(window).trigger('keydown');
setTimeout(function(){
$('#slider-1').slick('slickNext');
setTimeout(function(){
$(window).trigger('keyup');
}, 500);
}, 600);
}, 1500);
$('#slider-1 image').removeAttr('mask');
$(window).on('resize', function () {
$('#donutmask circle').attr({
cx: $(window).width() / 2,
cy: $(window).height() / 2
});
$('#donutmask #outer').attr({
r: $(window).height() / 2.6
});
$('#donutmask #inner').attr({
r: $(window).height() / 4.5
});
}).resize();
$(window).on('mousemove', function(e){
$('.cursor').css({
top: e.pageY + 'px',
left: e.pageX + 'px',
})
});
</script>
</head>
<body>
<div class="slider" id="slider-1">
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" class="original">
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/1.jpg?raw=true" mask="url(#donutmask)"></image>
</svg>
<div class="tit">DAISY</div>
</div>
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" class="original">
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/3.jpg?raw=true" mask="url(#donutmask)"></image>
</svg>
<div class="tit">CANDIDUM</div>
</div>
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" class="original">
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/4.jpg?raw=true" mask="url(#donutmask)"></image>
</svg>
<div class="tit">MARIGOLD</div>
</div>
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" class="original">
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/2.jpg?raw=true" mask="url(#donutmask)"></image>
</svg>
<div class="tit">BLOSSOM</div>
</div>
</div>
<svg>
<defs>
<mask id="donutmask">
<circle id="outer" cx="250" cy="250" r="400" fill="white"/>
<circle id="inner" cx="250" cy="250" r="300"/>
</mask>
</defs>
</svg>
<div class="cursor"></div>
</body>
</html> | |
| |
|
|
| |
|
|
| |
для: KPETuH
(17.01.2018 в 10:21)
| | | Видимо не подключил.
Подскажите как? | |
| |
|
|
