CodeIgniter Forums

Full Version: Codeigniter Owl Carousel
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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.
PHP Code:
<!-- Owl carousel block starts -->
    <!-- 
Owl navigation -->
    <
div class="owl-nav">
        <
class="owl-nav-prev"><class="fa fa-chevron-left"></i></a>
        <
class="owl-nav-next"><class="fa fa-chevron-right"></i></a>
    </
div>
    <!-- 
Change values of data-itemsdata-auto-playdata-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 -->
        
        <?
php
            $this
->load->helper('url');
            
$path base_url() . 'img/gallery/small/';
            
$images = array( '1.jpg''2.jpg''3.jgp''4.jpg''5.jpg''6.jpg''7.jpg''8.jpg');
        
?>
        
        <?php foreach ($images as $image) : ?>
            <div class="owl-content"> 
                <?php 
                    $imagefile 
$path $image;
                    echo 
anchor$imagefile'<img src="' $imagefile 
                    
'" alt="" class="img-responsive img-thumbnail" />''class="lightbox"');
                
?>
                <h4><a href="#">Some heading here now</a></h4>
                <small><i class="fa fa-calendar"></i>&nbsp; 25-2-2014 &nbsp; <i class="fa fa-comments"></i>&nbsp; 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>            
        <?php endforeach; ?>
    </div>
<!-- Owl carousel block ends -->