From 54d9822fc85456893f2f3454e2a848a4b1f21afa Mon Sep 17 00:00:00 2001
From: Naida Vatric <naida.dozic@gmail.com>
Date: Tue, 3 Mar 2020 17:02:20 +0100
Subject: [PATCH] Flexslider vs Materilize debugg.

---
 app/public/custom-flexslider.css |  0
 app/views/layout.ejs             |  3 +-
 app/views/viewRealEstate.ejs     | 55 ++++++++++++++++++++++++++++----
 3 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 app/public/custom-flexslider.css

diff --git a/app/public/custom-flexslider.css b/app/public/custom-flexslider.css
new file mode 100644
index 0000000..e69de29
diff --git a/app/views/layout.ejs b/app/views/layout.ejs
index ae3c9e5..afeebfa 100644
--- a/app/views/layout.ejs
+++ b/app/views/layout.ejs
@@ -20,8 +20,9 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="/assets/main.css">
   <link rel="stylesheet" href="/assets/segment.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.css" type="text/css" media="screen" /> 
+ <link rel="stylesheet" href="/assets/custom-flexslider.css">
 
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.css" type="text/css" media="screen" />
   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider.js"></script>
   
 
diff --git a/app/views/viewRealEstate.ejs b/app/views/viewRealEstate.ejs
index 9112365..2aa8e45 100644
--- a/app/views/viewRealEstate.ejs
+++ b/app/views/viewRealEstate.ejs
@@ -8,9 +8,7 @@
   </div>
 </div>
 
-
-
-<section class="slider">
+<!-- <section class="slider">
   <div class="flexslider" >
     <ul class="slides">
       <% for (const photoUrl of realEstatePhotosUrls) { %>
@@ -20,8 +18,29 @@
     <% } %>
     </ul>
   </div>
-</section>
-
+</section> -->
+<!-- <div class="carousel carousel-slider">
+  <div class="carousel-fixed-item center clearfix">
+    <a id="carousel-prev" class="movePrevCarousel btn waves-effect left">button</a>
+    <a id="carousel-next" class="moveNextCarousel btn waves-effect right">button</a>
+  </div>
+  <% for (const photoUrl of realEstatePhotosUrls) { %>
+  <a class="carousel-item" href="#one!"><img src=<%= photoUrl %>></a>
+  <% } %>
+</div> -->
+<div class="carousel carousel-slider">
+  <div class="carousel-fixed-item center">
+      <a class="btn next"></a>
+      <a class="btn previous"></a>
+  </div>
+  <% for (const photoUrl of realEstatePhotosUrls) { %>
+  <div class="carousel-item">
+    <div class="col m3 s12">
+      <img src=<%= photoUrl %> class="responsive-img" />
+    </div>
+  </div>
+  <% } %>
+</div>
 <br/>
 <br>
 <div class="row col s12">
@@ -74,14 +93,36 @@
 <script type="text/javascript">
        $(window).load(function() {
    
-            $('.flexslider').flexslider({
+         /*   $('.flexslider').flexslider({
            animation: "slide",
           
            smoothHeight: true
          });
           
-       
+         $('.carousel.carousel-slider').carousel({
+         fullWidth: true,
+         indicators: true
+          });
+          $('#carousel-next').on('touchstart', function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          $('#carouselFirst').carousel('next');
+          });
+
+          $('#carousel-prev').on('touchstart', function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          $('#carouselFirst').carousel('prev');
+          }); */
          
+          $('.carousel.carousel-slider').carousel();
+
+  $('.next').click(function() {
+    $('.carousel.carousel-slider').carousel('next');
+  });
+  $('.prev').click(function() {
+    $('.carousel.carousel-slider').carousel('prev');
+  });
        });
 </script>