balajirajput96 / B

GNU General Public License v3.0
1 stars 0 forks source link

Balaji digital marketing #23

Open balajirajput96 opened 3 months ago

balajirajput96 commented 3 months ago

// Testimonials Slider JavaScript let slider = document.querySelector('.testimonial-slider'); let isDown = false; let startX; let scrollLeft;

slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; });

slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); });

slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); });

slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 3; //scroll-fast slider.scrollLeft = scrollLeft - walk; });

balajirajput96 commented 3 months ago

// Testimonials Slider JavaScript let slider = document.querySelector('.testimonial-slider'); let isDown = false; let startX; let scrollLeft;

slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; });

slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); });

slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); });

slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 3; //scroll-fast slider.scrollLeft = scrollLeft - walk; });

balajirajput96 commented 3 months ago

@/ Testimonials Slider CSS / .testimonial-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }

.testimonial { scroll-snap-align: start; flex-shrink: 0; width: 100%; margin-right: 20px; transition: transform 0.5s ease; }

.testimonial-img { max-width: 100px; border-radius: 50%; }

.testimonial-rating .fa { color: #ffd700; }

.checked { color: orange; }