jquery draggable slider

How we can create a draggable slider with parallax slide effect using JS? Solution: See this jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask.

Previously I have shared some jquery sliders, but this is a draggable slider without any next and previous buttons. Basically, draggable sliders don’t have buttons for navigation next or previous. You have to hold a mouse click or touch tap and slide left or right to change slide items. But some draggable slider contains progress indicator on the bottom side, you can directly jump to any image by clicking on them.

Today I am sharing drag-slider with a transparent letter mask over on the image. Basically, there are 5 images in the slider and each image has different text. All images have an overlay effect with the first letter of the text. In other words, every image has a text and according to its first letter, there is a big transparent letter with a mask effect. Also, there are 5 dots icons on the bottom side to indicate the progress of the slider.

So, Today I am sharing jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask. There I have used jQuery for functioning and as we know jQuery is a JS library, that’s why I am putting this program in JavaScript program. The main functions of this program based on jQuery and CSS, also CSS has an important part in the program.

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

Preview Of Parallax Effect Drag-Slider

See this video preview to getting an idea of how this drag-slider looks like.

Live Demo

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:

jQuery Draggable Slider With Transparent Letter Mask

Before sharing source code, let’s talk about it. First I have created a main div named container inside that I have placed a div for slide items, a div for bottom slide indicator, and other two divs for left and right drag slider. HTML has a very little part in this program because all elements are dynamically created using jQuery. In the HTML file, I have linked other files like CSS, JS, and jQuery CDN file.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave the main container divs height 100vh for the full-screen slider. All the elements have 750ms animation dealy using CSS transition: command. All the slider item’s div are created using jQuery and put images using CSS. I have placed images in the background and the text using CSS background-image: command inside the divs which are dynamically created by JS (info).

jQuery handling here the main features of the program. In the JS file, I have put all the texts for image and jQuery pick first letter of the text and put it over on the image with transparent color like a mask effect. Also, it is creating divs and other elements inside the JS file that’s why HTML has less part. Using JQuery I have done many things that I can’t explain in writing. You will understand the whole program structure after getting the codes.

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 final step, Create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created jQuery Draggable Slider With Parallax Effect and Transparent Letter Mask Effect. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

  1. Bro, I need to edit the number of slides but it’s throwing an error, I want more than 5 slides, can you put me through??

LEAVE A REPLY

Please enter your comment!
Please enter your name here