In this 3D slider demo we are display 3 image one is main selected image. second is next image which is display after main image. third image is previous image which is before main image. this alider also call carousel slider.

We allows to free snippets of jquery 3d carousel slider free download , you can download full code of jquery 3d slider carousel layout. Here in this post i will give you example of jquery automatic image slider free download snippet and you will get simple code of html, css and jquery. In jquery image slider free download with source code snippet i give you three tab with html, css and js, you can easily get code of cascade Slider is a super lightweight jQuery plugin used for 3D slider layout.


<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//nicesnippets.com/demo/cascade-slider.js"></script> </head> <body> <section> <h1>3D Slider</h1> <div class="cascade-slider_container" id="cascade-slider"> <div class="cascade-slider_slides"> <div class="cascade-slider_item"> <img src="https://placeimg.com/329/280/animals" alt=""> </div> <div class="cascade-slider_item"> <img src="https://placeimg.com/329/280/arch" alt=""> </div> <div class="cascade-slider_item"> <img src="https://placeimg.com/329/280/nature" alt=""> </div> <div class="cascade-slider_item"> <img src="https://placeimg.com/329/280/people" alt=""> </div> <div class="cascade-slider_item"> <img src="https://placeimg.com/329/280/tech" alt=""> </div> <div class="cascade-slider_item"> <img src="https://placeimg.com/329/280/sepia" alt=""> </div> </div> <ol class="cascade-slider_nav"> <li class="cascade-slider_dot cur"></li> <li class="cascade-slider_dot"></li> <li class="cascade-slider_dot"></li> <li class="cascade-slider_dot"></li> <li class="cascade-slider_dot"></li> <li class="cascade-slider_dot"></li> </ol> <span class="cascade-slider_arrow cascade-slider_arrow-left" data-action="prev"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></span> <span class="cascade-slider_arrow cascade-slider_arrow-right" data-action="next"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span> </div> </section> </body> </html>
body{ background-color:#8ED2C9; color:#fff; } h1 { margin:70px auto 100px auto; text-align:center; } img { background-color:#fff; padding:5px; } .cascade-slider_container { position: relative; width:80%; height:225px; margin: 0 auto; } .cascade-slider_item { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%) scale(0.3); transition: all 1s ease; opacity: 0; z-index: -1; } .cascade-slider_item.next { left: 50%; transform: translateY(-50%) translateX(-150%) scale(0.6); opacity: 1; z-index: 1; } .cascade-slider_item.prev { left: 50%; transform: translateY(-50%) translateX(50%) scale(0.6); opacity: 1; z-index: 1; } .cascade-slider_item.now { top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%) scale(1); opacity: 1; z-index: 5; } .cascade-slider_nav > .cascade-slider_dot.cur{ border:1px solid red !important; } .cascade-slider_arrow { display: inline-block; position: absolute; top: 50%; cursor: pointer; z-index: 5; } .cascade-slider_arrow-left { left: 0; } .cascade-slider_arrow-right { right: 0; } .cascade-slider_nav { position: absolute; bottom:-170px; width: 100%; text-align: center; z-index: 5; } .cascade-slider_arrow i{ font-size:35px; } .cascade-slider_dot{ display: inline-block; width: 1em; height: 1em; margin: 1em; background: #ddd; list-style: none; cursor: pointer; border-radius: 50%; } .cascade-slider_dot:hover { background: #555; }
$('#cascade-slider').cascadeSlider({ });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:




Tags:- slider14

Random Post


Random Blog