Easy Infinite Carousel Slider Plugin - jQuery Silk-Carousel

Silk-Carousel is an easy-to-use, infinite-looping carousel/slider/slideshow plugin to automatically transition between an array of images at a given speed.

Features:

• Dynamic image rendering.
• Autoplay progress bar.
• Fade & zoom transition effects.
• Rich text caption bar.
• Fully responsive and cross-platform.
• Navigation arrows, pagination progressbars, and Autoplay/Pause controls.
• Auto hides controls on mouse out.
• Easy to extend and create your own themes.

How to use it:

1. Download and insert the Silk-Carousel plugin's files into your webpage which has jQuery library loaded.

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

2. Create a container where you want to place the carousel.

<div id="example"></div>

3. Define an array of images to display in the carousel.

var imageList = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg"
]

4. Define an array of image descriptions to display in the caption bar.

var imageDesc = [
    "<h1>Image 1</h1> \
    <span>This is Image 1</span>",
    "",
    "<h1>Image 3</h1> \
    <span>This is Image 3</span>",
    "<h1>Image 4</h1> \
    <span>This is Image 4</span>",
    "",
]

5. Define an array of anchor links to display at the bottom of the descriptions.

var imageLink = [
    "https://www.jqueryscript.net",
    "https://www.jqueryscript.net",
    "https://www.jqueryscript.net",
    "https://www.jqueryscript.net",
    "https://www.jqueryscript.net"
]

6. Initialize the carousel plugin and done.

carouselRun({
  _target: "#example",
  width: "40%",
  height: "580px",
  imageSrcs: imageList,
  anchorHrefs: imageLink,
  htBoardTexts: imageDesc
});

7. Create your own themes as follows:

.loli-pink{
  background-color: rgb(255, 68, 171);
  border-radius: 12px;
  outline: none !important;
  box-shadow: 0 0 8px snow;
  border: 1.6px dashed rgb(255, 68, 171);
}

.loli-pink .htBoard {
  border-radius: 12px;
  opacity: 0;
  transition: all 0.3s;
  border: 1.2px ridge rgb(255, 68, 171);
  background: url(./images/loli-pink/decor.png) rgba(255, 254, 248, 0.90) no-repeat !important;
  background-size: 8% !important;
  padding-left: 6%;
  filter: none !important;
}

.loli-pink .htBoard * {
  color: rgb(241, 97, 179);
}

.loli-pink:hover .htBoard{
  opacity: 1;
}

.loli-pink .barSet{
  filter: none !important;
}

.loli-pink .progressBar {
  border-radius: 9999px;
  background-color: rgba(255, 73, 173, 0.86); 
  border: 1.5px solid rgb(255, 68, 171);
}

.loli-pink .progressBar div{
  border-radius: 9999px;
}

.loli-pink .btnPrev{
  background-image: url(./images/loli-pink/prev.png);
}

.loli-pink .btnNext{
  background-image: url(./images/loli-pink/next.png);
  transform: none;
}

.loli-pink .turnBtn{
  background-color: rgb(255, 84, 182);
  filter: none !important;
  box-shadow: 0 0 8px snow;
  transition: opacity 0.3s, box-shadow 0.3s;
}

.loli-pink .turnBtn:hover{
  box-shadow: 0 0 14px snow;
}

.loli-pink .playPause {
  background-color: rgb(255, 84, 182);
  box-shadow: 0 0 8px snow;
  transition: opacity 0.5s;
  background-size: 67%;
  width: 67px;
  height: 48px;
  filter: none !important;
}

var pausemouseover = "url(./images/loli-pink/pause/pause-mo.png)";
var playmouseover = "url(./images/loli-pink/play/play-mo.png)";

var pausemousedown = "url(./images/loli-pink/pause/pause-md.png)";
var playmousedown = "url(./images/loli-pink/play/play-md.png)";

function otherPreset() {
  pauseimgUrl = "url(./images/loli-pink/pause/pause-ml.png)";
  playimgUrl = "url(./images/loli-pink/play/play-ml.png)";
}

function otherOperation() {

  var playPause = carouselInfo.carouselTarget + " .playPause";

  $(playPause).hover(
    () => {
      if (playStatus != pause)
        $(playPause).css("background-image", pausemouseover);
      else
        $(playPause).css("background-image", playmouseover);
    },
    () => {
      if (playStatus != pause)
        $(playPause).css("background-image", pauseimgUrl);
      else
        $(playPause).css("background-image", playimgUrl);
    }
  )
    .mousedown(
      () => {
        if (playStatus != pause)
          $(playPause).css("background-image", pausemousedown);
        else
          $(playPause).css("background-image", playmousedown);
      }
  );
}

carouselRun({
  _target: "#example",
  theme: "loli-pink",
  width: "40%",
  height: "580px",
  imageSrcs: imageList,
  anchorHrefs: imageLink,
  htBoardTexts: imageDesc
});

8. All default configuration options.

carouselRun({
  _target: null,
  theme: null,
  width: "60%",
  height: "450px",
  imageSrcs: new Array,
  anchorHrefs: new Array,
  htBoardTexts: new Array,
  _outline: true,
  playToggleBtn: true,
  mouseLeaveHideBtn: true,
  buttonsFilter: new Array,
  htBoardFilter: new Array,
  htBoardBackground: true,
  customLearnMoreContent: new Array,
  startFrom: 1,
  progressBarFilters: new Array,
  showStatus: true
});

---

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