Easy simple three steps. Step One Add following markup where you want to show the slider or carousel
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="dev-bdhostit"> <div><img src="photo1.jpg"></div> <div><img src="photo2.jpg"></div> <div><img src="photo3.jpg"></div> <div><img src="photo7.jpg"></div> <div><img src="photo4.jpg"></div> <div><img src="photo5.jpg"></div> <div><img src="photo6.jpg"></div> <div><img src="photo8.jpg"></div> <div><img src="photo9.jpg"></div> </div> |
Step Two Link jquery script of Bx Slider.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> <script type="text/javascript"> $('.dev-bdhostit').bxSlider({ auto: true, autoControls: true, stopAutoOnClick: true, minSlides: 1, maxSlides: 8, moveSlides: 1, slideWidth: 250, slideMargin: 10, }); </script> |
Add the above line before closing of </body> tag. Step Three Link css script of Bx Slider.
|
1 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" /> |
Add the above line before closing of </head> tag.