JavaScript Quote Slider With Controls and Like Button | CSS JS Slides

How we can create a quote slider with lines, author name, and author’s image using HTML CSS JS? Solution: See this JavaScript Quote Slider With Controls and Like Button, CSS JS Slides.

Previously I have shared testimonial slider, it like a little similar to that but it is a quote slider. Basically quote slider contains meaningful or motivating quotes by famous persons with their name and image. And it pretends like a slider, you can change quotes by sliding them using left-right navigation buttons.

Today you will learn to create JavaScript CSS slider for quotes. Basically, there are four famous quotes with author names and images in slides. The image is placed on the left slides section and quote on the right side. Below the quotes line, you will see the author’s name and in the bottom-right side is a like button and counter.

So, Today I am sharing JavaScript Quote Slider With Controls and Like Button. There I have used pure JavaScript to creating the program, without jQuery or any library. And all the styles are based on CSS there is no library like bootstrap. If we use libraries like jQuery and Bootstrap then we have to work less also we can save time when creating this.

If you are thinking now how this quotes slides actually is, then see the preview given below.

Preview Of CSS JS Quotes Slides

See this video preview to getting an idea of how these slides of quotes look like.

Now you can see this visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.

You May Also Like:

• JavaScript Portfolio Navigation
• Responsive Timeline Slider
• Counting Error 404 Page
• CSS Multi-Layer Navigation

JavaScript Quote Slider Source Code

Before sharing source code, let’s talk about it. First I have created the layout using HTML, I have created a main div and placed an element for photos, buttons for left & right navigation, space for quotes and element for the like wrapper. For the heart icon on the like button, I have used the font-awesome library.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave the width of the elements in PX (pixel) but there also placed a max value like: max-width: max-height: . Also done basic works with CSS like margin, padding, color, etc. For reducing the fonts and other placements in small screen size, I have used the CSS @media query.

JavaScript handling the main feature of the program. I have stored quotes data like line, author name, the image in JavaScript variable. Create a variable named data and stored values inside it. And stored element’s ID and Class values inside another var. All the functions are based on JS DOM (info). Next and previous buttons functions are based on if {} & else if{} statement.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The last step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created JavaScript Quote Slider With Controls and Like Button, CSS JS Slides. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.