Fancybox Product Slider With Autoplay and Lightbox | Landscape-Vertical

How we can create a product’s image slider using JS or any JS library? Solution: See this Fancybox Product Slider With Autoplay and Lightbox, Landscape-Vertical Both.

Previously I have shared many sliders, but this slider is for present eCommerce products. Basically, a product slider is a little different from basic image sliders it has small thumbnails of all images to see other images and click to choose. There also navigation buttons like next and previous for change images by sliding and the click to jump feature both.

Today you will learn to create a Product Slider with multiple features. Basically, there are two types of slider one is with landscape position and one is verticle slider. Also, the slider contains many features like the next/previous button, thumbnail image with click to jump, image lightbox, and autoplay slides. And the coolest feature is you can see all the images of 2 sliders with a lightbox view and a small thumbnail of the images in the right side.

So, Today I am sharing Fancybox Product Slider With Autoplay and Lightbox. There I have used jQuery and 2 other libraries for creating the program. The first library is lightslider.js and the second library is fancybox.js because these two libraries handling the main features. Because of using the library there are fewer CSS and JS codes. You can use this program on your website for presenting any product.

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

Preview Of Landscape/Vertical Ecommerce Slider

See this video preview to getting an idea of how this slider and the whole program 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:

• Smooth Accordion Dropdown
• Linear Gradient Generator
• Frosted Glass Menu
• Hover Carousel Slider

Fancybox Product Slider With Autoplay and Lightbox Source Code

Before sharing source code, get the source code of its. First I have created a main div and put two lists inside it to create two types of sliders. The first list is for landscape type slider and the second one is for the vertical slider. Inside each list item, I have put one image 3 times because of lightbox, thumbnail and slide image. Also in the HTML file, I have linked other files like CSS, JS, lightslider.js, and fancybox.js.

Now using CSS I have done little things like image size in slider and basic margin padding. There I have used JS libraries and JQuery plugin, that’s why there is very less line of CSS codes. In the JavaScript file, I have declared the slider’s values loop, items count, etc. We just have to put values because there are pre-built functions to call.

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 file for HTML, the second one for CSS, and the third file for JavaScript. Follow these 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 files.

That’s It. Now you have successfully created Fancybox Product Slider With Autoplay and Lightbox, Landscape-Vertical type of slider. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.