News

Create a responsive slider with the bxSlider jQuery plugin

Create a responsive slider quickly and easily with bxSlider

bxSlider608

Sliders, and the many variations on the theme that have grown along with them, are a long-standing staple of web design’s greatest hits. It’s probably fair to say that at least half of the websites out there have a slider or carousel of some description, since they have always been an eye-catching and effective way of conveying information, either by image, text, or a combination of both. Over the years sliders have evolved, expanding their range from simple rolling image galleries to more complex parallax animations.

The advent and rapid growth of responsive web design has meant that sliders have had to adapt to remain viable and desirable elements. One-by-one, established slider plug-ins have redesigned themselves, adding fluid functionality to their arsenal, some with more success than others. There are a number of excellent options now available, such as Nivo Slider and ResponsiveSlides.js, but for sheer ease of installation and breadth of options, bxSlider is well worth a look.

In this tutorial, we’ll take a simple responsive website, built using the Bootstrap boilerplate, and learn how to add a bxSlider carousel to it. We’ll also explore the options available for styling and customising the slider.

Prepare the website

We have a simple responsive website, built using the Bootstrap boilerplate, which needs a slider. While Bootstrap comes with its own carousel for easy integration, we want to make full use of the options that bxSlider affords. Open the index.html of your site and decide where you want to place the slider. Underneath the navigation bar is the most common position.

Prepare your slides

bxSlider can call an adaptive height function for slides of varying sizes (explored later) but for now we’ll keep our slides the same size. Also, bear in mind that since this is going to act responsively, you’ll want your images to display clearly at their largest size. Our container has a maximum width of 1000px.

Grab BXSlider

Go to bxslider.com and download the zip file. You’ll see once you have opened it that bxSlider is nice and lightweight. Place the ‘jquery.bxslider.css’ and ‘jquery.bxslider.min.js’ files into their respective folders. We’ll look at the plug-in folder later. Also remember to place the controls and loader images into your image folder.

Call the JavaScript

Call the CSS and JavaScript from the index.html. Where you make the calls from depends on your template, but we’ll follow the Bootstrap example and place the CSS call in the <head> and the JavaScript at the end of the <body>. If you’re not already calling the jQuery library, do so.

001     <!-- bxSlider CSS file -->
002     <link href=”css/jquery.bxslider.css”     rel=”stylesheet” />
003     
004     <!-- bxSlider Javascript file -->
005     <script src=”//ajax.googleapis.com/ajax/    libs/jquery/1.10.2/jquery.min.js”></script>
006     <script src=”js/jquery.bxslider.min.js”></script>

Create the markup

The slider markup itself consists of a simple unordered list, containing as many slide images as you wish to include. Wrap the <ul> in a <div> of its own to help contain all the optional elements which will be added later. Apply some brief styling to the containing <div>.

001     <div class=”sliderwrap”>
002     <ul class=”bxslider”>
003     <li><img src=”img/slide1.jpg” /></li>
004           <li><img src=”img/slide2.jpg” /></li>
005           <li><img src=”img/slide3.jpg” /></li>
006           <li><img src=”img/slide4.jpg” /></li>
007     </ul>
008     </div>
009     
010     .sliderwrap{
011         float:left;
012         width:100%;
013     }

Fire it up

Add the code to the bottom of your <body> tag, below the other JavaScript calls, to fire the slider up. This will call the function .bxslider() onto the <ul> class ‘bxslider’. Note that this parent element can have any class you like.

001     <script>
002     $(document).ready(function(){
003      $(‘.bxslider’).bxSlider();
004     });
005     </script>

CSS conflicts

If you are using a template or boilerplate for your site, which has its own CSS, you may find that there are some conflicts with bxSlider’s CSS. The fact that the slider is using the <ul> may be a cause of some. Here Bootstrap is placing a margin on all of its <ul> elements that affects the slides position. A simple CSS addition will sort this.

001     ul.bxslider{
002     margin:0;    
003     }

Other styling

bxSlider comes with minimal styling included, such as a box shadow, which you may want to alter or add to. You may even want to take bxSlider’s CSS out of the equation altogether and style from scratch. However, for this quick example, we’ll change the border colour of the viewport to make it match our theme.

001    .bx-wrapper .bx-viewport {
002         -moz-box-shadow: 0 0 5px #ccc;
003         -webkit-box-shadow: 0 0 5px #ccc;
004         box-shadow: 0 0 5px #ccc;
005         border: solid #51a351 5px;
006         left: -5px;
007         background: #fff;
008     }

Change the transition

BxSlider comes with three base options for transition. The default, as you’ve seen, is set as ‘horizontal’, but there are also options for ‘vertical’ and ‘fade’. Set your transition option, as well as the slider’s transition speed (set to 500 by default), by declaring them as follows:

001     <script>
002         $(document).ready(function(){
003         $('.bxslider').bxSlider({
004           mode: 'fade',
005         speed: 2000
006         });
007         });
008     </script>

Add captions

Adding ‘caption: true’ to the function will display the title tag of each image in a semi-transparent bar. bxSlider keeps the font small in order to accommodate for smaller width viewports, but a media query will help if you want larger width labels to have larger fonts. We can also have the labels use our base font.

001    <li><img src="img/slide1.jpg" title="Blue Lizard"/></li>
002     
003     <script>
004         $(document).ready(function(){
005         $('.bxslider').bxSlider({
006           mode: 'fade',
007         speed: 2000,
008         captions: true
009         });
010         });
011     </script>
012     @media screen and (min-width: 769px) {
013     .bx-wrapper .bx-caption span {
014         font-family: 'Open Sans', sans-serif;
015         font-size:22px;
016     }
017     }

Adaptive height function

If you are dealing with a selection of images at differing heights, bxSlider can call on an adaptiveHeight function to create an eased animation between height changes. The effect is cool, but be aware that this will cause the content below the slider to move up and down accordingly, which you may not want.

001    <script>
002         $(document).ready(function(){
003         $('.bxslider').bxSlider({
004           adaptiveHeight: true,
005           mode: 'fade'
006         });
007         });
008     </script>

Thumbnail navigation

You can use thumbnail paging with bxSlider, which can give you more of a gallery feel. However, this method may not be so impressive at smaller screen sizes, so consider carefully. To implement, add the HTML and script below, plus a small bit of extra styling in the CSS.

001     <div id=”bx-pager”>
002     <a data-slide-index=”0” href=””><img     src=”img/thumbs/thumb1.jpg” /></a>
003     <a data-slide-index=”1” href=””><img     src=”img/thumbs/thumb2.jpg” /></a>
004     <a data-slide-index=”2” href=””><img     src=”img/thumbs/thumb3.jpg” /></a>
005     <a data-slide-index=”3” href=””><img     src=”img/thumbs/thumb4.jpg” /></a>
006     </div>
007     
008     <script>
009     $(document).ready(function(){
010     $(‘.bxslider’).bxSlider({
011     pagerCustom: ‘#bx-pager’
012     });
013     });
014     </script>
015     
016     #bx-pager {
017         text-align: center;
018         margin-top: -30px;
019         float: left;
020         width: 100%;
021     }
022     #bx-pager img{
023         padding:5px;
024     }

Ticker tape slider

Use the ticker function to display a rolling series of images. Slides can be whatever size you wish, but keeping them the same will produce a smoother ticker. Use minSlides and maxSlides to determine how many images will be visible in the tape at any one time. The higher the speed value, the lower the speed of the run.

001    <ul>
002           <li><img src="img/ticker/ticker1.jpg"     /></li>
003           <li><img src="img/ticker/ticker2.jpg"     /></li>
004           <li><img src="img/ticker/ticker3.jpg"     /></li>
005           <li><img src="img/ticker/ticker4.jpg"     /></li>
006           <li><img src="img/ticker/ticker5.jpg"     /></li>
007     </ul>
008     
009     <script>
010         $(document).ready(function(){
011         $('.bxslider').bxSlider({
012           minSlides: 4,
013           maxSlides: 4,
014           slideWidth: 362,
015           slideMargin: 10,
016           ticker: true,
017           speed: 6000    
018         });                           
019         });
020     </script>

Callback API

JavaScript callback functions can be added by using the onSliderLoad and onSlideAfter declarations. The following example demonstrates two simple alerts; one once the slider itself has loaded, and the other once each individual slide has loaded. However, you can place any fancy JavaScript function in those places to create your own special callback functions if you wish.

001    <script>
002     $(document).ready(function(){
003         $('.bxslider').bxSlider({
004           onSliderLoad: function(){
005             alert('The slider is ready to go.     Click OK right now!');
006           },
007           onSlideAfter: function(){
008             alert('One slide down. Click OK to     see the next one!');
009           }
010         });
011         });
012     </script>
013     

Easing alternatives

The first of the optional files in the bxSlider plug-ins folder can be used to increase the number of easing options available. Place the file in your script folder and choose between around 30 various Quad, Bounce, Elastic, Circ, and Quart ranges, and some others. False the useCSS declaration to deactivate the default easing.

Custom text controls

If you want to give the slideshow a little extra feature, then why not try taking the previous and next selectors out of the slider <div> and placing them in a <div> of their own. Then apply some customisation to each selector ID by choosing the text you wish to use.

001    <div>
002           <h3>View Our Slides</h3>
003           <p><span id="slider-prev"></span> |     <span id="slider-next"></span></p>
004     </div>
005     
006     .controls {
007     width: 200px;
008     margin: auto;
009     text-align: center;
010     }
011     
012     <script>
013         $(document).ready(function(){
014         $('.bxslider').bxSlider({
015           nextSelector: '#slider-next',
016           prevSelector: '#slider-prev',
017           nextText: 'Onward ',
019           prevText: ' Go back'
020         });
021         });
022     </script>
023     

Custom image controls

If you would prefer to make your new controls a little more visual, then here’s how you can replace the selector text with an image. Simply remove the text from next and previous and give the a link classes background images. You’ll need fixed widths, but keep them small and mobile screens won’t be an issue.

001     <div class=”controls”>
002           <h3>View Our Slides</h3>
003           <p><span id=”slider-prev”></span><span id=”slider-next”></span></p>
004     </div>
005     
006     .bx-prev{
007     width:100px;
008         height:100px;
009         background:url(img/butterfly-left.png)     no-repeat;
010         background-size:cover;
011         float:left;
012     }
013     .bx-next {
014         width:100px;
015         height:100px;
016         background:url(img/butterfly-right.png)     no-repeat;
017         background-size:cover;
018         float:left;
019     }
020     
021     <script>
022         $(document).ready(function(){
023         $(‘.bxslider’).bxSlider({
024           nextSelector: ‘#slider-next’,
025           prevSelector: ‘#slider-prev’,
026           nextText: ‘’,
027           prevText: ‘’
028         });
029         });
030     </script>

Multiple slideshows

Though it may often be a little too busy for most sites, there is an option to include more than one slider on the same page. These sliders can have different settings and controls. Note the inclusion of autoControls, which will display handy Pause and Play icons below the sliders.

001    <ul id="slider1">
002           <li><img src="img/slide1.jpg" /></li>
003                 <li><img src="img/slide2.jpg" /></li>
004           <li><img src="img/slide3.jpg" /></li>
005     </ul>    
006     <ul id="slider2">
007           <li><img src="img/slide1.jpg" /></li>
008                 <li><img src="img/slide2.jpg" /></li>
009           <li><img src="img/slide3.jpg" /></li>
010     </ul>
011     
012     <script>
013         $(document).ready(function(){
014         $('#slider1').bxSlider({
015           mode: 'fade',
016           auto: true,
017           autoControls: true,
018           pause: 2000
019         });
020         });
021     </script>
022     <script>
023         $(document).ready(function(){
024         $('#slider2').bxSlider({
025           auto: true,
026           autoControls: true,
027           pause: 3000,
028           slideMargin: 20
029         });
030         });
031     </script>

Standard carousel

The carousel function of bxSlider uses <div>s rather than a list, with values set for the image elements in those <div>s. The carousel will either adjust the number of visible slides, or the width of those slides, at smaller screen widths.

001    <div>
002     <div><img src="img/slide1.    jpg" title="Blue Lizard"/></div>
003                 <div><img src="img/    slide2.jpg" title="Pretty Flower"/></div>
004           <div><img src="img/    slide3.jpg" title="Blue Butterfly"/></div>
005           <div><img src="img/    slide4.jpg" title="Red Crane"/></div>
006           <div><img src="img/    slide5.jpg" title="Fly Up Close"/></div>
007     </div>
008     
009     <script>
010     $(document).ready(function(){
011           $('.slider1').bxSlider({
012             slideWidth: 320,
013             minSlides: 2,
014             maxSlides: 3,
015            slideMargin: 10
016          });
017     });
018     </script>

Vertical carousel

Vertical carousels can be handy if you would prefer to use the carousel function but keep each slide at its maximum possible size on smaller screen widths. Calling the mode:’vertical’ value will ensure the slides ease upwards rather than sideways. All other values can still be applied, but maxSlides is not required.

001    <script>
002     $(document).ready(function(){
003           $('.slider1').bxSlider({
004             mode: 'vertical',
005             slideWidth: 600,
006             minSlides: 2,
007             slideMargin: 10
008           });
009     });
010     </script>
011     

Using video

The second of bxSlider’s plug-in files is used to place responsive videos into the slider. As with the easing plug-in, place the ‘jquery.fitvids.js’ into your script folder, and call it after your library, but before the bxSlider script. Create a mix of video and image slides, or simply use the plug-in to create a single responsive video.

Reload slider

A cool function with bxSlider is the option to change the nature of the slider by reloading it with new elements. Passing settings objects through the reloadslider() call allows you to swap the settings, or even call extra slides, when a reload link is clicked. The following example changes the settings on reload.

001    <div>
002             <ul>
003           <li><img src="img/slide1.jpg"         title="Blue Lizard"/></li>
004                 <li><img src="img/slide6.jpg"         title="Pretty Flower"/></li>
005         </ul>
006     </div>
007             <h2><a href="" id="reload-            slider">RELOAD SETTINGS</a></h2>
008     
009     <script>
010     var slider = $('.bxslider').bxSlider({
011           mode: 'horizontal'
012     });
013     
014     $('#reload-slider').click(function(e){
015           e.preventDefault();
016           slider.reloadSlider({
017            mode: 'fade',
018             auto: true,
019             pause: 1000,
020             speed: 500
021           });
022     });
023     </script>
024
×