EnglishWOWSlider  DeutschBildergalerie Diashow  EspañolGaleria de Imagenes, Slide Imagenes Gratis  FrançaisDiaporama Galerie D'Image  ItalianoImmagini Galleria  汉语网络幻灯片: 效果的幻灯片  Português brasileiroGaleria De Imagens  Русскийслайдер изображений, слайдшоу, CSS3 слайдер  SvenskaBild Galleri  日本語画像のスライダー&ギャラリー  NederlandsAfbeeldingen Caroussel 
  • One Way 3d slider jquery Wintage Collection
  • Cards 3d jquery slider Wintage Collection
  • Freedom 3d image slider jquery Wintage Collection
  • Bridge jquery 3d image slider Wintage Collection
One Way slider 3d jquery 1 Cards free 3d slider jquery 2 Freedom jquery slider 3d 3 Bridge 3d image slider jquery free download 4
jQuery 3D Slider

More Demos

  How-to: jQuery 3D Slider!

This is a video instruction that will help you build cool responsive 3D sliders!

  jQuery 3D Slider - Awesome Demo!

Watch this video to see how your website visitors can experience your slider on the page!

  jQuery 3D Slider HTML Code

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

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

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

 

<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/transparent-brick/data1/images/25h.jpg" alt="One Way" title="One Way" id="wows1_0"/>Wintage Collection</li>
<li><img src="images/demo/transparent-brick/data1/images/83h.jpg" alt="Cards" title="Cards" id="wows1_1"/>Wintage Collection</li>
<li><img src="images/demo/transparent-brick/data1/images/88h.jpg" alt="Freedom" title="Freedom" id="wows1_2"/>Wintage Collection</li>
<li><img src="images/demo/transparent-brick/data1/images/114h.jpg" alt="Bridge" title="Bridge" id="wows1_3"/>Wintage Collection</li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="One Way"><img src="images/demo/transparent-brick/data1/tooltips/25h.jpg" alt="One Way"/>1</a>
<a href="#" title="Cards"><img src="images/demo/transparent-brick/data1/tooltips/83h.jpg" alt="Cards"/>2</a>
<a href="#" title="Freedom"><img src="images/demo/transparent-brick/data1/tooltips/88h.jpg" alt="Freedom"/>3</a>
<a href="#" title="Bridge"><img src="images/demo/transparent-brick/data1/tooltips/114h.jpg" alt="Bridge"/>4</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/transparent-brick/engine1/script.js"></script>
<!-- End WOW Slider.com BODY section -->

  BRICK EFFECT & TRANSPARENT LAYOUT JQUERY 3D SLIDER

This slideshow demo by WOWSlider has a unique brick effect that would look if used as a quick portfolio on home pages of interior designing or renovation websites. It also has a very neat and sharp look to it because there are no borders, so the slideshow will actually go great with such websites, as attractive and sharp look interior design/renovation sites look fantastic.

This slideshow’s entire look is very neat and transparent. Apart from the lack of borders, it features right and left arrows for image skipping, a small pause and play button on the top right corner, and fat round bullets at the middle bottom of the frame. The best part about these functions is that they are all transparent with an indented look and white shadow beneath them that makes this visible when users place their mouse on the frame. The bullets that are also almost transparent are the same way, and the current display picture bullet has a small black bullet inside it to show what bullet is playing. Upon mouseover, the selected bullet displays the picture it holds in a small rectangle that disappears as soon as the mouse arrow moves away. The text is written in a bold black font on the lower left of the frame that is readable and with each slide, the literally slides in from the left. All of this transparency and lack of borders make the slide edgy and modern but the best contrast that makes in contemporary is the brick transition of images.

HTML5 Slider

After three to four seconds of each slide, the current slide kind of crumbles and breaks down into small rectangles, which are the bricks. These bricks are given a fat and thick look because of the dark insides that show when they crumble and then all the bricks turn at random to reveal different parts of a different slide for a second before they evenly settle down to show a clear slide. The transition effect is very bold and contemporary, making it all the more advantageous for home decoration/renovation or interior designing websites.

When these slides have high definition modern and classic pictures of interior designed or renovated living rooms, kitchens, bathrooms, or bedrooms, they can make for a wonderful slideshow for relevant websites.

Javascript gallery

© 2016 WOWSlider.com - All Rights Reserved. Terms Privacy