• Butterfly carousel jquery Morpho Peleides
  • Droplets jquery carousel slider Teardrop
  • Insect carousel jquery slider Hoverfly
  • Leaf jquery image carousel Water Drop
  • Oak sawfly carousel slider jquery Larva
Butterfly responsive carousel jquery 1 Droplets image carousel jquery 2 Insect carousel jquery examples 3 Leaf jquery carousel plugin 4 Oak sawfly jquery carousel responsive 5
jQuery 3D Slider

This slider is now avalable with our Free Website Builder!

This easy web design software comes with 5300+ awesome website blocks: image galleries, lightboxes, image sliders, bootstrap carousel, counters, countdowns, full-screen intros, features, data tables, pricing tables, progress bar, timelines, tabs, accordions, call-to-action, forms, maps, social blocks, testimonials, footers, and more... Free for commercial use.

Free HTML Templates

More Demos

More Demos: Bootstrap carousel, Slick slider, Bootstrap slider, HTML slider, Slick carousel, Bootstrap carousel, HTML slideshow, CSS Slideshow, jQuery carousel, Image carousel

  jQuery Carousel Tutorial

This is a how-to video tutorial that will instruct you on building responsive jQuery carousel for your webpage!

  jQuery Carousel Slider Example - Beautiful Effects!

See how the jQuery carousel animates on the page! Watch this video demo:

  jQuery Carousel HTML Code

Code to paste between the tags <head></head>:

 
<!-- Start Responsive Carousel HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End Responsive Carousel HEAD section -->

HTML code to paste between the tags <body></body> in the place that you want the jQuery Carousel to appear:

 

<!-- Start Responsive Carousel BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/animated-parallax/data1/images/butterfly.jpg" alt="Butterfly" title="Butterfly" id="wows1_0"/>Morpho Peleides</li>
<li><img src="images/demo/animated-parallax/data1/images/droplets.jpg" alt="Droplets" title="Droplets" id="wows1_1"/>Teardrop</li>
<li><img src="images/demo/animated-parallax/data1/images/insect.jpg" alt="Insect" title="Insect" id="wows1_2"/>Hoverfly</li>
<li><img src="images/demo/animated-parallax/data1/images/leaf.jpg" alt="Leaf" title="Leaf" id="wows1_3"/>Water Drop</li>
<li><img src="images/demo/animated-parallax/data1/images/oaksawflylarva.jpg" alt="Oak sawfly" title="Oak sawfly" id="wows1_4"/>Larva</li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="One Way"><img src="images/demo/animated-parallax/data1/tooltips/butterfly.jpg" alt="Butterfly"/>1</a>
<a href="#" title="Cards"><img src="images/demo/animated-parallax/data1/tooltips/droplets.jpg" alt="Droplets"/>2</a>
<a href="#" title="Freedom"><img src="images/demo/animated-parallax/data1/tooltips/insect.jpg" alt="Insect"/>3</a>
<a href="#" title="Bridge"><img src="images/demo/animated-parallax/data1/tooltips/leaf.jpg" alt="Leaf"/>4</a>
<a href="#" title="Bridge"><img src="images/demo/animated-parallax/data1/tooltips/oaksawflylarva.jpg" alt="Oak sawfly"/>5</a>
</div></div>
<a href="#" class="ws_frame"></a>
<div class="ws_shadow"></div>
</div>	
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/animated-parallax/engine1/script.js"></script>
<!-- End Responsive Carousel BODY section -->

  PARALLAX ANIMATION & ANIMATED LAYOUT JQUERY CAROUSEL

This responsive carousel is a fun and funky design, that breaks free of the traditional ‘rigid’ squared off shapes of modern web-design. It has a slightly retro feel, with rounded corners and circles, but it is a light touch and overall this carousel just feels ‘fun’.

One of the more unique design choices about this responsive carousel is the use of a pause/play button in the center of each image. It’s a bold statement, and makes it clear this is a slider that is intended to actually be used to navigate through images.

The pause/play button lines up with two next/previous arrows either side. The arrows are an attractive turquoise color. The retro element shows up again in the choice of a true arrow. The arrows and play button sit within a white circle.

JQuery carousel example

When you hover over any of the navigation elements the colors invert, and the arrow turns white and the background turns turquoise. An attractive, semi-transparent border finishes the effect.

The attention to detail is superb. For example, the transition between the two color schemes when you hover is nicely done. Instead of an abrupt change, instead the colors fade into the switch-over. The navigation arrows slide away to one side, and the replacement arrow slide in from the other side. It’s a lovely touch, and makes the responsive carousel feel almost organic.

A similar transition effect happens with the play/pause arrow, except that in this case, the play button slides down from above, and the pause button slides up from below.

In the bottom center of the slides are a series of transparent circles with white borders. These represent each slide, and allow the user to jump about between slides without having to click through lots of them. When a slide is active, the circle turns white with a semi-transparent border, and a turquoise dot appears in the center. The resulting effect is a little like a dartboard, and is very attractive.

Captions are also interesting. There are two spaces for each slide, one a larger, more prominent title, and the second a smaller, less prominent sub-title. The title appears as turquoise text on a white background. The carousel background has rounded corners. The sub-title appears in white text on a turquoise background, also with rounded corners.

The font used is Dosis, an interesting rounded san-serif font. This font is very clean and modern, off-setting the slightly retro feel of the other design choices and updating the responsive carousel.

jQuery Image Carousel

This jquery image carousel is perfect for a wide-range of websites. Bloggers would benefit from the fun and funky aesthetic. The design feels very friendly, which would make it a good choice for websites aimed at children and families — particularly if you used ‘bubbles’ as your change effect. It would also be a nice choice for a family-friendly cafe or restaurant.

  Comments

I downloaded the free jquery image carousel unlimited website version less than a year ago. It has never updated and I don’t see any option in the program to “check for updates”. I’m still running version 5.6 and it has never updated. I see that you are up to version 7.6 now. I should be eligible to upgrade, since I’m still within my 1 year period, but I don’t know how to do that and there appears to be no option for it on your website or in the software. Please send me a link to download the full version and a new activation code if necessary.

I finally found the email with my registration, installed jquery image carousel on my pc running windows 10. Each time I load some photos and make some tweaks in transitions it crashes. I get the Windows message the Wowslider has stopped working and will close! Any ideas??

JQuery carousel maker

Please uncheck the Preview option, then your app will work more stable. There are too many pictures for your preview in the app.

Thank you, I'm sure that's the problem. I was adding 35 photos. I didn't know there was a limit on the number of photos you could use.

I have Wowslider inserted into my website which functions perfectly when using devices with a mouse. However when displayed on tablets and phones the following issues are found:

Initially on page load the slider autoplays fine but if you touch anywhere on the show, it stops immediately and can only be restarted by refreshing the page.

Unable to manipulate by swiping. Either to move forward or backwards on the main show or to slide through the bottom filmstrip.

Swipe Support is enabled and I have tried changing other play options within Slider Properties but without any success.

I have been through FAQ’s on your site but cannot anything that matches my problems – Do you have any ideas that I can try?

I have checked your page in Chrome browser and it works correctly. What browser do you use?

I have investigated further and would agree that a mobile device running Chrome (or Firefox) functions correctly.

My original problem was reported when using the default Samsung browser on a Galaxy android and the Silk browser on a Kindle device.

I guess that functionality cannot be tested on all combinations of device and browser so I will indicate on my site the browsers known to function.

However, I would point out that competitor products, such as Magic Toolbox and Jssor appear to work OK on all the mobile browsers that I have access to.

I have sent it to our developers, and I hope they will fix this issue as soon as they can.

I downloaded the free version of Wowslider yesterday and received an offer to purchase the commercial Unlimited Websites version for $69. The offer was supposed to be good for 48 hours I believe, but that offer doesn't come up. Would like to purchase that version at that price.

This offer is still valid, what is your issue? Please try to order WOWSlider from another browser, maybe it will help.

Can you let me know what the issue is with this Wowslider loading on this site in development First time round it gets stuck on displaying the first image. Don't think anything is larger than any other slider I have done. Is it something to with using the Ken Burns effect. I have noticed that some effetcs do tend to stutter.

We have checked your page, and it seems that your jquery image carousel works correctly. Could you please provide us with more detailed information. What browser do you use?

You can see a small squashed image which appears in the slider for the first few seconds of loading on my site in Firefox. Just tried in Chrome and it doesn't happen.

I have sent this info to our developers, they will try to fix it later. Please use other transition effects. Sorry for the inconvenience.

Since moving to v8.2 I can no longer get the FTP connection to work. Nothing happens when I test the connection - no response. If I try and publish then I get no progress and the program hangs. This has always worked with the same settings on previous versions and I am still using FTP with other programs which I am currently using to transfer the files manually to the hosting.

I have loaded the latest version 8.6 but the problem persists. Nothing happens when I try and test. If I try and upload, no progresss and cancel does not work. I close the window but then Wowslider gives error not responsive and has to be forced to close.

JQuery carousel generator

We will try to resolve issues with ftp. You can publish your slider in a local folder and then upload it to your ftp server.

Will this be in a new release? Any timescales on this as it was a key feature of the software until now.

We have checked it, and it seems that there shouldn't be an issue. Could you please provide us with more detailed information. Please send us the data you use.

What data do you need. Do you mean my FTP details. I have to grant temporary access via hosting before I can do FTP. I have always done this and still works ok via FileZilla FTP. I get no error message on testing FTP. Nothing happens. If I try and publish it just stalls on the publish.

I apologize for the delay in response. The data you enter to access FTP. Did you try to test your FTP connection?

Yes tried test. Nothing happens so nothing to screenshot. No point in sending you may FTP details as I have to setup on host for access each time I run wowslider. FileZilla has no issue.

Comments are closed

© 2024 WOWSlider.com - jQuery Slideshow All Rights Reserved. Terms Privacy