Responsive Brand Logo Carousel In jQuery - RC Brand Slider

A responsive, fully configurable, and simple-to-use jQuery slider/carousel plugin created for showcasing brand logos on the webpage.

Key Features:

• Allows to set the number of logos to show & scroll at a time.
• Infinite loop or not.
• Configurable autoplay functionality.
• Allows you to pass different options based on device type (mobile, tablet, desktop).

How to use it:

1. Load the RC Brand Slider plugin and other required resources on the web page.

<link href="/path/to/css/style.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.rcbrand.js"></script>

2. Add brand logos to an HTML unordered list.

<ul id="rcbrand-demo">
  <li><img src="logo-1.png" /></li>
  <li><img src="logo-2.png" /></li>
  <li><img src="logo-3.png" /></li>
  <li><img src="logo-4.png" /></li>
  <li><img src="logo-5.png" /></li>
  ...
</ul>

3. Call the function rcbrand on the HTML list to create a default logo carousel.

$("#rcbrand-example").rcbrand({
  // options here
});

4. Determine how many logos to show per view. Default: 4.

$("#rcbrand-example").rcbrand({
  visibleItems: 3
});

5. Determine how many logos to scroll at a time. Default: 3.

$("#rcbrand-example").rcbrand({
  itemsToScroll: 2
});

6. Enable/disable infinite loop. Default: true.

$("#rcbrand-example").rcbrand({
  infinite: true
});

7. Customize the animation speed. Default: 400ms.

$("#rcbrand-example").rcbrand({
  animationSpeed: 500
});

8. Config the autoplay functionality.

$("#rcbrand-example").rcbrand({
  autoPlay: {
    enable: false,
    interval: 5000,
    pauseOnHover: true
  }
});

9. Determine where to place the navigation controls.

$("#rcbrand-example").rcbrand({
  navigationTargetSelector: null
});

10. Determine how many logos to show and scroll at a time when running on different devices:

$("#rcbrand-example").rcbrand({
  responsiveBreakpoints: { 
    portrait: { 
      changePoint:480,
      visibleItems: 1,
      itemsToScroll: 1
    }, 
    landscape: { 
      changePoint:640,
      visibleItems: 2,
      itemsToScroll: 2
    },
    tablet: { 
      changePoint:768,
      visibleItems: 3,
      itemsToScroll: 3
    }
  }
});

11. Available callback functions.

$("#rcbrand-example").rcbrand({
  loaded: function(){ },
  before: function(){ },
  after: function(){ },
  resize: function(){ }
});

---

This awesome jQuery plugin is developed by rc-oguz. For more Advanced Usages, please check the demo page or visit the official website.