owl-carousel滑块在我的Web应用程序中不起作用

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.