Responsive Customizable Slider/Carousel Plugin - coreSlider

File Size: 14.5 KB
Views Total: 6765
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Customizable Slider/Carousel Plugin - coreSlider

coreSlider is a fresh new jQuery slider plugin that lets you create a responsive, cross-platform, highly customizable slider/carousel for showcasing any html content you want.

Key features:

  • Responsive design. Adaptive to any screen size.
  • Allows multiple items per slide.
  • Infinite loop.
  • Automatic mode with a specific interval.
  • Custom navigation controls.
  • Allows to clone items at the beginning and at the end of slider.

Basic usage:

1. Insert jQuery library and the jQuery coreSlider plugin's CSS & JS files into the head section of your html page.

<link href="coreSlider.css" rel="stylesheet">
<script src="//"></script>
<script src="coreSlider.js"></script>

2. Add your html content together with the nav controls to the slider.

<div id="example" class="core-slider">
  <div class="core-slider_viewport">
    <div class="core-slider_list">
      <div class="core-slider_item">Slide 1</div>
      <div class="core-slider_item">Slide 2</div>
      <div class="core-slider_item">Slide 3</div>
      <div class="core-slider_item">Slide 4</div>
  <div class="core-slider_nav">
    <div class="core-slider_arrow core-slider_arrow__right"></div>
    <div class="core-slider_arrow core-slider_arrow__left"></div>
  <div class="core-slider_control-nav"></div>

3. Call the function on the top container to generate a basic content slider.


4. Plugin's configuration options with default values.


  // autoplay interval
  interval: 5000,

  // infinite loop
  loop: true,

  // enable autoplay
  slideshow: true, 

  // enable auto resize depending on the screen size
  resize: true,

  // pause on hover
  pauseOnHover: true, 

  // start on hover
  startOnHover: false, 

  // slider selectors
  sliderSelector: '.core-slider_list',                   
  viewportSelector: '.core-slider_viewport',          
  itemSelector: '.core-slider_item', 

  // enable nav arrows
  navEnabled: true,  

  // selectors for nav arrows
  navSelector: '.core-slider_nav',  
  navItemNextSelector: '.core-slider_arrow__right',
  navItemPrevSelector: '.core-slider_arrow__left',   

  // enable nav dots
  controlNavEnabled: false, 

  // selectors for nav dots
  controlNavSelector: '.core-slider_control-nav',
  controlNavItemSelector: 'core-slider_control-nav-item', 

  // will be added when slider is fully loaded
  loadedClass: 'is-loaded', 

  // will be added to cloned slides (see option 'clone')
  clonedClass: 'is-cloned',  

  // Classname, indicates hidden things
  hiddenClass: 'is-hidden', 

  // will be added when item is disabled (in most of cases - item will be display: noned)
  disabledClass: 'is-disabled', 

  // will be added to active items (for example control navs, etc.)
  activeClass: 'is-active', 

  // Reload gif's on slide change for replaying cycled animation inside current slide
  reloadGif: false,   

  // Indicates, that at begin and at end of slider carousel items will be cloned to create 'infitite' carousel illusion
  clone: false,

  // How mutch items will be placed inside viewport. 
  // Leave 1 if this is slider, 2 ot more - it will look like a carousel                                           
  items: 1,                  

  // How many items must be slided by one action (NOTE: Must be less than 'items' option)                             
  itemsPerSlide: 1,                   

  // How mutch items will be cloned at begin and at end of slider                    
  cloneItems: 0                   


5. Callback functions.


  // before each slider animation
  before: function() {}, 

  // after each slider animation
  after: function() {},  

  // after slider was initialized
  init: function() {},

6. API methods.

// Update slider (useful when you remove/add slides)

// Play slider

// Stop slider

// Destroy slider instance

// Go to next slide

// Go to prev slide

// Go to the third slide


v1.2.6 (2019-12-02)

  • fix loop arrow disabling

v1.2.5 (2019-11-28)

  • add disabling arrows before slide animation will be completed


  • fix loop property to disable prev button once after init


  • Change disabled with hidden classnames


  • Fix and refactore setSlide method


  • added 'update' method.


  • v1.1.0


  • Fix carousel items count less than items param

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