"3d Slider"
Bootstrap 3.3.0 Snippet by rasheedbhutto

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <!-- Insert to your webpage before the </head> --> <script src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/sliderengine/jquery.js"></script> <script src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/sliderengine/amazingslider.js"></script> <script src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/sliderengine/initslider-1.js"></script> <!-- End of head section HTML codes --> </head> <body> <div class"container"> <div class"row topspace"> <div class"col-md-12"> <!-- Insert to your webpage where you want to display the slider --> <div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 56px;"> <ul class="amazingslider-slides" style="display:none;"> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(1).jpg" alt="Picture 1" /></li> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(1).png" alt="Picture 2" /></li> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(2).jpg" alt="Picture 3" /></li> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(3).jpg" alt="Picture 4" /></li> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(4).jpg" alt="Picture 5" /></li> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(5).jpg" alt="Picture 6" /></li> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(7).jpg" alt="Picture 8" /></li> <li><img src="http://uguru-realestate-us-jun202013.businesscatalyst.com/3d-slider/images/Desktop%20wallpapers%2023%20XopoM_com%20(8).jpg" alt="Picture 9" /></li> </ul> </div> <!-- End of body section HTML codes --> </div></div></div> </body> </html>
.topspace{ margin:100px auto;max-width:805px; }

Related: See More

Rotating CSS Card
Client or Partners Logo Slider
Timely Login slider
tabbed macbook mockup slider

Questions / Comments:

Why doesn't it work? (Or the preview!). Please help!!

jwin () - 5 years ago - Reply 0

There seems to be some sort of Jquery difference, when using this my bootstrap menu dies, but when disabling the jquery here and using the one from bootstrap, the slider is not shown at all. I've tried disabeling one or the other, enabeling both and switching the order of the two
Anybody got a solution for this?

Kenneth Harris Holst () - 7 years ago - Reply 0

I know it's too late for you, but, for fresh readers:
If you want to make this slider responsive, simply change value width:960 from initslider-1.js (you need to save this file locally) to width:"100%" (" " are important) :)

Thomas Goldbaum () - 7 years ago - Reply 0

how can i make this slider mobile responsive ?
Kindly Reply...

Azhar Uddin () - 8 years ago - Reply 0