Basic Responsive Background Slider - jQuery sliCarousel

sliCarousel is a small jQuery plugin for creating minimal, responsive, draggable content sliders/carousels on the web app.

Main features:

• Supports unlimited amount of slides.
• Mouse drag to move.
• Navigation arrows and pagination bullets.
• Fully responsive and mobile friendly.
• Full width mode.

How to use it:

1. Load the core stylesheet slicarousel.css for the slider controls.

<link rel="stylesheet" href="css/slicarousel.css">

2. Load jQuery library and the main JavaScritp slicarousel.js at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/slicarousel.js"></script>

3. Create a container in which you want to place the slider.

<div class="mySlider"></div>

4. Call the function on the slider container.

$("mySlider").my_slider()

5. This will generate a basic slider following the HTML structure like these.

<div class="the_slider">
  <div class="s_slider_container" style="width: 600%;">
    <div class="s_slide s_slide_0" style="width: 16.6667%;"></div>
    <div class="s_slide s_slide_1" style="width: 16.6667%;"></div>
    <div class="s_slide s_slide_2" style="width: 16.6667%;"></div>
    <div class="s_slide s_slide_3" style="width: 16.6667%;"></div>
    <div class="s_slide s_slide_4" style="width: 16.6667%;"></div>
    <div class="s_slide s_slide_0" style="width: 16.6667%;"></div>
  </div>
  <div class="s_arrows arrows"><span class="prev">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
      <g>
        <g>
          <path d="m64.5,122.6c32,0 58.1-26 58.1-58.1s-26-58-58.1-58-58,26-58,58 26,58.1 58,58.1zm0-108c27.5,5.32907e-15 49.9,22.4 49.9,49.9s-22.4,49.9-49.9,49.9-49.9-22.4-49.9-49.9 22.4-49.9 49.9-49.9z"></path>
          <path d="m70,93.5c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-23.5-23.5 23.5-23.5c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-26.4,26.4c-0.8,0.8-1.2,1.8-1.2,2.9s0.4,2.1 1.2,2.9l26.4,26.4z"></path>
        </g>
      </g>
    </svg>
    </span><span class="next">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
      <g>
        <g>
          <path d="M64.5,122.6c32,0,58.1-26,58.1-58.1S96.5,6.4,64.5,6.4S6.4,32.5,6.4,64.5S32.5,122.6,64.5,122.6z M64.5,14.6 c27.5,0,49.9,22.4,49.9,49.9S92,114.4,64.5,114.4S14.6,92,14.6,64.5S37,14.6,64.5,14.6z"></path>
          <path d="m51.1,93.5c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l26.4-26.4c0.8-0.8 1.2-1.8 1.2-2.9 0-1.1-0.4-2.1-1.2-2.9l-26.4-26.4c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l23.5,23.5-23.5,23.5c-1.6,1.6-1.6,4.2 0,5.8z"></path>
        </g>
      </g>
    </svg>
    </span></div>
  <div class="dot_nav"><span class="dot dot-0 active" slide-nbr="0"></span><span class="dot dot-1" slide-nbr="1"></span><span class="dot dot-2" slide-nbr="2"></span><span class="dot dot-3" slide-nbr="3"></span><span class="dot dot-4" slide-nbr="4"></span></div>
</div>

6. Add your own background images to the slides.

.s_slide_0{
  background: aquamarine
}

.s_slide_1{
  background: #119955
}

.s_slide_2{
  background: aquamarine
}

.s_slide_3{
  background: crimson
}

.s_slide_4{
  background: lightseagreen
}

7. Possible options to customize the slider.

$("mySlider").my_slider({

  // The number of slides 
  "nbr_slides" : 5,               

  // Avoid CSS classes mixed up
  "class_name_prefix" : "s_",     

  // Enable the arrows navigation 
  "arrows" : true,                

  // Enable the dots navigation
  "dot_nav": true,                

  // width: 100%
  "full_width": true,

  // autoplay
  "autoplay": {
    "enabled": true, 
    "direction": "ltr"
  },

  // transition delay
  "delay": 2500,

  // animation speed
  "speed": 500          
  
})

Changelog:

2019-09-23

• Added autoplay
• Added transition deley
• Added animation speed

---

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