was successfully added to your cart.

Development

Bootstrap Freebies: Client Logo Carousel

By January 7, 2016 No Comments

If you’ve ever been asked to add a client logo slider into a theme, it can be a bit of a hassle looking for the perfect theme to fit all of your needs without overloading your site with a bunch of unnecessary plugins. Having some web development knowledge can come in handy when you want to keep page load time low.

Bootstrap is an excellent framework to use for such requests as much of the code is pre-written, moreover many of today’s theme’s available on sites like Themeforest utilize their framework. If you come across a theme that isn’t built using Bootstrap take a look at this tutorial on Adding Bootstrap to WordPress.

Anyways….check out this carousel: (Written in HTML for now…..I’ll add another post with the appropriate WordPress code in the future)

<!doctype html>
<html lang="en">
<head>
    <title>BootStrap Carousel</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/carousel.js"></script>

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/custom.css">
</head>
<body>

    <div class="container">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <h2 class="center">Carousel Example </h2>
    <div class="item active">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
    </div>
    ...
    <div class="item">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
    </div>
    ...
    <div class="item">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
      <img class="col-md-2 col-sm-2 col-xs-4" src="/img/slide.jpg" alt="...">
    </div>
    ...
  </div>

 <div align="center" style="margin-top:20px;">
    <!-- Controls -->
          <a class="left" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
    </div>
        
    </div>

</body>
</html>

 

JavaScript: You’ll only need one line of code to get the carousel started:

//Initialize Carousel
$('.carousel').carousel();

I’ll leave you to play around and add additional style, happy coding!