Untitled
unknown
plain_text
2 months ago
6.0 kB
13
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scrolling Testimonials</title> <style> body { font-family: Arial, sans-serif; background: inherit; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .testimonial-container { width: 1000px; height: 600px; overflow: hidden; position: relative; background: inherit; padding: 20px; border-radius: 10px; } .testimonial-wrapper { display: flex; transition: transform 1s ease-in-out; width: calc(100% * 5); justify-content: center; } .testimonial { width: 700px; text-align: center; padding: 50px; background: inherit; border-radius: 10px; border: 2px solid white; margin: 0 50px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); flex-shrink: 0; opacity: 0.5; transition: opacity 0.5s; } .testimonial.active { opacity: 1; } h2 { color: darkblue; margin-bottom: 15px; } p { color: black; font-size: 18px; margin-bottom: 15px; } .stars { color: yellow; font-size: 24px; margin-bottom: 10px; } .arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; cursor: pointer; background: rgba(0, 0, 0, 0.3); color: white; padding: 10px; border-radius: 50%; z-index: 2; } .left { left: 10px; } .right { right: 10px; } .indicators { display: flex; justify-content: center; margin-top: 20px; } .indicator { width: 15px; height: 15px; margin: 0 5px; background: gray; border-radius: 50%; transition: background 0.3s; } .indicator.active { background: white; } </style> </head> <body> <div class="testimonial-container"> <div class="arrow left" id="leftArrow">◀</div> <div class="testimonial-wrapper" id="testimonialWrapper"></div> <div class="arrow right" id="rightArrow">▶</div> <div class="indicators" id="indicators"></div> </div> <script> const reviews = [ { title: "Works great!", body: "Instantly removes pain in my feet and knees after running.", name: "Jeremy A.", stars: 5 }, { title: "Rheumatoid Arthritis relief", body: "With stage 4 rheumatoid arthritis the pain can be severe. Soothe works instantly to remove the pain so I can get on with my day. I highly recommend it. ", name: "Deb E.", stars: 5 }, { title: "Surprisingly effective", body: "Removes pain and smells amazing!", name: "Sophia T.", stars: 3 }, { title: "I love it!", body: "Soothe is like magic. It works fast, smells great and is all natural! ", name: "Jennifer K.", stars: 5 }, { title: "Love the smell", body: "I use it everyday! Helps relieve the osteoarthritis pain in my hands but I can't apply it the the back of my neck without breaking out in a rash.", name: "Violet M.", stars: 4.5 } ]; const wrapper = document.getElementById("testimonialWrapper"); const indicators = document.getElementById("indicators"); function generateStarRating(stars) { return '<div class="stars">' + '★'.repeat(stars) + '☆'.repeat(5 - stars) + '</div>'; } reviews.forEach((review, index) => { const testimonialDiv = document.createElement("div"); testimonialDiv.classList.add("testimonial"); if (index === 0) testimonialDiv.classList.add("active"); testimonialDiv.innerHTML = ` <h2>${review.title}</h2> <p>${review.body}</p> <strong>- ${review.name}</strong> ${generateStarRating(review.stars)} `; wrapper.appendChild(testimonialDiv); const indicator = document.createElement("div"); indicator.classList.add("indicator"); if (index === 0) indicator.classList.add("active"); indicators.appendChild(indicator); }); let index = 0; function updateScroll() { const testimonials = document.querySelectorAll(".testimonial"); const dots = document.querySelectorAll(".indicator"); testimonials.forEach((t, i) => t.classList.toggle("active", i === index)); dots.forEach((d, i) => d.classList.toggle("active", i === index)); wrapper.style.transform = `translateX(-${index * (700 + 100)}px)`; } function autoScroll() { index = (index + 1) % reviews.length; updateScroll(); } let interval = setInterval(autoScroll, 8000); document.getElementById("rightArrow").addEventListener("click", function () { clearInterval(interval); index = (index + 1) % reviews.length; updateScroll(); interval = setInterval(autoScroll, 8000); }); document.getElementById("leftArrow").addEventListener("click", function () { clearInterval(interval); index = (index - 1 + reviews.length) % reviews.length; updateScroll(); interval = setInterval(autoScroll, 8000); }); </script> </body> </html>
Editor is loading...
Leave a Comment