I cannot use/access the carousel.js
file – GET http://name.test/js/carousel.js net::ERR_ABORTED 404 (Not Found)
front-page.php
<div class="row">
<div class="col-lg-4">
<div class="carousel_item carousel_item--visible">first post</div>
</div>
<div class="col-lg-4">
<div class="carousel_item">second post</div>
</div>
<div class="col-lg-4">
<div class="carousel_item">third post</div>
</div>
</div>
<div class="carousel_actions">
<button id="carousel_button--prev" aria-label="previous slide">
<
</button>
<button id="carousel_button--next" aria-label="next slide">
>
</button>
</div>
</div>
<script type="text/javascript" src="js/carousel.js"></script>""
JS code:
let slidePosition = 0;
const slides = document.getElementsByClassName('carousel_item');
const totalSlides = slides.length;
document.getElementById('carousel_button--next').addEventListener("click", function() {
moveToNextSlide();
});
document.getElementById('carousel_button--prev').addEventListener("click", function() {
moveToPrevSlide();
});
function moveToNextSlide() {
console.log('next works');
}
function moveToPrevSlide() {
console.log('prev works');
}
functions.php
function load_js(){
wp_enqueue_script('jquery');
wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
wp_enqueue_script('bootstrap');
wp_register_script('carousel', get_template_directory_uri() . '/js/carousel.js');
wp_enqueue_script('carousel');
}
add_action('wp_enqueue_scripts', 'load_js');
file structure
.
├── js
│ ├── bootstrap.min.js
│ └── carousel.js
├── index.php
├── front-page.php
└── functions.php
(there are other files there, only included the important ones for an easier overview)
I’m pretty sure I typed the correct path to the carousel.js file, can anyone enlighten me what’s the problem here?
2
Answers
So if you use Laravel, you need to use webpack.mix.js to integrate your JS
1- In your
front-page.php
file, remove thescript tag
. (i.e<script type="text/javascript" src="js/carousel.js"></script>
). Yourwp_enqueue_script
function would take care of loading it onto the page!2- You don’t need those
wp_register_script
functions either! In yourfunctions.php
file remove them!3- In the
functions.php
file replace the following snippet with your own:These should do the trick for you!
When you load the page, right-click on it and view the source. You should be able to find both
bootstrap
andcarousel
loaded onto the source!Let me know if you could get it to work!