flexCarousel

Bug

by cent cent

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="flexCarousel_1">
  <div>
    <img src="https://source.unsplash.com/user/omarlopez1/AjO8d3il_ns/100x100" alt="Collection" width="100" height="100">
  </div>
  <div>
    <img src="https://source.unsplash.com/user/branislavisko/vChTLx-QIz0/100x100" alt="Collection" width="100" height="100">
  </div>
  <div>
    <img src="https://source.unsplash.com/user/madisonccompton/FOpqUzWcamc/100x100" alt="Collection" width="100" height="100">
  </div>
  <div><img src="https://source.unsplash.com/user/alexandruz/-djRG1vB1pw/100x100" alt="Collection" width="100" height="100"></div>
</div>

CSS

/*!
 * flexCarousel.js v0.2.1
 * https://github.com/tomhrtly/flexCarousel.js
 *
 * Copyright 2018 Tom Hartley
 * Released under the MIT license
 */
 *{box-sizing:border-box}::after,::before{box-sizing:border-box}.fc{display:flex;width:100%}.fc.fc-arrows .fc-next,.fc.fc-arrows .fc-prev{align-items:center;background-color:transparent;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;justify-content:center;min-width:64px;outline:0;padding:0}.fc.fc-arrows.fc-arrow-overlay{position:relative}.fc.fc-arrows.fc-arrow-overlay .fc-next.fc-is-active,.fc.fc-arrows.fc-arrow-overlay .fc-prev.fc-is-active{color:rgba(27,27,27,.4);font-size:32px;height:100%;position:absolute;width:32px;z-index:1}.fc.fc-arrows.fc-arrow-overlay .fc-next.fc-is-active{right:0}.fc.fc-arrows.fc-arrow-overlay .fc-prev.fc-is-active{left:0}.fc.fc-arrows.fc-circles:not(.fc-circles-overlay) .fc-next.fc-is-active,.fc.fc-arrows.fc-circles:not(.fc-circles-overlay) .fc-prev.fc-is-active{height:calc(100% - 24px)}.fc.fc-circles .fc-circles{display:flex;justify-content:center;margin-top:16px}.fc.fc-circles.fc-circles-overlay .fc-circles{bottom:5%;position:absolute;width:100%}.fc.fc-circles.fc-circles-overlay .fc-container{position:relative}.fc-arrows .fc-next,.fc-arrows .fc-prev{border:none;background-color:transparent;color:inherit;cursor:pointer;font:inherit;padding:0}.fc-arrows .fc-next .fc-icon,.fc-arrows .fc-prev .fc-icon{display:none}.fc-arrows .fc-next.fc-is-active,.fc-arrows .fc-prev.fc-is-active{cursor:pointer}.fc-arrows .fc-next.fc-is-active .fc-icon,.fc-arrows .fc-prev.fc-is-active .fc-icon{color:rgba(27,27,27,.4);display:inline-flex;font-size:32px;height:32px;justify-content:center;position:absolute;width:32px}.fc-arrows .fc-next.fc-is-active .fc-icon svg,.fc-arrows .fc-prev.fc-is-active .fc-icon svg{height:100%;width:100%}.fc-arrows .fc-next.fc-is-active:hover .fc-icon,.fc-arrows .fc-prev.fc-is-active:hover .fc-icon{color:rgba(27,27,27,.8)}.fc-circles...

JavaScript

///////////////////////////////////////
"use strict";
/*!
 * flexCarousel.js v0.2.1
 * https://github.com/tomhrtly/flexCarousel.js
 *
 * Copyright 2018 Tom Hartley
 * Released under the MIT license
 *
 * Icons provided by Font Awesome: https://fontawesome.com
 */
/*!
 * flexCarousel.js v0.2.1
 * https://github.com/tomhrtly/flexCarousel.js
 *
 * Copyright 2018 Tom Hartley
 * Released under the MIT license
 *
 * Icons provided by Font Awesome: https://fontawesome.com
 */
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"undefined"!=typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){let i=window.flexCarousel||{},s=(i=function(){return function(i,s){this.defaults={arrows:!0,arrowsOverlay:!0,autoplay:!1,autoplaySpeed:5e3,circles:!0,circlesOverlay:!0,height:null,nextArrow:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>',prevArrow:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg>',slidesVisible:1,transition:"slide"},this.options=e.extend(this.defaults,s),this.activeSlide=0,this.selector=e(i),this.init()}}()).prototype;s.autoplay=function(){const...