Triceps Senju's questions

我正在尝试制作一个旋转木马，当将鼠标悬停在幻灯片上时，它会增加它的宽度并减少其余部分。https://imgur.com/a/S13FBof这里是滑块设计的截图（由于某种原因我无法直接添加截图）。我在 Internet 上找不到相同的滑块来查看他们是如何实现的。 https://aliserb.github.io/liya/这就是我实现它的方式，但我不喜欢我所做的，因为浏览器控制台中出现了我不明白如何修复的错误）并且有问题调整此滑块时。从本质上讲，我这样做是为了在将鼠标悬停在幻灯片上时，显示 212px 的宽度，用于显示在视图中且具有 swiper-slide-visible 类的幻灯片，并且当光标离开时宽度为 100%。进一步在 css 中，我添加了悬停和 566px 宽度。

    let aboutSliderItem = document.querySelectorAll('.about_slider_item');

aboutSliderItem.forEach((aboutSliderLoop) => {
    // let itemPar = querySelector(".about_info .p");
    let sliderWidthReduce = () => {
        for (let i = 0; aboutSliderItem.length; i++) {
            if (aboutSliderItem[i].classList.contains("swiper-slide-visible")) {
                aboutSliderItem[i].style.width = "212px";
            }
        }
    }

    let sliderWidthreturn = () => {
        for (let i = 0; aboutSliderItem.length; i++) {
            aboutSliderItem[i].style.width = "100%";
        }
    }

    aboutSliderLoop.addEventListener('mouseover', sliderWidthReduce);
    aboutSliderLoop.addEventListener('mouseout', sliderWidthreturn);
})

我怎样才能使这个滑块更好和自适应））

我需要单击 js 的链接（添加产品的按钮）。页面加载时是否可以点击？

wordpress 上的网站。有一个通过循环显示的滑块。

<section class="docs-slide">
    <div class="container docs-slide-container">

        <h1 class="titles docs-slide-title">
            разрешительные документы
        </h1>

        <div class="slider">
            <?php
            $loopDocs = CFS()->get('slider-docs');

            function debug($data){
                echo "<pre>";
                var_dump($data);
                echo "</pre>";
            }

            // debug($loopDocs);

            foreach ($loopDocs as $indexDocs => $rowDocs) : 
            ?>
            <div class="slider__item filter">
                <img src="<?= $rowDocs['slider-docs-picture'] ?>" alt="">
                <div class="slider-img-bg">
                    <p class="slider-img-bg-text">
                        <?= $rowDocs['name-docs'] ?>
                    </p>
                    <a type="button" class="btn btn-primary slider-img-bg-link" data-bs-toggle="modal" data-bs-target="#doki<?php echo $indexDocs;?>">
                        Нажмите, чтобы посмотреть
                    </a>
                </div>
            </div>

            <?php
            endforeach;
            ?>
        </div>

        <!-- Modals begin -->
        <?php foreach ($loopDocs as $indexDocs => $rowDocs ): ?>
        <div class="modal fade" id="doki<?php echo $indexDocs;?>" tabindex="-1" aria-labelledby="complianceDocs" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="slider-popup slider-popup-1">
                        <?php foreach ($rowDocs['slider-docs-popup'] as $imageIndexDocs => $imageRowDocs) : ?>
                        <div class="slider-popup-item slider-popup-1-item">
                            <img src="<?= $imageRowDocs['slider-docs-popup-picture'] ?>" alt="docs" data-zoom-image="<?= $imageRowDocs['slider-docs-popup-picture'] ?>" class="loupeImage"/>
                        </div>
                        <?php endforeach;?>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach;?>

        <!-- Modals end -->


    </div>  

</section>

我需要在同一页面上制作相同的滑块。我复制并更改ID。

<section class="docs-slide">
    <div class="container docs-slide-container">

        <h1 class="titles docs-slide-title">
            Рекомендательные письма
        </h1>

        <div class="slider">
            <?php
            $loopDocs = CFS()->get('slider-rec-letters');

            function debug($data){
                echo "<pre>";
                var_dump($data);
                echo "</pre>";
            }

            // debug($loopDocs);

            foreach ($loopDocs as $indexRec => $rowDocs) : 
            ?>
            <div class="slider__item filter">
                <img src="<?= $rowDocs['rec-letter-picture'] ?>" alt="">
                <div class="slider-img-bg">
                    <p class="slider-img-bg-text">
                        <?= $rowDocs['rec-letters-name'] ?>
                    </p>
                    <a type="button" class="btn btn-primary slider-img-bg-link" data-bs-toggle="modal" data-bs-target="#rec<?php echo $indexRec;?>">
                        Нажмите, чтобы посмотреть
                    </a>
                </div>
            </div>

            <?php
            endforeach;
            ?>
        </div>

        <!-- Modals begin -->
        <?php foreach ($loopDocs as $indexRec => $rowDocs ): ?>
        <div class="modal fade" id="rec<?php echo $indexRec;?>" tabindex="-1" aria-labelledby="complianceDocs" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="slider-popup slider-popup-1">
                        <?php foreach ($rowDocs['slider-rec-letters-popup'] as $imageIndexDocs => $imageRowDocs) : ?>
                        <div class="slider-popup-item slider-popup-1-item">
                            <img src="<?= $imageRowDocs['rec-letter-picture-popup'] ?>" alt="docs" data-zoom-image="<?= $imageRowDocs['rec-letter-picture-popup'] ?>" class="loupeImage"/>
                        </div>
                        <?php endforeach;?>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach;?>

        <!-- Modals end -->


    </div>  

</section>

因此。但由于某种原因，该网站给出了一个严重错误。问题是什么？

使用 polylang 翻译字符串。根据网上的例子制作的。我究竟做错了什么？这就是我注册行的方式：

add_action('init', 'truemisha_polylang_strings' );
 
function truemisha_polylang_strings() {
 
  if( ! function_exists( 'pll_register_string' ) ) {
    return;
  }
    
  
  pll_register_string(
    'welcome_message', // название строки
    'Уважаемые посетители сайта ТОО «КазМед Экспертиза»!
  Мы рады приветствовать Вас на нашем сайте.
  Здесь Вы получите всю необходимую информацию о нашей Компании.', // сама строка
    'main', // категория для удобства
    true // будут ли тут переносы строк в тексте или нет
  );
}

字符串出现在字符串翻译中

https://isstatic.askoverflow.dev/LmEBa.png

然后我在模板文件中这样输出

<?php echo esc_attr( pll__( 'Уважаемые посетители сайта ТОО «КазМед Экспертиза»! Мы рады приветствовать Вас на нашем сайте. Здесь Вы получите всю необходимую информацию о нашей Компании.' ) ) ?>

这就是我得到按钮的方式

<?php pll_the_languages(array('dropdown'=>1)); ?>

但该网站仍然没有翻译文本。

有一个链接，当您将鼠标悬停时，它应该跟随链接，但不会打开新标签。提前感谢您的回复

悬停在圆圈上不起作用

(https://codepen.io/Veroni1337/pen/wvoXMpQ)

有这样一个模态窗口，当鼠标悬停在 svg 上时，该站点应该可以工作

网站

(https://twsc.kz/index.php/geography/)

我究竟做错了什么？

css中有这样一个模态窗口。如何重新制作它以使其在悬停时工作

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
}
.popup:target {
    opacity: 1;
    visibility: visible;
}




.popup-area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.popup-body {
    min-height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 30px 10px;
    position: relative;
    z-index: 9999;
}
.popup-content {
    background-color: #fff;
    color: #000;
    padding: 30px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 300px;
}
.popup-title {
    font-size: 22px;
    text-align: center;
    font-weight: 600;
    margin-top: 15px;
}
.popup-text {
    font-size: 22px;
    font-weight: 600;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 35px;
}
.popup-close {
    position: absolute;
    right: -50px;
    top: 0;
    font-size: 40px;
    color: #fff;
    text-decoration: none;
}

<a href="#popup" class="popup-link">ffffff
                                <circle cx="581" cy="169" r="3" fill="#F3C644" /></a>

<div id="popup" class="popup">
            <a href="#" class="popup-area"></a>
            <div class="popup-body">
                <div class="popup-content">
                    <a href="#map__kz" class="popup-close">x</a>

                    <div class="popup-title">
                        г.Нур-Султан
                    </div>

                    <ul class="popup-ul">
                        <div class="popup-text">
                            <p>Есильский р-н, пр. Кабанбай </p>
                        </div>

                        <div class="popup-text">
                            <p> Батыра, д.2/6, офис 35</p>
                        </div>
                    </ul>
                </div>
            </div>
        </div>

代码笔