Integrating Bxslider in Webpages

BxSlider is another widely used slider plugin by frontend developers. It's easy to integrate and supports images and texts along with it and is device responsive as well. Bxslider supports a lot of altercations to its display options as well.

Simply, download the css and js files required for this slider plugin, then add it in your webpage and you're good to go. Make sure you've got the links correct for the css and js files required.

<link rel="stylesheet" type="text/css" href="css/bxslider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bxslider.js"></script>	

Wrap your slider contents in a class for example slider and then put each of the images in a new div individually inside it. Use the title tag to display captions beneath the slider images.

<div class="slider">
	<div><img src="images/image1.jpg" title="Content Description"></div>
	<div><img src="images/image2.jpg" title="Content Description"></div>
	<div><img src="images/image3.jpg" title="Content Description"></div>
	<div><img src="images/image4.jpg" title="Content Description"></div>
</div>	

Now, the only thing you'll need to do is add a short script below the links for jquery and bxslider js files as shown below. Replace the class name slider with your class.

<'script>
	$('.slider').bxSlider({
		auto: true,
		pager: false,
		slideWidth: 1000,
		captions: true,
	});
<'/script>	

Download BxSlider zip file from here.

1 Like 1 Dislike 0 Comment Share Tweet