Ответы пользователя по тегу CSS
  • Как реализовать подобный круговой слайдер?

    @OneTwoThreeFourFive
    Используйте slick или owl. Сделайте слайд по центру (в настройках init слайдера). Остальным слайдам добавьте при загрузке классы. Например вот так:
    function slide_change_position() {
    	var first_left_slide = $('.active-slider').prev('.slide-class');
    	var second_left_slide = $(first_left_slide).prev('.slide-class');
    	var third_left_slide = $(second_left_slide).prev('.slide-class');
    
    	var first_right_slide = $('.active-slider').next('.slide-class');
    	var second_right_slide = $(first_left_slide).next('.slide-class');
    	var third_right_slide = $(second_left_slide).next('.slide-class');
    
    	$(first_left_slide, first_right_slide).addClass('slide-change-position-1');
    	$(second_left_slide, second_right_slide).addClass('slide-change-position-2');
    	$(third_left_slide, third_right_slide).addClass('slide-change-position-3');
    }
    
    slide_change_position();

    Изменить позицию
    .slide-class {
    	transition: 0.5s;
    }
    
    .slide-change-position-1 {
    	margin-top: 100px;
    }
    
    .slide-change-position-2 {
    	margin-top: 200px
    }
    
    .slide-change-position-3 {
    	margin-top: 300px;
    }

    При переключении слайда вызвать ещё раз функцию. Она снова найдёт первый, второй, третий слайд относительно главного и сменит позицию.
    $('.slider-class').on('afterChange', function(event, slick) {
    	slide_change_position();
    });


    Но позиция наверно сменится только тогда, когда слайд полностью переключится. Чтобы позиция менялась сразу же после клика на стрелочку (плавно передвигалась), можно попробовать использовать setInterval() с условием, что каждый раз вычитать из текущего margin-top 1px до нужного и задать определённый интервал. Тогда слайд плавно перейдёт на новую позицию.

    Это всего лишь пример и возможно он плохой, но я просто рассказал.
    Ответ написан
    1 комментарий
  • Как добавить class к динамически добавленным элементам на JQ?

    @OneTwoThreeFourFive Автор вопроса
    Всем спасибо за ответы. Решил велосипедом. Раньше это $( document ).ajaxComplete(function() { ... }); работало 1 раз после запроса, а при переключении месяца (следующий/предыдущий) класс удалялся. Добавил код при клике на эти кнопки добавлять класс. И это работает, класс добавляется уже к существующим и после ajax запроса, и с высотой всё нормально.
    // После ajax запроса добавить класс
    $( document ).ajaxComplete(function() {
        $("a.link-event").addClass("circle");
    });
    
    // При клике на кнопку "следующий" или "предыдущий" месяц добавить такой же класс
    $( document ).on( "click", ".month-button", function() {
       $("a.link-event").addClass("circle");
    });


    Если вы знаете вариант лучше, напишите в комментариях
    Ответ написан
    Комментировать
  • Как сделать текст за текстом?

    @OneTwoThreeFourFive
    .section-header {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    h2 {
      text-align: center;
      font-size: 50px;
    }
    p {
      position: absolute;
      z-index: -1;
      color: #bbb;
      font-size: 100px;
      top: -80px
    }

    <div class="section-header">
      <h2>COPY</h2>
      <p>COPY</p>
    </div>
    Ответ написан
  • Как сделать разный css для разных категорий?

    @OneTwoThreeFourFive Автор вопроса
    Ответ нашёл в гугле.
    Если вдруг кому-то поможет. Вставил в header.php

    <?php
    if ( in_category( 'News' )) { ?>

    <?php } ?>
    Ответ написан