Responsive Image/Video Carousel Plugin - jQuery QCSlider

QCSlider is a lightweight and responsive carousel slider jQuery plugin that supports various content types like images, HTML5 videos, and Youtube videos.

How to use it:

1. To get started, include the jQuery QCSlider plugin's JavaScript and CSS on the webpage.

<link rel="stylesheet" href="/path/to/css/qc.slider.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/qcslider.jquery.js"></script>

2. Add images and HTML5/Youtube videos to the carousel slider.

<section class="slide">
  <div class="slider-container">
    <ul class="slider-wrapper" id="slider">
      <li class="slide-current">
        <!-- Image -->
        <img src="1.jpg"/>
        <!-- Image Description -->
        <div class="capa">Image Description</div>
      </li>
      <!-- HTML5 Video -->
      <li class="video" data-type="video" data-video="1.mp4" data-muted="true"></li>
      <!-- Youtube Video -->
      <li class="video" data-type="youtube" data-video="Youtube Video ID Here" data-muted="true"></li>
    </ul>
    <!-- Nav controls -->
    <div class="drt-control control-left" id="lft-control"><</div>
    <div class="drt-control control-right" id="rht-control">></div>
    <ul class="slider-controls" id="slider-controls"></ul>
    <!-- Progressbar -->
    <div class="tempo-bar" id="barra"></div>
  </div>
</section>

3. Initialize the QCSlider plugin on document ready.

$(document).ready(function($){
  $("#slider").QCslider({
    // options here
  });
});

4. Override the default duration for autoplay. Default: 8000.

$(document).ready(function($){
  $("#slider").QCslider({
    duration: 5000
  });
});

5. Customize the styles of the carousel by overriding the default CSS variables:

:root {
  --opacity-slide: 0.5;
  --height-slider: 500px;
  --color-slider: #ff3e00;
  --height-responsive: 500px;
}

---

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