can someone help me make this work, i tried to make the carousel with ci, but it loads all the "posts" in the same istead of separated divs, it is possible to make that with the follow codes? or it must be made on other way.
Carousel Desired:
Code:
<!-- Owl carousel block starts -->
<!-- Owl navigation -->
<div class="owl-nav">
<a class="owl-nav-prev"><i class="fa fa-chevron-left"></i></a>
<a class="owl-nav-next"><i class="fa fa-chevron-right"></i></a>
</div>
<!-- Change values of data-items, data-auto-play, data-pagination & data-single-item based on your needs -->
<div class="owl-carousel" data-items="4" data-auto-play="true" data-pagination="false" data-single-item="false">
<!-- Carousel item -->
<div class="owl-content">
<a href="img/gallery/small/1.jpg" class="lightbox"><img src="img/gallery/small/1.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
<div class="owl-content">
<a href="img/gallery/small/2.jpg" class="lightbox"><img src="img/gallery/small/2.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
<div class="owl-content">
<a href="img/gallery/small/3.jpg" class="lightbox"><img src="img/gallery/small/3.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
<div class="owl-content">
<a href="img/gallery/small/4.jpg" class="lightbox"><img src="img/gallery/small/4.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
<div class="owl-content">
<a href="img/gallery/small/5.jpg" class="lightbox"><img src="img/gallery/small/5.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
<div class="owl-content">
<a href="img/gallery/small/6.jpg" class="lightbox"><img src="img/gallery/small/6.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
<div class="owl-content">
<a href="img/gallery/small/7.jpg" class="lightbox"><img src="img/gallery/small/7.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
<div class="owl-content">
<a href="img/gallery/small/8.jpg" class="lightbox"><img src="img/gallery/small/8.jpg" alt="" class="img-responsive img-thumbnail" /></a>
<h4><a href="#">Some heading here now</a></h4>
<small><i class="fa fa-calendar"></i> 25-2-2014 <i class="fa fa-comments"></i> 24 Comments</small>
<p>Ad vegan excepteur butcher vice lomo. Leggings occaecat raw denim aesthetic. </p>
<a href="#" class="btn btn-color btn-xs">Read more</a>
</div>
</div>
<!-- Owl carousel block ends -->
code that i've tried
Code:
<div class="owl-carousel" data-items="4" data-auto-play="true" data-pagination="false" data-single-item="false">
<div class="owl-content">
<ul class="list-unstyled">
<?php
foreach ($query->result() as $post) {
?>
<li class="col-md-2 col-sm-6 col-xs-12">
<!-- Image -->
<a href="<?php echo post_detail_url($post);?>"><img class="img-responsive img-thumbnail" src="<?php echo get_featured_photo_by_id($post->featured_img);?>" alt="<?php echo get_post_data_by_lang($post,'title');?>" /></a>
<!-- Heading -->
<h4><a href="<?php echo post_detail_url($post);?>"><?php echo get_post_data_by_lang($post,'title');?></a></h4>
<div class="price">
<?php
$address = get_post_data_by_lang($post,"address");
$full_address = get_formatted_address($address, $post->city, $post->state, $post->country, $post->zip_code);
?>
<strong><?php echo lang_key('address');?></strong>:<br> <?php echo $full_address; ?>
</div>
<div class="clearfix"></div>
</li>
<?php
}
?>
</ul>
</div>
</div>
hope you guys can help me.
if i have to do with all those divs on "desired carousel" its possible to do like this:
<?php
$CI = get_instance();
$CI->load->database();
$limit = 6;
$CI->db->order_by('id','RANDOM');
$query = $CI->db->get_where('posts',array('status'=>1,'featured'=>1),$limit,0);
$query2 = $CI->db->get_where('posts',array('status'=>1,'featured'=>1),$limit,0);
$query3 = $CI->db->get_where('posts',array('status'=>1,'featured'=>1),$limit,0);
?>
but avoid duplicates?
sorry for so namy newbie questions.
