mates, I can’t integrate Owl Carousel into my WordPress site. I don’t see a carousel on my page. Thanks!
My functions.php code:
function templatename_add_owlcarousel() {
wp_enqueue_script ( 'jquery' );
wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/assets/js/owl.carousel.min.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/assets/js/owl.carousel-init.js', array( 'jquery' ), false, true );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/assets/css/owl.carousel.css' );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/assets/css/owl.theme.default.min.css' );
}
add_action( 'wp_enqueue_scripts', 'templatename_add_owlcarousel' );
owl.carousel.init.js code:
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
index.php part with a code:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
<a class="btn play">Autoplay</a>
<a class="btn stop">Stop</a>
</div>
My file structure is:
templatename/assets/css/
- owl.carousel.css
- owl.carousel.min.css
- owl.theme.default.min.css
templatename/assets/js/
- owl.carousel.min.js
- owl.carousel.js
- owl.carousel-init.js
Where is your footer.php code? Didn`t you forget to put your initial code into your footer.php file?
the problem is you put the same handle name for the both css file