Based on the powerful slider slides of HTML5,

Based on the powerful slider slides of HTML5,

Share a powerful HTML5 slide. This is an image switching slide code based on jQuery + HTML5. As follows:

Download Online Preview source code

Implementation code.

Html code:

<Section class = "welcome"> <div class = "container"> <div class = "row"> <div class = "col-md-12 a"> <div id = "mySlider" class = "raxus-slider" data-autoplay = "3000" data-arrows = "show" data-fullscreen = "show" data-dots = "show" data-keypress =" true "data-thumbnail =" bottom "> <ul class =" slider-relative "id =" relative "> <li class =" slide fix-width "> <a href =" http://google.com ">  </a> <span class = "text ani-left"> <strong> Breaking Bad </strong> <small> American crime drama television series created and produced by Vince Gilligan. </small> </span> </li> <li class = "slide">  <Span class =" text ani-top "> <strong> Video Slide </strong> <small> You can add video link from Youtube and Vimeo. </small> </span> </li> <li class = "slide">  <span class = "text ani-right"> <strong> Custom Thumbnail </strong> <small> Raxus Slider gets thumbnail urls automatically. but you can add your custom thumbnail url easily. </small> </span> </li> <li class = "slide"> <a href =" http://dribbble.com/bqra ">  </a> <span class = "text ani-bottom"> <strong> Slide Link </strong> <small> Add link your slides. </small> </span> </li> <li class = "slide fix-height">  </Li> <li class =" slide ">  </li> <li class = "slide fix-width ">  <div class = "text"> <strong> Scarface </strong> </div> </li> <li class = "slide fix-width">  </li> <li class =" slide ">  <video width = "650" height = "330" controls> <source src = "img/ content/trailer.mp4 "type =" video/mp4 "> </video> </li> <li class =" slide ">  </li> <li class = "slide">  </li> <li class =" slide ">  </li> <li class = "slide">  <span class = "text"> <strong> Star Wars </strong> <small> Star Wars is an American epic space opera franchise centered on a film series created george Lucas. the film series, consisting of two trilogies, has spawned an extensive media franchise called the Expanded Universe including books, television series, computer and video games, and comic books. </small> </span> </li> <li class = "slide">  </li> <li class = "slide fix-width">  <span class =" text "> <strong> HER </strong> </span> </li> </ul> </div> <div class = "col-md-12 mt20 text-center B"> <div class = "row "> <div class =" col-lg-12 "> <div class =" try-title "> parameter settings: </div> <div class = "row"> <div class = "col-md-4"> <div class = "tl"> thumbnail position </div> <ul class =" templates "> <li id =" bot "class =" selected "> bottom </li> <li id =" lef "> left </li> <li id =" top "> top </li> <li id =" rig "> right </li> </ul> </div> <div class =" col-md-4 "> <div class = "tl"> slide direction </div> <ul class = "templates"> <li id = "hor" class = "selected"> horizontal </li> <li id = "ver"> vertical </li> </ul> </div> <div class = "col-md-4"> <div class = "tl"> set the size </div> <div class = "dimension"> <input type = "text" class = "width" placeholder = "width"/> <input type = "text" class = "height" placeholder = "Height"/> <a href = "javascript :; "class =" button "> OK </a> </div> </div> </section>

Via: http://www.w2bc.com/Article/39347