jQuery Slider | Responsive jQuery Slider

✨ Click the numbers to learn about each section.

<html>
  <head>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.bxslider.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.bxslider.min.js"></script>

    <script>
      $(document).ready(function(){
        $(".slider").bxSlider();
      });
    </script>

  </head>
  <body>

    <div class="slider">
      <div>I am a slide.</div>
      <div>I am another slide.</div>
    </div>

  </body>
</html>

Include the bxSlider files

This code adds the required files to the webpage. These files need to be included before initializing the slider.

Initialize the bxSlider plugin

This code tells the webpage to start the slider setup. Without this code the slider plugin would not be visible on the page.

Create the HTML for the slider

This is the code that the slider plugin will use to generate the slides.

Manual

1. Download jquery.bxslider.zip here

2. Include in your webpage

// Links to the libraries needed
<link rel="stylesheet" href="/path/to/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/path/to/jquery.bxslider.min.js"></script>
// Initialize the slider
<script>
  $(document).ready(function(){
    $('.slider').bxSlider();
  });
</script>

// Slider HTML (change this to your own!)
<div class="slider">
  <div>I am a slide.</div>
  <div>I am another slide.</div>
</div>

Bower

1. Run from a command line

bower install bxslider --save

2. Include in your webpage

// Links to the libraries needed
<link rel="stylesheet" href="/bower_components/bxslider/dist/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/bower_components/bxslider/dist/jquery.bxslider.min.js"></script>

// Initialize the slider
<script>
  $(document).ready(function(){
    $('.slider').bxSlider();
  });
</script>

// Slider HTML (change this to your own!)
<div class="slider">
  <div>I am a slide.</div>
  <div>I am another slide.</div>
</div>

NPM

1. Run from a command line

npm install bxslider --save

2. Include in your webpage

// Links to the libraries needed
<link rel="stylesheet" href="/node_modules/bxslider/dist/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/node_modules/bxslider/dist/jquery.bxslider.min.js"></script>

// Initialize the slider
<script>
  $(document).ready(function(){
    $('.slider').bxSlider();
  });
</script>

// Slider HTML (change this to your own!)
<div class="slider">
  <div>I am a slide.</div>
  <div>I am another slide.</div>
</div>