CODEWITHSUNDEEP
phpjqueryhtmlcodeigniter-3owl-carousel
user9437856
user9437856

Reputation: 2388

Display owl-carousel slider depending upon the total number of records?

I am using owl carousel 2 plugins to display the slider. It's working with static but how can I set a dynamic?

I mean, for manually I set 3 then I am getting the 3 sliders but how do I set dynamically? In $getTotalnumber, I am getting the records from the database. Sometimes I am getting total records 2,3 and 4 So how do I repeat the item? Now I am getting 2 records from the database and my slider display 3 it's repeating. First one item is repeating.

<div class="owl-carousel owl-theme">
  <?php if($getTotalnumber){foreach ($getTotalnumber as $num) {?>
    <div class="item"><h4><?php echo $num->content;?>></h4></div>
  <?php }}?>
</div>

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  mouseDrag: false,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 3
    }
  }
});

I am getting the output( Text are just an example)

where are you?
How are you?
Where are you?// notice that this is repeating from first one

I need an output 

where are you?
How are you?

Upvotes: 0

Views: 1102

Answers (1)

Hasta Dhana
Hasta Dhana

Reputation: 4719

So you just only need to mention how many items to show in your Owl Carousel config : 

<?php
if (!empty($getTotalnumber)) { ?>
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
mouseDrag: false,
responsive: {
    0: {
    items: 1
    },
    600: {
    items: <?php echo count($getTotalnumber); ?>
    },
    1000: {
    items: <?php echo count($getTotalnumber); ?>
    }
}
});
<?php } ?>

Upvotes: 1

Related Questions