From 2f73c647206808ea104ac420fd0b48ae11c5f483 Mon Sep 17 00:00:00 2001
From: Lucio Vignotto <luciovignotto@MacBook-Pro-di-Lucio.local>
Date: Sat, 18 Jul 2020 11:05:41 +0200
Subject: [PATCH] #Added Slick instead of Bootstrap's Carousel

---
 Src/profilo.html | 40 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/Src/profilo.html b/Src/profilo.html
index dd4b12d..9744d12 100644
--- a/Src/profilo.html
+++ b/Src/profilo.html
@@ -7,7 +7,8 @@
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
-
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
+    <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
     <title>Profilo di ...</title>
     <style>
         #mainbody{
@@ -188,7 +189,15 @@
                         <h3 class="text-center">FILM PREFERITI</h3>
                     </div>
                     <div class="card mb-3 personalprofile">
-                        <div id="carouselfavorite" class="carousel slide mx-auto" data-ride="carousel">
+                        <div class="multiple-items">
+                            <div><img src="https://image.tmdb.org/t/p/w1280/ftavpq2PJn5pyo5opJEmj8QleKD.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/imzvb941su6uhQ158GGurk7vF28.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/or06FN3Dka5tukK1e9sl16pB3iy.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/eSkjK4kctyrWpFhxl35GPvSs6tI.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/e1nWfnnCVqxS2LeTO3dwGyAsG2V.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/e0B6i48kxdRkMcK4tR4YNfXGWOc.jpg" class="img-fluid" alt="..."></div>
+                        </div>
+                        <!-- <div id="carouselfavorite" class="carousel slide mx-auto" data-ride="carousel">
                             <ol class="carousel-indicators">
                               <li data-target="#carouselfavorite" data-slide-to="0" class="active"></li>
                               <li data-target="#carouselfavorite" data-slide-to="1"></li>
@@ -219,13 +228,21 @@
                               <span class="carousel-control-next-icon" aria-hidden="true"></span>
                               <span class="sr-only">Next</span>
                             </a>
-                          </div>
+                          </div> -->
                     </div>
                     <div class="card-header card-comments">
                         <h3 class="text-center">DA GUARDARE</h3>
                     </div>
                     <div class="card mb-3 personalprofile">
-                        <div id="carouselExampleCaptions" class="carousel slide mx-auto" data-ride="carousel">
+                        <div class="multiple-items">
+                            <div><img src="https://image.tmdb.org/t/p/w1280/ftavpq2PJn5pyo5opJEmj8QleKD.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/imzvb941su6uhQ158GGurk7vF28.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/or06FN3Dka5tukK1e9sl16pB3iy.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/eSkjK4kctyrWpFhxl35GPvSs6tI.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/e1nWfnnCVqxS2LeTO3dwGyAsG2V.jpg" class="img-fluid" alt="..."></div>
+                            <div><img src="https://image.tmdb.org/t/p/w1280/e0B6i48kxdRkMcK4tR4YNfXGWOc.jpg" class="img-fluid" alt="..."></div>
+                        </div>
+                        <!-- <div id="carouselExampleCaptions" class="carousel slide mx-auto" data-ride="carousel">
                             <ol class="carousel-indicators">
                               <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                               <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
@@ -256,8 +273,9 @@
                               <span class="sr-only">Next</span>
                             </a>
                           </div>
-                    </div>
+                    </div> -->
                 </div>
+            </div>
                 <div class="col-lg-4 mr-0">
                     <div class="isoffline mb-3">
                         Profilo Offline
@@ -320,8 +338,20 @@
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
     <script src="./assets/js/changetheme.js"></script>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script type="text/javascript">
+         $(document).ready(function(){
+      $('.multiple-items').slick({
+          arrows:true,
+        infinite: true,
+  slidesToShow: 3,
+  slidesToScroll: 3
+      });
+    });
+      </script>
 </body>
 </html>
\ No newline at end of file