Fully Responsive Image Slider In jQuery - TAMcarousel

TAMcarousel is an ultra-small, cross-browser, fully responsive image slider/carousel that works with the native <img> tag, built using jQuery and plain HTML/CSS.

Dead simple to use and without writing any JS & CSS codes. 

The carousel has the ability to automatically stretch and shrink images on window resize, while maintaining the regular aspect ratio.

How to use it:

1. Load the stylesheet TAMcarousel.css and JavaScript TAMcarousel.js in the document. Make sure you first have jQuery library loaded.

<link rel="stylesheet" href="./TAMcarousel.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="./TAMcarousel.js"></script>

2. Add images as slides together with next/prev arrows to the slider/carousel container with the CSS class of TAMcarousel. That's it.

<div id="carousel-container" class="TAMcarousel">
  <div class="left-container">
    <img class="left-btn" src="./arrowleftwhite.png" alt="Prev"/>
  </div>
  <div class="right-container">
    <img class="right-btn" src="./arrowrightwhite.png" alt="Next"/>
  </div>

  <div id="slide1" class="slide">
    <img src="./img1.jpg" alt="img1">
  </div>

  <div id="slide2" class="slide">
    <img src="./img2.jpg" alt="img2">
  </div>

  <div id="slide3" class="slide">
    <img src="./img3.jpg" alt="img3">
  </div>

  <div id="slide4" class="slide">
    <img src="./img4.jpg" alt="img4">
  </div>
</div>

---

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