Flexslider vs Materilize debugg.

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>
   
 

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>