modify owl carousel slider for mobile view

philipherlambang · Sep 25, 2017 · 86b6748 · 86b6748
1 parent 2d99ab9
commit 86b6748
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -69,7 +69,6 @@
 - terms and conditions
 - privacy policy
 - job details
-- pagination
 - image resizer (cloudinary)
 - share buttons
 - off canvas menu
@@ -90,11 +89,14 @@
 - job list
 - tag in homepage use owl carousel as well
 - edit tipue search content. try to search: sucicakes, sosis solo, kimi, risotto
+- pagination
 
 
 
 ### update September 25
 - Add featured merchant,
 - Update styling for cart in mobile view,
 - Using cloudinary for transformation in homepage, about and merchant guide
+- add pagination
+- add load more button in homepage
 
diff --git a/css/kimi.css b/css/kimi.css
@@ -1585,6 +1585,10 @@ ul.pagination li.current a{
  font-size:13px;
  }
 
+ .mobile-full-width-slider{
+ padding: 0;
+ }
+
 }
 
 /* large desktop */

diff --git a/index.html b/index.html
@@ -301,24 +301,24 @@ <h2 class="default-userProductList-InfoBar-title text-center"><i class="fa fa-he
 
  <div class="row">
  <h2 class="default-userProductList-InfoBar-title text-center"><i class="fa fa-heart-o" aria-hidden="true"></i> This Week Favoourites</h2>
- <!--<div class="col-sm-6 col-md-4" data-behavior="sample_code">-->
- <!--<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">-->
- <!--<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329237/seafood_rd0j5y.jpg" alt="Seafood">-->
- <!--</a>-->
- <!--<div class="caption box" style="background: white; padding: 10px;">-->
- <!--<h3>Seafood</h3>-->
- <!--<div class="row">-->
- <!--<div class="col-sm-8 col-xs-6">-->
- <!--<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>-->
- <!--<span class="min-order">10 pcs min order</span>-->
- <!--</div>-->
-
- <!--<div class="col-sm-4 col-xs-6">-->
- <!--<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>-->
- <!--</div>-->
- <!--</div>-->
- <!--</div>-->
- <!--</div>-->
+ <div class="col-sm-6 col-md-4" data-behavior="sample_code">
+ <a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
+ <img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329237/seafood_rd0j5y.jpg" alt="Seafood">
+ </a>
+ <div class="caption box" style="background: white; padding: 10px;">
+ <h3>Seafood</h3>
+ <div class="row">
+ <div class="col-sm-8 col-xs-6">
+ <p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>
+ <span class="min-order">10 pcs min order</span>
+ </div>
+
+ <div class="col-sm-4 col-xs-6">
+ <button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>
+ </div>
+ </div>
+ </div>
+ </div>
 
  <div class="col-sm-6 col-md-4" data-behavior="sample_code">
  <a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
@@ -340,24 +340,24 @@ <h3>Lemon Risotto</h3>
  </div>
  </div>
 
- <!--<div class="col-sm-6 col-md-4" data-behavior="sample_code">-->
- <!--<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">-->
- <!--<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329233/seafood_2_vcuolq.jpg" alt="Seafood">-->
- <!--</a>-->
- <!--<div class="caption box" style="background: white; padding: 10px;">-->
- <!--<h3>Seafood</h3>-->
- <!--<div class="row">-->
- <!--<div class="col-sm-8 col-xs-6">-->
- <!--<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>-->
- <!--<span class="min-order">5 pcs min order</span>-->
- <!--</div>-->
-
- <!--<div class="col-sm-4 col-xs-6">-->
- <!--<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>-->
- <!--</div>-->
- <!--</div>-->
- <!--</div>-->
- <!--</div>-->
+ <div class="col-sm-6 col-md-4" data-behavior="sample_code">
+ <a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
+ <img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329233/seafood_2_vcuolq.jpg" alt="Seafood">
+ </a>
+ <div class="caption box" style="background: white; padding: 10px;">
+ <h3>Seafood</h3>
+ <div class="row">
+ <div class="col-sm-8 col-xs-6">
+ <p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>
+ <span class="min-order">5 pcs min order</span>
+ </div>
+
+ <div class="col-sm-4 col-xs-6">
+ <button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>
+ </div>
+ </div>
+ </div>
+ </div>
 
  <div class="col-sm-6 col-md-4">
  <a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
@@ -398,24 +398,24 @@ <h3>Nasi Bakar Ayam Woku</h3>
  </div>
  </div>
 
- <!--<div class="col-sm-6 col-md-4" data-behavior="sample_code">-->
- <!--<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">-->
- <!--<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329234/cake_uv41o2.jpg" alt="cake">-->
- <!--</a>-->
- <!--<div class="caption box" style="background: white; padding: 10px;">-->
- <!--<h3>Party Cake</h3>-->
- <!--<div class="row">-->
- <!--<div class="col-sm-8 col-xs-6">-->
- <!--<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>-->
- <!--<span class="min-order">10 pcs min order</span>-->
- <!--</div>-->
-
- <!--<div class="col-sm-4 col-xs-6">-->
- <!--<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>-->
- <!--</div>-->
- <!--</div>-->
- <!--</div>-->
- <!--</div>-->
+ <div class="col-sm-6 col-md-4" data-behavior="sample_code">
+ <a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
+ <img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329234/cake_uv41o2.jpg" alt="cake">
+ </a>
+ <div class="caption box" style="background: white; padding: 10px;">
+ <h3>Party Cake</h3>
+ <div class="row">
+ <div class="col-sm-8 col-xs-6">
+ <p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>
+ <span class="min-order">10 pcs min order</span>
+ </div>
+
+ <div class="col-sm-4 col-xs-6">
+ <button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>
+ </div>
+ </div>
+ </div>
+ </div>
 
 
  </div>
@@ -430,7 +430,7 @@ <h3>Nasi Bakar Ayam Woku</h3>
 </div><!-- /.container -->
 
 <div class="clearfix maya-tiny-padding"></div>
-<div class="container">
+<div class="container mobile-full-width-slider">
  <h2 class="default-userProductList-InfoBar-title text-center"><i class="fa fa-heart-o" aria-hidden="true"></i> Featured Merchant</h2>
  <div class="featured-merchant-slider owl-carousel owl-theme">
  <div class="item">

diff --git a/js/kimi.js b/js/kimi.js
@@ -69,7 +69,7 @@
  dots:false,
  responsive:{
  0:{
- items:3
+ items:3.5
  },
  600:{
  items:4
@@ -81,14 +81,14 @@
  });
 
 
- // tags / categories carousel
+ // featured channel carousel
  $('.featured-merchant-slider').owlCarousel({
  loop:true,
  margin:10,
  dots:false,
  responsive:{
  0:{
- items:3
+ items:3.5
  },
  600:{
  items:6