Bootstrap Slide Carousel Graphics support for the realization of touch-screen left-right gesture sliding _javascript tips

Recently Ytkah is learning to use bootstrap to build a Web site, bootstrap can adapt to the PC and mobile terminals, and mobile devices are preferred, suitable for today's mobile marketing. The bootstrap is a packaged frame, some functions need to call the corresponding components can be, but some still did not join, such as slide wheel touch screen around the slide gesture is not supported, we use the equipment is basically touch screen, can use sliding interaction on the small screen experience will be better, then how to achieve it? A simpler approach is to add a sliding gesture to the JS plugin: hammer.js, there are many CDN call addresses on the web, like//cdn.bootcss.com/hammer.js/2.0.8/ Hammer.min.js, we can load the head and then call the swipe function via JavaScript. The following is the original HTML code for the slide

<div data-ride= "Carousel" class= "Carousel Slide" id= "Carousel-example-generic" > <ol class= "
Carousel-indicators "> <li class=" "data-slide-to=" 0 "data-target=" #carousel-example-generic "></li> <li data-slide-to= "1" data-target= "#carousel-example-generic" class= "active" ></li> <li data-slide-to = "2" data-target= "#carousel-example-generic" class= "" ></li> </ol> <div role= "ListBox" class= " Carousel-inner "> <div class=" Item ">  </div> <div class= "Item Active" >  </div> <div class= "Item" >  </div> </div> <a Data-slide= "prev" role= "button" href= "#carousel-example-generic" class= "left Carousel-control" > <span Aria-hiDden= "true" class= "Glyphicon glyphicon-chevron-left" ></span> <span class= "Sr-only" >previous</ span> </a> <a data-slide= "Next" role= button "href=" #carousel-example-generic "class=" right Carousel-control "> <span aria-hidden=" true "class=" Glyphicon glyphicon-chevron-right "></span> < Span class= "sr-only" >Next</span> </a> </div>

The key step is that we need to write a JavaScript command to call the swipe feature in Hammer.js

<script>
$ (function () {
var myelement= document.getelementbyid (' carousel-example-generic ')
var Hm=new Hammer (myelement);
Hm.on ("Swipeleft", function () {
$ (' #carousel-example-generic '). Carousel (' Next ')
})
Hm.on ("Swiperight ", function () {
$ (' #carousel-example-generic '). Carousel (' prev ')
})
})
</script>

div ID must correspond, above is carousel-example-generic,javascript also want this, otherwise can not realize.

It should be noted that the jquery version is best 1.9 version of the jquery-1.9.1.min.js, or it may be on the computer can be achieved gesture sliding, and on the phone could not touch the slide

JavaScript command This is the key, can not write will not change is not fun. Make a mark for future enquiries

The above is a small set to introduce the bootstrap slide wheel map support touch screen about the implementation of the gesture sliding, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!