Initialized flex slider

app/views/viewRealEstate.ejs

@@ -1,12 +1,14 @@
-<div class="flexslider">
-  <ul class="slides">
-    <% for (const photoUrl of realEstatePhotosUrls) { %>
-    <li>
-      <img src=<%= photoUrl %> alt=""/>
-    </li>
-    <% } %>
-  </ul>
-</div>
+<section class="slider">
+  <div class="flexslider" style="direction:rtl">
+    <ul class="slides">
+      <% for (const photoUrl of realEstatePhotosUrls) { %>
+        <li>
+          <img src=<%= photoUrl %> alt=""/>
+        </li>
+        <% } %>
+    </ul>
+  </div>
+</section>
 
 
 <br>
@@ -57,10 +59,14 @@
   </div>
 </div>
 
-<script type="text/javascript" charset="utf-8">
-  $(window).load(function() {
-    $('.flexslider').flexslider();
-  });
+<script type="text/javascript">
+  // Can also be used with $(document).ready()
+       $(window).load(function() {
+         $('.flexslider').flexslider({
+           animation: "slide",
+           rtl: true
+         });
+       });
 </script>
 
 <script>
@@ -108,7 +114,7 @@
 
 </script>
 <script
-  src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.API_MAP_KEY %>&language=bs&libraries=places&callback=initMap"
+  src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.GOOGLE_MAP_KEY %>&language=bs&libraries=places&callback=initMap"
   async
   defer
 ></script>