Simple Quote Slider

javascript (ES6) & CSS Animations

This project allowed me to practice a handy module that many people want in their website: a quote slider. It can be used to show client testimonials, a list of product features, or even a slideshow of photos. The slider is automated to change slides every 6 seconds, and can also be manipulated manually through the arrows and dots.

As you can see in the code photo, there is a config object in the slider function that allows me some flexibility, such as being able to change the slide transition timing, the slides changing automatically, and setting which class selectors will connect to our elements.

I used basic CSS animations to give each quote that 'slide' effect through setting a transition property (left 1.8s, opacity 0.5s ease). I also used it to change the color of the arrows when clicked by using the :active pseudo class on the arrow classes.

This project was my first one using ES6, and I love the flexibility of variables by using const or let instead of just the basic var. I also enjoy the simplicity of writing functions with the fat arrow (=>). The new features save so many lines of code!

jQuery Slideshow
image of JavaScript file
image of JavaScript file
image of JavaScript file

Contact Me

Photo of Brianna Hayley