$('.your-element').on('afterChange', function(event, slick, currentSlide, nextSlide){
// тут производим смену картинки
});const wrap = document.createElement('div');
wrap.setAttribute('class', 'sw-wrap');
const list = document.createElement('div');
list.setAttribute('class', 'sw-list');
wrap.appendChild(list);
////////////////////////////////////////////
var swapi = new XMLHttpRequest();
swapi.open("GET", "http://swapi.co/api/films/", true);
swapi.onload=function(){
var data=JSON.parse(this.response);
data.results.forEach( film => {
console.log(film.title);
const item = document.createElement('div');
item.setAttribute('class', 'sw-item');
const info = document.createElement('div');
info.setAttribute('class', 'sw-item__info');
const description = document.createElement('div');
description.setAttribute('class', 'opening_crawl');
const title = document.createElement('h3');
title.textContent=film.title;
const episode = document.createElement('h3');
episode.textContent=film.episode_id;
const director = document.createElement('div');
director.textContent=film.director;
const release = document.createElement('div');
release.textContent=film.release_date;
list.appendChild(item);
item.appendChild(info);
item.appendChild(description);
info.appendChild(title);
info.appendChild(episode);
info.appendChild(director);
info.appendChild(release);
});
}
swapi.send();<div id="content"></div>document.getElementById('content').appendChild(wrap);
<?php
$post = get_post(6);
setup_postdata($post);
the_content();
wp_reset_postdata();
?>
.button {
display: inline-block;
position: relative;
margin: 2rem;
padding: 0 2rem;
line-height: 2rem;
font-family: 'Montserrat', sans-serif;
color: #FFF;
background:
linear-gradient(to right, #41D3BD, #791E94),
linear-gradient(to bottom, #791E94, #FE9920),
linear-gradient(-45deg, transparent, transparent 40%, #FE9920 45%, #FE9920 55%, transparent 60%, transparent),
linear-gradient(to left, #FE9920, #FCFF4B),
linear-gradient(to top, #FCFF4B, #41D3BD),
linear-gradient(-45deg, transparent, transparent 40%, #41D3BD 45%, #41D3BD 55%, transparent 60%, transparent);
background-repeat: no-repeat;
background-position: top right, top right, bottom right, bottom left, bottom left, top left;
background-size:
calc(100% - 10px) 2px,
2px calc(100% - 10px),
10px 10px,
calc(100% - 10px) 2px,
2px calc(100% - 10px),
10px 10px;
&::before {
content: '';
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
bottom: -4px;
right: -4px;
background:
linear-gradient(to bottom, #791E94, #FE9920),
linear-gradient(-45deg, transparent, transparent 45%, #FE9920 50%, #FE9920 55%, transparent 60%, transparent),
linear-gradient(to left, #FE9920, #FCFF4B);
background-repeat: no-repeat;
background-position: top right, bottom right, bottom left;
background-size:
2px calc(100% - 12px),
12px 12px,
calc(100% - 12px) 2px;
}
}