這是我的函式 php
function maxprofessional_scripts() {
wp_enqueue_style( 'maxprofessional-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_enqueue_style( 'maxprofessional-main', get_template_directory_uri() . '/css/main.css' );
wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' );
wp_style_add_data( 'maxprofessional-style', 'rtl', 'replace' );
wp_register_script('app-js', get_template_directory_uri() . '/app.js', false, '1.0', true);
// wp_enqueue_script( 'app-js' );
wp_enqueue_script( 'my_custom_script', get_template_directory_uri() . '/app.js' );
wp_enqueue_script( 'bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js' );
wp_enqueue_script( 'bootstrap-jdelivery', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' );
wp_enqueue_script( 'maxprofessional-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'maxprofessional_scripts' );
我怎么知道它不起作用是因為下面的代碼的輪播（輪播不起作用）
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
這是JS
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
在我的functions.php 中匯入bootstrap js 時我做錯了什么嗎？我非常感謝您的幫助。謝謝你 。是不是我需要在入隊之前注冊它？我很困惑為什么它不起作用
uj5u.com熱心網友回復：
Bootstrap 5 及以上使用data-bs-slide-to和 carousel-item 類，您問題中的代碼是 bootstrap 4 及以下版本的舊代碼。
這是最新版本輪播的鏈接
和您的作業代碼：
$('.multi-item-carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-xs-4"><a href="#1"><img src="https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg" class="img-responsive"></a></div>
</div>
<div class="carousel-item">
<div class="col-xs-4"><a href="#1"><img src="https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg" class="img-responsive"></a></div>
</div>
<div class="carousel-item">
<div class="col-xs-4"><a href="#1"><img src="https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg" class="img-responsive"></a></div>
</div>
<div class="carousel-item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
</div>
<div class="carousel-item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
</div>
<div class="carousel-item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="carousel-item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-bs-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-bs-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/331142.html