Адаптивный слайдер на сайт на примере owl carousel 2

Options

Siema comes with a few (optional) settings that you can change by passing an object as an argument. Default values are presented below.


(string or DOM element) The selector to use as a carousel. Siema will use all immediate children of this selector as a slider items. It can be a query string (example) or DOM element (example).

(number) Slide transition duration in milliseconds (example).

(string) It is like a CSS — describes acceleration curve (example).

(number or object) The number of slides to be shown. It accepts a number (example) or an object (example) for complex responsive layouts.

(number) Index (zero-based) of the starting slide (example).

(boolean) Use dragging and touch swiping (example).

(boolean) Allow dragging to move multiple slides.

(number) Touch and mouse dragging threshold (in px) (example).

(boolean) Loop the slides around (example).

(boolean) Enables layout for languages written from right to left (like Hebrew or Arabic) (example).

(function) Runs immediately after initialization (example).

(function) Runs after slide change (example).

How to use it:

Create the html for the slider.

<div id="slider" class="slider">
  <div class="wrapper">
    <div id="items" class="items">
      <span class="slide">Slide 1</span>
      <span class="slide">Slide 2</span>
      <span class="slide">Slide 3</span>
      <span class="slide">Slide 4</span>
      <span class="slide">Slide 5</span>
      ...
    </div>
  </div>
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>

The necessary CSS styles for the slider.

.slider {
  width: 300px;
  height: 200px;
}

.wrapper {
  overflow: hidden;
  position: relative;
  background: #222;
  z-index: 1;
}

#items {
  width: 10000px;
  position: relative;
  top: 0;
  left: -300px;
}

#items.shifting {
  transition: left .2s ease-out;
}

.slide {
  width: 300px;
  height: 200px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
  background: #FFCF47;
}

Style the navigation controls.

.control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(ChevronLeft.png);
  left: -20px;
}

.next {
  background-image: url(ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}

The necessary JavaScript to activate the slider.

var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('items'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

slide(slider, sliderItems, prev, next);

function slide(wrapper, items, prev, next) {
  var posX1 = 0,
      posX2 = 0,
      posInitial,
      posFinal,
      threshold = 100,
      slides = items.getElementsByClassName('slide'),
      slidesLength = slides.length,
      slideSize = items.getElementsByClassName('slide').offsetWidth,
      firstSlide = slides,
      lastSlide = slides,
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;
  
  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');
  
  // Mouse and Touch events
  items.onmousedown = dragStart;
  
  // Touch events
  items.addEventListener('touchstart', dragStart);
  items.addEventListener('touchend', dragEnd);
  items.addEventListener('touchmove', dragAction);
  
  // Click events
  prev.addEventListener('click', function () { shiftSlide(-1) });
  next.addEventListener('click', function () { shiftSlide(1) });
  
  // Transition events
  items.addEventListener('transitionend', checkIndex);
  
  function dragStart (e) {
    e = e || window.event;
    e.preventDefault();
    posInitial = items.offsetLeft;
    
    if (e.type == 'touchstart') {
      posX1 = e.touches.clientX;
    } else {
      posX1 = e.clientX;
      document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }

  function dragAction (e) {
    e = e || window.event;
    
    if (e.type == 'touchmove') {
      posX2 = posX1 - e.touches.clientX;
      posX1 = e.touches.clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }
    items.style.left = (items.offsetLeft - posX2) + "px";
  }
  
  function dragEnd (e) {
    posFinal = items.offsetLeft;
    if (posFinal - posInitial < -threshold) {
      shiftSlide(1, 'drag');
    } else if (posFinal - posInitial > threshold) {
      shiftSlide(-1, 'drag');
    } else {
      items.style.left = (posInitial) + "px";
    }

    document.onmouseup = null;
    document.onmousemove = null;
  }
  
  function shiftSlide(dir, action) {
    items.classList.add('shifting');
    
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;      
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;      
      }
    };
    
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

    if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

    if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }
    
    allowShift = true;
  }
}

Basic Usage:

1. Include required jQuery Carousel CSS in the header

<link href="abitgone-carousel.css" rel="stylesheet">

2. Create the html

<div class="carousel-container carousel-horizontal" data-carousel data-carousel-style="horizontal" data-carousel-timer="6000" data-carousel-pagelist>
<div class="carousel-items" data-carousel-items>
<div class="carousel-item" data-carousel-item id="chi1" style="background-image: url(http://lorempixel.com/600/400/?1);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi5"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi2"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi2" style="background-image: url(http://lorempixel.com/600/400/?2);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi1"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi3"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi3" style="background-image: url(http://lorempixel.com/600/400/?3);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi2"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi4"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi4" style="background-image: url(http://lorempixel.com/600/400/?4);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi3"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi5"><span>Next</span></a>
</div>
<div class="carousel-item" data-carousel-item id="chi5" style="background-image: url(http://lorempixel.com/600/400/?5);">
<a data-carousel-pager class="carousel-pager pager-prev" href="#chi4"><span>Prev</span></a>
<a data-carousel-pager class="carousel-pager pager-next" href="#chi1"><span>Next</span></a>
</div>
</div>
</div>data-carousel-style

3. Include jQuery library and jQuery Carousel on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="abitgone-carousel.js"></script>
  • Prev: Flexible and Touch-Friendly jQuery Range Slider Plugin — Ion.RangeSlider
  • Next: Flexible jQuery Tabbed Content Plugin — Herotabs

Bootstrap 4 Carousel Responsive jQuery Plugin

July 10, 2018 | Bootstrap, Carousel, Plugins, Premium, Slider

Bootstrap 4 carousel contains different types of carousels including slider with thumbnails, multiple items carousel, fade effect carousel, bootstrap image slider gallery etc.

Features:

  • Compatible With Bootstrap 4
  • Compatible With Bootstrap 3
  • 100% Responsive And Mobiles friendly
  • Support Bootstrap Columns Grid System
  • 200+ pre-built layouts and examples
  • 150+ Documentation Files
  • 40+ Text and Images Layers Animation Effects
  • 8+ Slides Transition Effects
  • Support Thumbnails Navigation
  • Support HTML5, YouTube, Vimeo Videos
  • Full Screen, Multiple items, Videos Background layouts

How to use it:

1. The plugin requireds the latest jQuery library to work.

<script src="/path/to/jquery.min.js"></script>

2. Insert the uniСarousel plugin after jQuery.

<link rel="stylesheet" href="jquery.uni-carousel.css" />
<script src="jquery.uni-carousel.js"></script>

3. The required HTML structure for the carousel/slider.

<div class="uni-carousel">
  <div class="uni-carousel-inner">
    <div class="uni-carousel-inner-limit">
      <div class="uni-carousel-item uni-carousel-item_active">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/1.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/2.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/3.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/4.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/5.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/6.webp" alt="" />
        </div>
      </div>
    </div>
  </div>
  <a class="uni-carousel-control uni-carousel-control_prev" href="javascript:void(0)" title="Prev"></a>
  <a class="uni-carousel-control uni-carousel-control_next" href="javascript:void(0)" title="Next"></a>
</div>

4. Initialize the plugin to generate a basic carousel/slider.

$('.uni-carousel').uniCarousel();

5. To customize the carousel/slider, override the following options and pass them as an object to the method.

$('.uni-carousel').uniCarousel({

  // width
  width: 'auto',

  // height
  height: 'auto',

  // the number of items per slide
  count: 3,

  // inverse the direction
  inverse: false,

  // infinite loop
  cycle: true,

  // or 'vertical'
  orientation: 'horizontal',

  // autoplay
  autoplay: false,

  // immediately play on load
  playImmediately: true,

  // pause on hover
  pause: false,

  // animation speed
  time: 600,

  // autoplay interval
  interval: 2000,

  // or 'slider'
  mode: 'carousel',

  // custom controls
  controls:   {
    arrows: {
      position: 'out'
    },
    indicators: {
      position: 'out'
    }     
  }
  
});
  • Prev: Image Slider With Zoom & Shrink Transitions
  • Next: Automatic Cross-fading Slider For Any Content — autoSlider

How to use it:

1. Add a group slides to the card carousel.

<div class="card-carousel">
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  ...
</div>

2. The primary CSS/CSS3 styles for the card carousel.

.card-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-carousel .my-card {
  height: 20rem;
  width: 12rem;
  position: relative;
  z-index: 1;
  -webkit-transform: scale(0.6) translateY(-2rem);
  transform: scale(0.6) translateY(-2rem);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  background: #2e5266;
  background: linear-gradient(to top, #2e5266, #6e8898);
  transition: 1s;
}

.card-carousel .my-card:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 100%;
  background-color: rgba(0,0,0,0.3);
  bottom: -5rem;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.card-carousel .my-card.active {
  z-index: 3;
  -webkit-transform: scale(1) translateY(0) translateX(0);
  transform: scale(1) translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
}

.card-carousel .my-card.prev, .card-carousel .my-card.next {
  z-index: 2;
  -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
  transform: scale(0.8) translateY(-1rem) translateX(0);
  opacity: 0.6;
  pointer-events: auto;
  transition: 1s;
}

3. Apply your own CSS styles to the slides.

.card-carousel .my-card:nth-child(0):before {
  content: '0';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.card-carousel .my-card:nth-child(1):before {
  content: '1';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.card-carousel .my-card:nth-child(2):before {
  content: '2';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.card-carousel .my-card:nth-child(3):before {
  content: '3';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.card-carousel .my-card:nth-child(4):before {
  content: '4';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

4. Import the necessary jQuery JavaScript library into the document.

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

5. The main JavaScript (jQuery script) to activate the card carousel.

$num = $('.my-card').length;
$even = $num / 2;
$odd = ($num + 1) / 2;

if ($num % 2 == 0) {
  $('.my-card:nth-child(' + $even + ')').addClass('active');
  $('.my-card:nth-child(' + $even + ')').prev().addClass('prev');
  $('.my-card:nth-child(' + $even + ')').next().addClass('next');
} else {
  $('.my-card:nth-child(' + $odd + ')').addClass('active');
  $('.my-card:nth-child(' + $odd + ')').prev().addClass('prev');
  $('.my-card:nth-child(' + $odd + ')').next().addClass('next');
}

$('.my-card').click(function() {
  $slide = $('.active').width();
  console.log($('.active').position().left);
  
  if ($(this).hasClass('next')) {
    $('.card-carousel').stop(false, true).animate({left: '-=' + $slide});
  } else if ($(this).hasClass('prev')) {
    $('.card-carousel').stop(false, true).animate({left: '+=' + $slide});
  }
  
  $(this).removeClass('prev next');
  $(this).siblings().removeClass('prev active next');
  
  $(this).addClass('active');
  $(this).prev().addClass('prev');
  $(this).next().addClass('next');
});


// Keyboard nav
$('html body').keydown(function(e) {
  if (e.keyCode == 37) { // left
    $('.active').prev().trigger('click');
  }
  else if (e.keyCode == 39) { // right
    $('.active').next().trigger('click');
  }
});
  • Prev: 3D Multi-layer Parallax Slider With jQuery
  • Next: Responsive Image Zoom Slider/Slideshow With jQuery

Basic usage:

1. Include the latest jQuery and jQuery jcarousel plugin on your page.

<script src="jquery.min.js"></script>
<script src="dist/jquery.jcarousel.min.js"></script>

2. Include an extension of the jQuery jcarousel on the page (OPTIONAL).

<script src="dist/jquery.jcarousel-autoscroll.min.js"></script>
<script src="dist/jquery.jcarousel-control.min.js"></script>
<script src="dist/jquery.jcarousel-pagination.min.js"></script>
<script src="dist/jquery.jcarousel-scrollintoview.min.js"></script>

3. The example CSS for the carousel.

.carousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.carousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.carousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/

.carousel {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
}
.carousel ul {
width: 20000em;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}
.carousel li {
float: left;
}
/** Carousel Controls **/

.carousel-control-prev, .carousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.carousel-control-prev {
left: -50px;
}
.carousel-control-next {
right: -50px;
}
.carousel-control-prev:hover span, .carousel-control-next:hover span {
display: block;
}

4. The required Markup HTML Structure. Configuration is done via attributes.

<div class="carousel-wrapper">
<div data-jcarousel="true" data-wrap="circular" class="carousel">
<ul>
<li><img src="img1.jpg" width="600" height="400" alt=""></li>
<li><img src="img2.jpg" width="600" height="400" alt=""></li>
<li><img src="img3.jpg" width="600" height="400" alt=""></li>
<li><img src="img4.jpg" width="600" height="400" alt=""></li>
<li><img src="img5.jpg" width="600" height="400" alt=""></li>
<li><img src="img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<a data-jcarousel-control="true" data-target="-=1" href="#" class="carousel-control-prev">&lsaquo;</a> 
<a data-jcarousel-control="true" data-target="+=1" href="#" class="carousel-control-next">&rsaquo;</a> 
</div>

4. The javascript to activate the plugin.

(function($) {
  $(function() {
    $('').each(function() {
      var el = $(this);
      el.jcarousel(el.data());
    });

    $('').each(function() {
      var el = $(this);
      el.jcarouselControl(el.data());
    });
  });
})(jQuery);

5. All possible plugin options for the carousel.

{

  // function or a jQuery selector to select the list
  list: function() {
    return this.element().children().eq(0);
  },

  // function or a jQuery selector to select the items
  items: function() {
    return this.list().children();
  },

  // animation speed
  animation:   400,

  // true = enables CSS3 transitions.
  transitions: false,

  // whether to wrap at the first or last item (or both) and jump back to the start/end
  // "first", "last", "both" or "circular"
  wrap:        null,

  // appears in vertical orientation
  vertical:    null,

  // appears in RTL (Right-To-Left) mode
  rtl:         null,

  // whether to center the items
  center:      false

}

API

As mentioned above, Siema doesn’t come with many options — just a few useful methods. Combine it with some very basic JavaScript and voila!

Go to previous item (example). Optionally slide few items backward by passing (number) argument (example). Optional (function) available as a third argument (example).

Go to next item (example). Optionally slide few items forward by passing (number) argument (example). Optional (function) available as a third argument (example).

Go to item at particular (number) (example). Optional (function) available as a second argument (example).

Remove item at particular (number) (example). Optional (function) available as a second argument (example).

Insert new (DOM element) at specific (number) (example). Optional (function) available as a third argument (example).

Prepend new (DOM element) (example). Optional (function) available as a second argument (example).

Append new (DOM element) (example). Optional (function) available as a second argument (example).

Remove all event listeners on instance (example). Use to restore the initial markup inside selector (example). Optional (function) available as a third argument (example).

Prints current slide index (example).

Changelog:

v3.0.27 (08/20/2020)

  • A fix for the window bind issue has been merged
  • The drag handler now respects event.cancelable and bails if it returns false

v3.0.26 (08/14/2020)

Bug fix

v3.0.25 (08/13/2020)

Small code improvements that resulted in smaller bundle size.

v3.0.25 (08/11/2020)

Remove unnecessary declarations

v3.0.23 (08/02/2020)

Bugfixes

v3.0.20 (07/22/2020)

Add Type suffix to exported types

v3.0.19 (07/20/2020)

React dependency issue fix

v3.0.17 (07/10/2020)

Fixed: Type definition file refers to files that don’t exist in the build

v3.0.10 (06/27/2020)

Added React component.

v3.0.0 (06/12/2020)

  • New options.
  • dragStart has been renamed to pointerDown.
  • dragEnd has been renamed to pointerUp.
  • scrollBy() has been removed.
  • scrollToProgress() has been removed.
  • target : boolean for the API method scrollProgress() has been removed.
  • changeOptions() has been renamed to reInit().
  • scrollSnapList() now returns an array of numbers representing the scroll progress for each snap point. Indexes and slide nodes per snap point has been removed.
  • Bugs fixed.

v2.9.1 (04/22/2020)

Added scrollToProgress method

v2.9.0 (03/27/2020)

Added a new feature which allows users to specify percentage alignment by passing a number, where a fraction like 0.2 represents 20% of the viewport size. Percentage will be measured from the start edge of the viewport.


v2.8.0 (02/26/2020)

Added Settle event

v2.7.4 (02/13/2020)

Fixed Android touch device event bug

v2.7.0 (01/31/2020)

Added new scrollBy() method.

v2.6.4 (12/05/2019)

Bugfixes

v2.6.0 (11/15/2019)

Added clickAllowed() method.

v2.5.5 (11/09/2019)

Package updates

v2.5.0 (10/07/2019)

Added scrollProgress method.

v2.4.0 (08/31/2019)

When using the option containScroll Embla will automatically merge any excessive snap points that share the same snap position

v2.3.0 (07/16/2019)

Added ‘scroll’ event.

v2.2.0 (07/11/2019)

Added on click API Method

v2.1.14 (07/11/2019)

Fixed canScrollNext & canScrollPrev bug

v2.1.13 (07/10/2019)

Updated

v2.1.10 (07/06/2019)


New containScroll options

v2.0.3 (07/04/2019)

Solved the Webpack 4 UMD module window issue.

v2.0.0 (06/25/2019)

  • Improved drag accuracy
  • Improved link handling
  • More API methods added
  • Changed API method names
  • Removed groupedIndexes() method

v1.0.0 (06/19/2019)

  • groupSlides –> slidesToScroll
  • hasPreviousIndex() –> canScrollPrevious()
  • hasNextIndex() –> canScrollNext()

v0.9.0 (06/16/2019)

Added more API.

v0.8.0 (06/13/2019)

  • Add: closeOnScroll option to close pickr if the user scrolls the area behind it. Useful on nested scrollable elements.
  • Change: Make pickr’s position absolute to prevent sticking at the top.
  • Change: Make swatches not-centered

v0.7.2 (06/08/2019)

Drag threshold has been lowered. Less drag force is now required for a slide change to occur.

Vanilla JS Carousel Plugins:

Responsive Slider Plugin with CSS3 Transitions — Glide.js

Glide.js is a lightweight, flexible ES6 JavaScript slider/carousel library that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions.

Basic Image Carousel With Pure JavaScript – siema.js

siema.js is a minimal vanilla JavaScript plugin used for generating a basic yet customizable and draggable slider/carousel without any 3rd dependencies.

Mobile-friendly Carousel/Scroller In Pure JS – Glider.js

Glider.js is a lightweight but powerful JavaScript plugin to create responsive, accessible, touch-enabled carousels/scrollers for the web.

Basic Responsive Background Slider In Pure JavaScript – SimpleSlider

SimpleSlider is a generic responsive slider/carousel plugin with JavaScript that has the ability to slides through any HTML contents at a certain speed.

Responsive Card Slider/Swiper In JavaScript – stacked-cards

A responsive, mobile-friendly card slider/swiper which enables the user to switch between stacked card items through click and touch swipe events.

Advanced Bootstrap Carousel Plugin

July 17, 2020 | Bootstrap, Carousel, Plugins, Premium

Advanced Bootstrap Carousel Plugin could be your next one-stop-destination. If an advanced Bootstrap carousel with 138 pre-made layouts is available, then you need not to use any other framework. Have a look at our designs with advanced functionality that you would’ve never come across. It could prove to be a lifesaver for Bootstrap users. Advanced Bootstrap Carousel Plugin is a clean, innovative, modern, and elegant Bootstrap Slider Plugin, it helps you display your content in the most stylish way. Whether you are looking for a full-width, Cover Flow, Hero Scene, or even a post slider, the Advanced Bootstrap Plugin Would let you artistically tell your stories.

How to use it:

1. Include jQuery and waterwheelCarousel.js into your head section

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.min.js"></script>

2. Call the function.

$(document).ready(function () {
  var carousel = $("#carousel").waterwheelCarousel({
    flankingItems: 3,
  });

  $('#prev').bind('click', function () {
    carousel.prev();
    return false
  });

  $('#next').bind('click', function () {
    carousel.next();
    return false;
  });
});

3. The required markup.

<div id="carousel"> 
<img src="images/1.jpg" id="item-1" /> 
<img src="images/2.jpg" id="item-2" /> 
<img src="images/3.jpg" id="item-3" /> 
<img src="images/4.jpg" id="item-4" /> 
<img src="images/5.jpg" id="item-5" /> 
<img src="images/6.jpg" id="item-6" /> 
<img src="images/7.jpg" id="item-7" /> 
<img src="images/8.jpg" id="item-8" /> 
<img src="images/9.jpg" id="item-9" /> 
</div>
<a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a>

4. All default configuration options.

$("#carousel").waterwheelCarousel({
  // number tweeks to change apperance
  startingItem:               1,   // item to place in the center of the carousel. Set to 0 for auto
  separation:                 175, // distance between items in carousel
  separationMultiplier:       0.6, // multipled by separation distance to increase/decrease distance for each additional item
  horizonOffset:              0,   // offset each item from the "horizon" by this amount (causes arching)
  horizonOffsetMultiplier:    1,   // multipled by horizon offset to increase/decrease offset for each additional item
  sizeMultiplier:             0.7, // determines how drastically the size of each item changes
  opacityMultiplier:          0.8, // determines how drastically the opacity of each item changes
  horizon:                    0,   // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
  flankingItems:              2,   // the number of items visible on either side of the center                  

  // animation
  speed:                      500,      // speed in milliseconds it will take to rotate from one to the next
  animationEasing:            'linear', // the easing effect to use when animating
  quickerForFurther:          true,     // set to true to make animations faster when clicking an item that is far away from the center
  edgeFadeEnabled:            false,    // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image

  // misc
  linkHandling:               2,                 // 1 to disable all (used for facebox), 2 to disable all but center (to link images out)
  autoPlay:                   0,                 // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Can be negative
  orientation:                'horizontal',      // indicate if the carousel should be 'horizontal' or 'vertical'
  activeClassName:            'carousel-center', // the name of the class given to the current item in the center
  keyboardNav:                false,             // set to true to move the carousel with the arrow keys
  keyboardNavOverride:        true,              // set to true to override the normal functionality of the arrow keys (prevents scrolling)
  imageNav:                   true,              // clicking a non-center image will rotate that image to the center

  // preloader
  preloadImages:              true,  // disable/enable the image preloader. 
  forcedImageWidth:           0,     // specify width of all images; otherwise the carousel tries to calculate it
  forcedImageHeight:          0,     // specify height of all images; otherwise the carousel tries to calculate it

  // callback functions
  movingToCenter:             $.noop, // fired when an item is about to move to the center position
  movedToCenter:              $.noop, // fired when an item has finished moving to the center
  clickedCenter:              $.noop, // fired when the center item has been clicked
  movingFromCenter:           $.noop, // fired when an item is about to leave the center position
  movedFromCenter:            $.noop  // fired when an item has finished moving from the center
});

С этим читают