Testimonials slider (Mobile first workflow|Tailwind-CSS|Vanilla JS)

Community feedback

• 

  SrHatcher•710

  @SrHatcherPosted over 1 year ago

  Hello!

  I wanted to say that your fading animation is very cool! I wanted to do that for mine but I didn't know how to do it until I saw your code.

  Talking about your control buttons, I would recommend you to take a look at my code to understand much better how I did it, but in short: I used a div container for the person img and my buttons container, so that I can use it to control the img size and use position: relative to positionate my buttons container with position: absolute. I'm using two buttons for each testimonial and using my JS to make them work together and not break the display.

  nice solution! :)

  0

  ---

  

  jwalczak94•810

  @jwalczak94Posted over 1 year ago

  @SrHatcher Hi, I'm glad my code helped you 😊.

  I also thought about the solution you write about, but I preferred to avoid two identical elements on the page. I thought there might be a better solution, but nothing comes to mind. 🤔

  1

  

  SrHatcher•710

  @SrHatcherPosted over 1 year ago

  @jwalczak94 In that case you can use just one container and change the image and information with javascript. You can create an object in your JS file with the information of each person. When the user clicks on any button you change the information depending of the current index. something like this:

  let index = 0
  leftButton.addEventListener('click', ()=>{
      if(index > 0){
          index--
  
          //this display none is to use the fade animation later
          testimonial.style.display = 'none'
  
          imageTag.src=`${people[index].img}`
          textTag.innerText = people[index].testimonial
          nameTag.innerText = people[index].name
          degreeTag.innerText = people[index].degree
  
          //this setTimeOut is to make the fade animation visible
          setTimeout(() => {
              testimonial.style.display = 'flex'
          }, 10);
      }
  })
  
  rightButton.addEventListener('click', ()=>{
      if(index + 1 < people.length){
          index++
  
          testimonial.style.display = 'none'
  
          imageTag.src=`${people[index].img}`
          textTag.innerText = people[index].testimonial
          nameTag.innerText = people[index].name
          degreeTag.innerText = people[index].degree
  
          setTimeout(() => {
              testimonial.style.display = 'flex'
          }, 10);
      }
  })
  

  With that solution you make the testimonial component dynamical and we don't have to duplicate any element!

  I tried to do it that way and it works, you can take a look at my code if you like! here's the live version and here's the repository

  1