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

Source: Internet
Author: User
Tags prev

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.