Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Slider
 
 автор: mardrake   (16.01.2018 в 13:41)   письмо автору
 
 

Всем привет!Хотел вставить на сайт вот такой слайдер
https : // codepen . io / supah / pen/BJYorJ
По факту получается так.

  Ответить  
 
 автор: mardrake   (16.01.2018 в 13:42)   письмо автору
48 Кб
 
   для: mardrake   (16.01.2018 в 13:41)
 

Вот

  Ответить  
 
 автор: KPETuH   (17.01.2018 в 10:21)   письмо автору
 
   для: mardrake   (16.01.2018 в 13:42)
 

Jquery и остальное подключили?

  Ответить  
 
 автор: mardrake   (24.01.2018 в 17:11)   письмо автору
 
   для: 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>

  Ответить  
 
 автор: mardrake   (24.01.2018 в 18:49)   письмо автору
 
   для: KPETuH   (17.01.2018 в 10:21)
 

Видимо не подключил.
Подскажите как?

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования