如何解决Swiper js 在 wordpress 中不起作用,javascript 文件不起作用
js 文件不起作用,尽管它包含在标题中。我不明白如何正确设置。 https://i.stack.imgur.com/ZI8lj.png
<div id="swiper-container">
<div class="swiper-wrapper">
<?PHP
$main = get_field('main',7);
$rows = $main['slider-main'];
if( $rows ) {
foreach( $rows as $row ) {
echo '<div class="swiper-slide">';
echo '<li style="background-image: url(' .$row['slider-main-img']. ')">';
echo '<h3 class="slider-main-h3">' .$row['slider-main-text-h3']. '</h3>';
echo '<h2 class="slider-main-h2">' .$row['slider-main-text-h2']. '</h2>';
echo '<a href="' .$row['slider-main-href']. '" class="btn-more"> ' .$row['slider-main-text-button']. ' </a>';
echo '<style type="text/css">
.btn-more { color: ' .$row['slider-main-button-collor']. ';}
.slider-main-h3 { color: ' .$row['slider-main-text-h3-collor']. ';}
.slider-main-h2 { color: ' .$row['slider-main-text-h2-collor']. ';}
</style>';
echo '</li>';
echo '</div>';
}
}
?>
</div>
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
函数 mythem_enqueue_style() { wp_deregister_script('jquery'); wp_register_script(' jquery ',get_template_directory_uri() .'/js/jquery-3.6.0.min.js',false,null,true); wp_enqueue_script('jquery');
wp_enqueue_script( 'swiper-script',get_template_directory_uri() . '/js/swiper-bundle.min.js',array(),true);
wp_enqueue_script( 'swiper-script-setings',get_template_directory_uri() . '/js/swiper-main.js',array('swiper-script'),true);
wp_enqueue_style( 'swiper-style',get_template_directory_uri(). '/css/swiper-bundle.min.css');
wp_enqueue_style( 'style-theme',get_template_directory_uri(). '/css/style.css');
}
add_action( 'wp_enqueue_scripts','mythem_enqueue_style' );
.swiper-container {
width: 100% !important;
height: 100% !important;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-Box;
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
-webkit-Box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-Box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。