By
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
