Testimonial Slider Generator Tool
`;
codeOutput.textContent = htmlCode;
}
function resetSlider() {
// Reset to default values
currentSlider = {
layout: 'basic',
width: 800,
height: 300,
title: 'What Our Clients Say',
showArrows: true,
showDots: true,
autoPlay: true,
showStars: true,
colors: {
bg: '#ffffff',
primary: '#4a6ee0',
text: '#1e293b'
},
fontSize: '16px',
borderRadius: '10px',
fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
testimonials: [
{
author: 'John Doe',
role: 'CEO at Company Inc.',
text: 'This product has completely transformed our business. The results were beyond our expectations and the support team was incredibly helpful throughout the process.',
rating: 5
},
{
author: 'Jane Smith',
role: 'Marketing Director',
text: 'I was skeptical at first, but this service delivered exactly what was promised. The team was professional and the results speak for themselves.',
rating: 4
},
{
author: 'Robert Johnson',
role: 'Small Business Owner',
text: 'As a small business, we needed an affordable solution that delivered big results. This was exactly what we were looking for!',
rating: 5
}
]
};
// Update UI controls
sliderWidth.value = 800;
sliderWidthValue.textContent = '800px';
sliderHeight.value = 300;
sliderHeightValue.textContent = '300px';
sliderTitle.value = 'What Our Clients Say';
showArrows.checked = true;
showDots.checked = true;
autoPlay.checked = true;
showStars.checked = true;
bgColor.value = '#ffffff';
bgColorHex.value = '#ffffff';
bgColorPreview.style.background = '#ffffff';
primaryColor.value = '#4a6ee0';
primaryColorHex.value = '#4a6ee0';
primaryColorPreview.style.background = '#4a6ee0';
textColor.value = '#1e293b';
textColorHex.value = '#1e293b';
textColorPreview.style.background = '#1e293b';
fontSize.value = 16;
fontSizeValue.textContent = '16px';
borderRadius.value = 10;
borderRadiusValue.textContent = '10px';
fontFamily.value = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
// Reset slider options
sliderOptions.forEach(option => {
option.classList.remove('selected');
if (option.getAttribute('data-layout') === 'basic') {
option.classList.add('selected');
}
});
// Reset testimonials
const testimonialControls = document.querySelector('.testimonial-controls');
testimonialControls.innerHTML = '';
currentSlider.testimonials.forEach((testimonial, index) => {
const newTestimonial = document.createElement('div');
newTestimonial.className = 'testimonial-item';
newTestimonial.innerHTML = `
`;
testimonialControls.appendChild(newTestimonial);
// Add event listeners
newTestimonial.querySelector('.remove-testimonial').addEventListener('click', function() {
newTestimonial.remove();
updateTestimonials();
});
newTestimonial.querySelectorAll('input, textarea').forEach(input => {
input.addEventListener('input', updateTestimonials);
});
});
// Apply changes
updateSlider();
updateCode();
if (currentSlider.autoPlay) {
startAutoPlay();
}
}
function exportCode() {
const htmlCode = codeOutput.textContent;
const blob = new Blob([htmlCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'testimonial-slider.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('Testimonial slider code downloaded successfully!');
}
function saveSlider() {
const sliderName = prompt('Enter a name for your testimonial slider:');
if (sliderName) {
// In a real implementation, this would save to localStorage or a server
alert(`Testimonial slider "${sliderName}" saved successfully!`);
}
}
});
