Plugin - Owl carousel slider

Question

//setting, configuration example
$('.owl-carousel').owlCarousel({
    loop: false,
    margin: 10,
    nav: true,
    lazyLoad: true,
    navText: ['<i class="ion-ios-arrow-left"></i>','<i class="ion-ios-arrow-right"></i>'],
    dots: false,
    items: 3,
    slideBy: 3,
    responsive:{
    0:{
        items:1,
        slideBy: 1
    },
    321:{
        items:2,
        slideBy: 2
    },
    600:{
        items:3,
        slideBy: 3
    },
    1000:{
        items:3,
        slideBy: 3
    }
    }
})

 

Answer 1

// owl carousel breakpoints responsive
$('.owl-carousel').owlCarousel({
  stagePadding: 50,
  loop:true,
  items: 5,
  dots: false,
  nav:true,
  responsive:{
    0:{
        items:1.4,
        stagePadding: 20
    },
    475: {
        items: 2,
        slideBy: 2, 
        stagePadding: 35
    },
    768:{
        items:3,
        slideBy: 3,
        stagePadding: 35
    },
    992: {
        items: 4,
        slideBy: 4, 
        stagePadding: 65,
        smartSpeed: 100
    },
    1200:{
        items:5,
        slideBy: 5, 
        stagePadding: 35,
        smartSpeed: 100
    }
  }
})

 

Answer 2

$('.featured-properties .owl-carousel').owlCarousel({
    loop:true,
    margin: 5,
    nav:true,
    dots: false,
    autoplay:true,
    autoplayTimeout:1500,
    autoplayHoverPause:true,
    navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
    responsive:{
        0:{
            items:2
        },
        600:{
            items:3
        },
    }
})

 

Answer 3

For PHP loop

<div class="owl-carousel owl-theme">
  <?php
  foreach($featuredProperties->property as $key=>$property):
    if ($key<=$featuredPropertiesCount):
  ?>
  <div class="col-md-4 item featured-properties-col">
    <div class="card-content-full">
      <div class="detail-similar-prop-content">
          <a target="_blank" href="/listing/<?php echo $property->url_s; ?>">
          <div class="card-image">
            <div class="item-list-type">
              <div class="list-type"><?php echo strtoupper($property->type_s); ?></div>
            </div>
            <div class="item-exclusive">
              <div class="exclusive">FEATURED</div>
            </div>
            <img class="prop-image" src="<?php echo $property->field_prop_images_txt[0]; ?>" alt="Title" />
          </div>
            <h4 class="detail-similar-prop-title"><?php echo $property->title_t; ?></h4>
          </a>
        <div class="detail-similar-prop-location">
          <p class="card-address address-clamp-short-list">
            <?php echo $property->district_s_lower.', '.$property->state_s_lower; ?>
          </p>
        </div>
        <div class="detail-similar-prop-agent">
          <a class="agent-link" target="_blank" href="/agent/<?php echo $property->uid_i; ?>"><?php echo 'by '.$property->agent_name_s_lower; ?></a>
        </div>
        <div class="detail-similar-prop-price"><?php echo 'RM '.number_format($property->field_prop_asking_price_d); ?></div>
        <div class="detail-similar-prop-details">
            <?php 
              if(isset($property->field_prop_bedrooms_i)){
                if($property->field_prop_bedrooms_i === 0){
                  echo "<b>Studio</b>"; 
                } else {
                  echo "<b>".$property->field_prop_bedrooms_i."</b> beds"; 
                }
              }else{
                echo "<b>-</b> beds"; 
              }
            ?> |
          <b> <?php echo (isset($property->field_prop_bathrooms_i)?$property->field_prop_bathrooms_i:'-'); ?></b> bath |
          <b> <?php echo $property->field_prop_built_up_d ?></b> <?php echo $property->field_prop_built_up_unit_s_lower ?>
        </div>
      </div>
    </div>
  </div>
<?php endif;
  endforeach;?>
</div>

 

With the JS

<script>
  (function($){
    $('.featured-properties .owl-carousel').owlCarousel({
      loop:true,
      margin: 5,
      nav:true,
      dots: false,
      autoplay:true,
      autoplayTimeout:1500,
      autoplayHoverPause:true,
      navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
      responsive:{
        0:{
            items:2
        },
        600:{
            items:3
        },
      }
  })
  })(jQuery);
</script>