slider

public/css/style.css

@@ -79,14 +79,69 @@ h6 {
 
 /* style slider  */
 
-.swiper-wrapper {
-    transition-timing-function: linear;
-    height: 80px;
+.slider{
+    position: relative;
+    height: 26.625rem; 
+    margin: 0 auto;
+    overflow: hidden;
 }
-
-.swiper-slide a img {
-    aspect-ratio: 200 / 300;
-    width: 300px;
+.slide{ 
+    position: absolute;
+    top:0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 1s;
+}
+.slide > img{
+    width: 100%;
     height: auto;
     object-fit: cover;
+}
+button{
+    background: none;
+    border: none;
+}
+button .fas{
+    color: rgba(255, 255, 255, .5);
+}
+.btn-slide{
+    position:absolute;
+    top:50%;
+    z-index: 10;
+
+    height: 5.5rem;
+    width: 5.5rem;
+    cursor: pointer;
+}
+.prev{
+    left:3rem;
+    transform: translate(-50%, -50%);
+}
+.next{
+    right: 3rem;
+    transform: translate(50%, -50%); 
+}
+.dots-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.dot{
+    width: 25px;
+    height: 5px;
+    margin: 15px 5px;
+    border-radius: .5rem;
+    background: rgba(39,39,39, .5);
+    cursor: pointer;
+}
+.dot.active{
+background:#272727;
+}
+
+i{
+    font-size: 30px;
 }
\ No newline at end of file

public/js/slider.js

+function Slider() {
+    const carouselSlides = document.querySelectorAll(".slide");
+    const btnPrev = document.querySelector(".prev");
+    const btnNext = document.querySelector(".next");
+    const dotsSlide = document.querySelector(".dots-container");
+    let currentSlide = 0;
+    let intervalId = null;
+    const intervalDuration = 5000;
+  
+    const activeDot = function (slide) {
+      document
+        .querySelectorAll(".dot")
+        .forEach((dot) => dot.classList.remove("active"));
+      document
+        .querySelector(`.dot[data-slide="${slide}"]`)
+        .classList.add("active");
+    };
+    activeDot(currentSlide);
+  
+    const changeSlide = function (slides) {
+      carouselSlides.forEach(
+        (slide, index) =>
+          (slide.style.transform = `translateX(${100 * (index - slides)}%)`)
+      );
+    };
+    changeSlide(currentSlide);
+  
+    const startSlideInterval = function () {
+      intervalId = setInterval(function () {
+        currentSlide++;
+        if (carouselSlides.length - 1 < currentSlide) {
+          currentSlide = 0;
+        }
+        changeSlide(currentSlide);
+        activeDot(currentSlide);
+      }, intervalDuration);
+    };
+    startSlideInterval();
+  
+    const stopSlideInterval = function () {
+      clearInterval(intervalId);
+    };
+  
+    dotsSlide.addEventListener("click", function (e) {
+      if (e.target.classList.contains("dot")) {
+        const slide = e.target.dataset.slide;
+        changeSlide(slide);
+        activeDot(slide);
+        stopSlideInterval();
+        setTimeout(startSlideInterval, 5000);
+      }
+    });
+  
+    btnNext.addEventListener("click", function () {
+      currentSlide++;
+      if (carouselSlides.length - 1 < currentSlide) {
+        currentSlide = 0;
+      }
+      changeSlide(currentSlide);
+      activeDot(currentSlide);
+      stopSlideInterval();
+      setTimeout(startSlideInterval, 5000);
+    });
+    btnPrev.addEventListener("click", function () {
+      currentSlide--;
+      if (0 >= currentSlide) {
+        currentSlide = 0;
+      }
+      changeSlide(currentSlide);
+      activeDot(currentSlide);
+      stopSlideInterval();
+      setTimeout(startSlideInterval, 5000);
+    });
+  
+    const slider = document.querySelector(".slider");
+    slider.addEventListener("mouseenter", function () {
+      stopSlideInterval();
+    });
+    slider.addEventListener("mouseleave", function () {
+      startSlideInterval();
+    });
+  }
+  
+  Slider();
+  
\ No newline at end of file

templates/salles/show.html.twig

@@ -13,22 +13,26 @@
     <p class="mx-10 w-4/5">{{ salle.description }}</p>
 
     <section>
-        <h4 class="bg-[#326273] py-4 text-[#FFFFFF] rounded-r-lg my-8 w-96 pl-8 pr-4 text-3xl ">Concert à venir dans cette salle</h4>
-        <article class="swiper">
-            <div class="swiper-wrapper">
-                {% for concerts in salle.concerts %}
-                    <div class="swiper-slide">
-                        <a href="{{ path('app_concerts_show', {'id': concerts.id}) }}">
-                            <img src="{{ concerts.img }}" >
-                        </a>
-                    </div>
-                {% endfor %}
+    <h4 class="bg-[#326273] py-4 text-[#FFFFFF] rounded-r-lg my-8 w-96 pl-8 pr-4 text-3xl ">Concert à venir dans cette salle</h4>
+    <div class="slider">
+        {% for concerts in salle.concerts %}
+            <div class="slide">
+                <a href="{{ path('app_concerts_show', {'id': concerts.id}) }}"><img src="{{ concerts.img }}" ></a>
             </div>
-        </article>
-        
-        
-    </section>
+        {% endfor %}
+        <button class="btn-slide prev"><i class="bi bi-arrow-left-circle-fill"></i></button>
+        <button class="btn-slide next"><i class="bi bi-arrow-right-circle-fill"></i></button>
+    </div>
+    <div class="dots-container">
+        {% for i in 0..salle.concerts|length-1 %}
+            <span class="dot {% if i == 0 %}active{% endif %}" data-slide="{{ i }}"></span>
+        {% endfor %}
+    </div>
+</section>
+
+
 
+    
     <section class="flex flex-col">
         <h4 class="bg-[#326273] py-4 text-[#FFFFFF] rounded-r-lg my-8 w-96 pl-8 pr-4 text-3xl">Commentaires</h4>
         {% for commentaires in salle.commentaires %}
@@ -53,33 +57,6 @@
     {{ include('salles/_delete_form.html.twig') }}
 
 </main>
+<script defer src="{{ asset('js/slider.js') }}"></script>
 
-<script>
-    const swiper = new Swiper('.swiper', {
-        autoplay: {
-            delay: 0,
-            disableOnInteraction: false, 
-            reverseDirection: true, 
-        },
-        loop: true,
-        spaceBetween: 10,
-        slidesPerView: 7,
-        speed: 1700,
-        allowTouchMove: false,
-    });
-
-    swiper.el.addEventListener("mouseenter", () => {
-            swiper.autoplay.stop();
-            swiper.allowTouchMove = true;
-        });
-
-        swiper.el.addEventListener("mouseleave", () => {
-            swiper.autoplay.start();
-            swiper.allowTouchMove = false;
-        });
-
-        swiper.on("click", () => {
-            console.log(swiper.clickedIndex);
-        });
-</script>
 {% endblock %}
\ No newline at end of file