owl-carousel slider does not work in my web application - php

Question

i have 2 owl carousel in my page. my problem is one works perfectly but another one. i am using php codeigniter. how to resolve this..i have no idea.how to fix.
1. <script> $(document).ready(function(){ $('#owl-carousel1').owlCarousel({
loop:true,
items:3,
margin:9,
autoplay:true,
autoplayHoverPause:true,
nav:true,
autoplayTimeout:1000,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:3, autoplay:true,
nav:true,
loop:true, slideBy:3,
}
} }); }); </script>
<!----view page---->
<div class="row" style="background-color:#00263A">
<div class="container" style="margin-bottom:50px; margin-top:50px" >
<div class="owl-carousel" id="owl-carousel2" >
<?php
foreach($featuredJobs as $fjobs){ ?> <?php if($fjobs->attachment_url != '' ) {?>
<div class="item"><img src="<?php echo base_url(); ?>files/job_attachment/<?php echo $fjobs->attachment_url;?>"
width="250" height="250" class="responsive" />
<h5><?php echo $fjobs->job_name;?></h5>
<span><?php echo $fjobs->job_categories;?></span> <h6><strong><?php echo
'$'.$fjobs->budget_min.'- $'.$fjobs->budget_max;?></strong></h6>
<a href="<?php if(isset($loggedInUser->id) AND $loggedInUser->id != ''){echo site_url("users/login");}else {
echo site_url("job/createBid/".$fjobs->id);}?>"> <button
type="button" class="btn btn-primary pull-left" title=""><i
class="fa fa-gavel"></i>Bid For This Job</button></a>
</div>
<?php } } ?>
</div>
</div>
</div>

Answer 1

Alright, let me give you some insight. Always cross check your code, your Javascript vs your HTML.
Your first line of your Javascript is:
$(document).ready(function(){ $('#owl-carousel1').owlCarousel({
Yet your HTML is as followed
<div class="owl-carousel" id="owl-carousel2">
See your error already? You refer to owl-carousel2 in the HTML, while your Javascript seeks for instance #owl-carousel1. I leave to you then if you want to change your Javascript or your HTML.