Multi-Display Carousel

Carousel manufacturer with multi-container capability

Demo

• Dependencies
• Arguments
• Example

Setting up

Include files carousel.pn.js, carousel.pn.css and Jquery in your project

Dependencies

1. Jquery
2. Jquery Ui for Easing

Arguments

Submit values to the carousel function as an object

Arguments	Description	type
carouselPath	(Necessary) Carousel address	String
contents	(Necessary) The content of the slides in HTML code. Content must be in the li tag	Array
Duration	Duration of the transfer.     default:   1000ms	Integer in milliseconds
Easing	Select an easing from Jquery Ui	String
Delay	Delay the execution of the transfer.     default:   0ms	Integer in milliseconds
startAnimation	To add custom animations. path = .carousel_container:nth-child(${i}) > ul	Function(path, Duration)
finalAnimation	When the transfer is complete	Function(path, Duration)

carousel({
  carouselPath: '.carousel-1',
  contents: contents1 // ['<li class="content"> <img src="./assets/img/01.jpg"> </li>', ...]
});

Example

HTML code

<div class="d-flex">
    <!-- carousel -->
    <div class="carousel carousel-2">
        <div class="carousel_container">
            <ul>
                <!--  -->
            </ul>
        </div>
        <div class="carousel_container">
            <ul>
                <!--  -->
            </ul>
        </div>
        <div class="carousel_container">
            <ul>
                <!--  -->
            </ul>
        </div>
        <!-- controller -->
        <div class="control prev"><span>&#8249;</span></div>
        <div class="control next"><span>&#8250;</span></div>
    </div>
</div>

SCSS code

.carousel .content img {
  user-select: none;

  border-radius: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}
.card-title {
  overflow: hidden;
  
  span {
    position: relative;
  }
}

JS code

value of contents2

var contents2 = [
  `<li class="card border-0 content rounded-0">
    <img class="card-img" src="./assets/img/05.jpg" alt="">
     <div class="card-img-overlay">
       <h5 class="card-title"><span>Title</span></h5>
     </div>
    </li>`,
  
  `<li class="card border-0 content rounded-0">
      <img class="card-img" src="./assets/img/04.jpg" alt="">
      <div class="card-img-overlay">
        <h5 class="card-title"><span>Title</span></h5>
      </div>
    </li>`,
  
  `<li class="card border-0 content rounded-0">
      <img class="card-img" src="./assets/img/02.jpg" alt="">
      <div class="card-img-overlay">
        <h5 class="card-title"><span>Title</span></h5>
      </div>
    </li>`,
  
  `<li class="card border-0 content rounded-0">
      <img class="card-img" src="./assets/img/01.jpg" alt="">
      <div class="card-img-overlay">
        <h5 class="card-title"><span>Title</span></h5>
      </div>
    </li>`,
  
  `<li class="card border-0 content rounded-0">
      <img class="card-img" src="./assets/img/03.jpg" alt="">
      <div class="card-img-overlay">
        <h5 class="card-title"><span>Title</span></h5>
      </div>
   </li>`
]

carousel({
  carouselPath: '.carousel-2',
  contents: contents2,

  Duration: 2000,
  Easing: 'easeInOutBack',

  Delay: 500,

  startAnimation: function (path) {
    $(`${path} .card-title span`).each((index, element) => {
      $(element).delay(index * 100).animate({

        top: '1.1em'

      }, index * 200)
    });
  },

  finalAnimation: function (path) {
    $(`${path} .card-title span`).each((index, element) => {
      $(element).delay(index * 100).animate({

        top: 0

      }, index * 200)
    });
  }
});