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="//code.jquery.com/jquery.min.js"></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>
  </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>
  <div class="core-slider_control-nav"></div>
</div>

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

$('#example').coreSlider();

4. Plugin's configuration options with default values.

$('#example').coreSlider({

  // 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.

$('#example').coreSlider({

  // 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)
$('#example').coreslider('update');  

// Play slider
$('#example').coreslider('play');    

// Stop slider
$('#example').coreslider('stop');    

// Destroy slider instance
$('#example').coreslider('destroy'); 

// Go to next slide
$('#example').coreslider('next');    

// Go to prev slide
$('#example').coreslider('prev');    

// Go to the third slide
$('#example').coreslider(3);         

Changelog:

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

2019-11-24

• fix loop property to disable prev button once after init

2017-03-24

• Change disabled with hidden classnames

2017-02-22

• Fix and refactore setSlide method

2017-02-17

• added 'update' method.

2017-02-12

• v1.1.0

2016-04-14

• 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.