Fully Responsive Image Slider In jQuery - TAMcarousel

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.

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.

  • Publication date: 21.04.2019
  • Source