<div class="ratio ratio-1x1">
<div class="bd-example" style="transform:rotate(90deg);position:absolute;display:table;">
<div id="carouselExampleFade" class="carousel slide" data-bs-ride="carousel" style="display:table-cell; vertical-align:middle;position: relative;">
<div class="carousel-inner">
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div><div id="carouselExampleFade" class="carousel slide" .../*для блоков, которые будут у вас выкатываться задаёте такой стиль:*/
/*изначальные позиции анимации*/
.services-content__imege-container .oval-1{
position:absolute;
left: /*изначальная позиция*/;
top: /*изначальная позиция*/;
width: /*ширина блока*/;
height: /*высота блока*/;
transition: all .5s; /*длительность анимаций всех свойств 0.5 секунды*/
}
.services-content__imege-container .oval-2{
position:absolute;
left: /*изначальная позиция*/;
top: /*изначальная позиция*/;
width: /*ширина блока*/;
height: /*высота блока*/;
transition: all .5s; /*длительность анимаций всех свойств 0.5 секунды*/
}
/*обязательно сделайте position:relative для родителя анимируемых блоков*/
.services-content__imege-container{
position:relative; {/*это чтобы анимируемые блоки позиционировались относительно родителя*/}
}
/*конечные позиции анимации блоков*/
.services-content__imege .services-content:hover__imege-wrapper .services-content__imege-container .oval-1{
left: /*конечная позиция*/;
top: /*конечная позиция*/;
}
.services-content__imege:hover .services-content__imege-wrapper .services-content__imege-container .oval-2{
left: /*конечная позиция*/;
top: /*конечная позиция*/;
}/*...
...и аналогично остальные анимируемые объекты*/let b=10;
if(b<12){
console.log(b);
b++;
if(b<12){
console.log(b);
b++;
if(b<12){
console.log(b);
b++;
if... // и так далее
}
}
}
svg:hover{color: white;} , как в примере<style type="text/css">
svg:hover{
color:white;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16" style="color: black;">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"></path>
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"></path>
</svg>count($tm_element_settings['cdescription'] ...$tm_element_settings['cdescription'], хранящегося в ячейке массива $tm_element_settings[ ].$tm_element_settings['cdescription'] - строка (а не массив), то вам скорее всего хотелось посчитать её длину, для этого есть оператор mb_strlen($tm_element_settings['cdescription'],'UTF-8')function func(category){
// делаем запрос на сервер для выдачи товаров по категории category
// получаем ответ
result = ответ, полученный от сервера;
return result;
}
var a=func('smartphones');
var b=func('tv');window.my_custom_object={
init:function(){
// ваши инструкции
alert('Скрипт работает!') // для теста можете оставить
},
another_function:function(){
// ещё один метод объекта с вашими инструкциями
alert('Второй скрипт тоже работает!'); // для теста можете оставить
},
parameter_1: "abc",
parameter_2: 1
}
// вызываем метод init, прописанный в объекте
my_custom_object.init();
// вызываем метод another_function, прописанный в объекте
my_custom_object.another_function();
// вызываем параметр parameter_1, хранимый в объекте
alert(my_custom_object.parameter_1) // покажет вам текст "abc"
// вызываем параметр parameter_2, хранимый в объекте
alert(my_custom_object.parameter_2) // покажет вам текст "1"<div class="app-card-event__date"><a href="/events/182694" class="app-card-event__link"> Маркетинговый интенсив </a><div class="app-card-event__location"> Троицк, Точка кипения - Троицк </div>
// если нужен поиск кликабельных элементов, которые вы догружаете через AJAX
let custom_box = document.querySelector('body'); // запоминаем тэг body или другой контейнер, в рамках которого отслеживаем нажатие ЛКМ
custom_box.addEventListener('click', function(e) { // навешиваем прослушиватель события нажатия ЛКМ наш блок
if(e.target.getAttribute("class").search(/mybutton_class/)!=-1){
// e.target - нажатый объект
// .getAttribute("class") - получаем содержимое аттрибута class=""
// .search(/mybutton_class/) - ищем в содержимом аттрибута строку с искомым названием класса
// выполняем какие то инструкции с кнопкой
}// если нужно отследить, догрузился ли конкретный элемент на страницу, чтобы с ним работать, то либо нужно использовать callback внутри вашей AJAX функции или таймер
// таймер
var timer=setInterval(my_function(),100); // с переменной timer связываем js таймер, выполняющий функцию my_function каждые 100мс
function my_function() {
if(document.querySelector('.ajax-photo')!=null){
// проверяем наличие на странице блока с классом ajax-photo
// ваши инструкции
clearInterval(timer); // этой командой отключаем таймер из переменной timer - можете не выключать, тогда инструкция будет постоянно выполняться
};
}var src = ($('.clientAvatar').attr("src") === "<?php bloginfo('template_url') ?>/img/client.png")?"<?php bloginfo('template_url') ?>/img/teamMemberTwo.png":"<?php bloginfo('template_url') ?>/img/teamMemberOne.png" ;$.ajax({
url: ' /*адрес страницы или скрипта,
откуда вы хотите получить url-новой картинки*/ ',
success: function(data){
var src=$(data).find( /*чего вам надо найти*/ ).text();
}
});