<div class="slider-container">
  <div class="page-width">

{% for block in section.blocks %}
            
  <div class="slide fade">
    
    <div class="slide-content">
      <div class="client_profile"><img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt }}" ></div>
      <h3 class="slide-title">{{ block.settings.title }} <span> - {{ block.settings.client_info }} </span></h3>
      {{ block.settings.answer }}
    
    </div>
 
  </div>
 
{% endfor %}

  <!-- Next and previous buttons -->
  <div class="slider-nav">
    <a class="slider-nav-btn" onclick="plusSlides(-1)">
      <ion-icon name="caret-back-outline"></ion-icon>
    </a>
    <a class="slider-nav-btn" onclick="plusSlides(1)">
      <ion-icon name="caret-forward-outline"></ion-icon>
    </a>
  </div>

  <!-- The dots/circles -->
  <div class="dot-container">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</div></div>


{% schema %}
{
    "name": "Testimonial",
    "class": "testimonial-section",
    "max_blocks": 3,
    "blocks": [
        {
            "name": "Testimonial Items",
            "type": "testimonial",
            "settings": [
                {
                  "type": "image_picker",
                  "id": "image",
                  "label": "Client Profile Image"
                },
              {
                 "type": "text",
                 "id": "title",
                 "label": "Client Name",
                 "default": "Foysal Ahmed"
                },
              {
                 "type": "text",
                 "id": "client_info",
                 "label": "Client Info",
                 "default": "Shopify Developer"
                },
                {
                    "type": "richtext",
                    "id": "answer",
                    "label": "Client Comment"
                }
            ]
        }
    ],

    
    "presets": [
        {
            "category": "Testimonial",
            "name": "Testimonial Section"
        }
    ]
}
{% endschema %}


{% stylesheet %}

.slider-container {
    width: 100%;
    position: relative;
    background: #E3D7D2;
    min-height: 300px;
}

.slide {
  width: 100%;
  display: none;
}

.client_profile {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid #ddd;
    overflow: hidden;
  box-shadow: 0 10px 50px rgba(0,0,0,0.1);
}
.client_profile img {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    padding: 2rem 0;
}
.slide-title {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.slide span{font-weight: normal;}


.slider-nav {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.slider-nav-btn {
  cursor: pointer;
  background-color: rgba(211, 211, 211, 0.226);
  color: white;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease 0.3s;
}
.slider-nav-btn:hover {
  background-color: white;
  color: black;
}

.dot-container {
  position: absolute;
  bottom: 1rem;
  left: 0;
  z-index: 4;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.dot {
    cursor: pointer;
    height: 1rem;
    width: 1rem;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    transition: ease .3s;
}
.active,
.dot:hover {
  background-color: #fff;
}

.fade {
  animation-name: fade;
  animation-duration: 1s;
}
@keyframes fade {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

  
{% endstylesheet %}




{% javascript %}

let slideIndex = 1;
const slides = document.getElementsByClassName("slide");
const dots = document.getElementsByClassName("dot");

// Function to show a specific slide
function showSlides(n) {
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }

  // Hide all slides
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  // Remove the "active" class from all dots
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // Display the current slide and mark its corresponding dot as active
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

// Function to advance to the next slide
function plusSlides(n) {
  showSlides((slideIndex += n));
}

// Function to navigate to a specific slide
function currentSlide(n) {
  showSlides((slideIndex = n));
}

// Automatically advance to the next slide every 3 seconds (3000 milliseconds)
setInterval(function () {
  plusSlides(1);
}, 5000);

// Initialize the slider
showSlides(slideIndex);

  
{% endjavascript %}