Home > Developer > Web Develop
jquery-based Bxslider Carousel plug-in
Html
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1,maximum-scale=1, User-scalable=no"> <title>Bxslider Introduction</title> <!--introducing Bxslider Style files - <Linkrel= "stylesheet"href= "Bxslider/jquery.bxslider.min.css"></Head><Body><!--Common Carousel Diagram -<ulclass= "Bxslider"> <Li><imgsrc= "Http://placehold.it/350x150&text=FooBar1"/></Li> <Li><imgsrc= "Http://placehold.it/350x150&text=FooBar2"/></Li> <Li><imgsrc= "Http://placehold.it/350x150&text=FooBar3"/></Li></ul><!--Horizontal Carousel Carousel -<Divclass= "Slider1"> <Divclass= "Slide"><imgsrc= "Http://placehold.it/350x150&text=FooBar1"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/350x150&text=FooBar2"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/350x150&text=FooBar3"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/350X150&TEXT=FOOBAR4"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/350X150&TEXT=FOOBAR5"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/350X150&TEXT=FOOBAR6"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/350X150&TEXT=FOOBAR7"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/350x150&text=FooBar8"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/350x150&text=FooBar9"></Div></Div><!--Portrait Carousel Carousel -<Divclass= "Slider8"> <Divclass= "Slide"><imgsrc= "Http://placehold.it/300x100&text=FooBar1"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/300x100&text=FooBar2"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/300x100&text=FooBar3"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/300X100&TEXT=FOOBAR4"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/300X100&TEXT=FOOBAR5"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/300X100&TEXT=FOOBAR6"></Div> <Divclass= "Slide"><imgsrc= "HTTP://PLACEHOLD.IT/300X100&TEXT=FOOBAR7"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/300x100&text=FooBar8"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/300x100&text=FooBar9"></Div> <Divclass= "Slide"><imgsrc= "Http://placehold.it/300x100&text=FooBar10"></Div></Div><!--Introducing jquery Files -<Scriptsrc= "Jquery/jquery.min.js"></Script><!--introduction of JS in Bxslider -<Scriptsrc= "Bxslider/jquery.bxslider.min.js"></Script><Scriptsrc= "Ceshi.js"></Script></Body></HTML>
Js
/** * Created by admin on 2017/5/2.*/$(function () { //<!--normal Carousel --$ ('. Bxslider '). Bxslider ({auto:true, Autocontrols:true}); //<!--horizontal Carousel Carousel--$ ('. Slider1 '). Bxslider ({auto:true, slidewidth:200, Minslides:2, Maxslides:3, slidemargin:10}); //<!--portrait Carousel Carousel--$ ('. Slider8 ')). Bxslider ({mode:' Vertical ', SlideWidth:300, Minslides:2, Slidemargin:10 });});
Official website: http://bxslider.com/
jquery supplement, Bxslider-based carousel plug-in for jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
