Accordion Carousel With jQuery And CSS Grid Layout - Blue-Slider

Blue-Slider is a simple, customizable, and fully responsive accordion slider/carousel plugin built with JavaScript (jQuery) and CSS3 grid layout system.

More features:

• Infinite looping.
• Autoplay.
• Navigation arrows.
• Allows to slide between slides via mouse drag.

How to use it:

1. Add slides to the accordion slider.

<div class="slider">
  <div class="item"><img src="1.jpg" alt=""></div>
  <div class="item"><img src="2.jpg" alt=""></div>
  <div class="item"><img src="3.jpg" alt=""></div>
  <div class="item"><img src="4.jpg" alt=""></div>
  <div class="item"><img src="5.jpg" alt=""></div>
  ...
</div>

2. Add jQuery library and the Blue-Slider plugin to the bottom of the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/blue-slider.js"></script>

3. The example CSS styles for the accordion slider.

.slider {
  height: 100%
}

.slider .slide-wrapper {
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.slider .slide-tracker .my-fr-current .item::before {
  background-color: rgba(0, 0, 0, 0)
}

.slider .item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative
}

.slider .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color 1s
}

.slider .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center
}

4. Initialize the accordion slider and done.

$('.slider').blue_slider({
  // options here
});

5. Add prev/next buttons to the accordion slider.

<i class="prev-slide">Prev</i>
<i class="next-slide">Next</i>

$('.slider').blue_slider({
  arrows: true,
  prev_arrow: '.first-sample .prev-slide',
  next_arrow: '.first-sample .next-slide'
});

6. Full plugin options to customize the accordion slider.

$('.slider').blue_slider({
  slide_template: '1fr',
  slide_gap: 0,
  current_fr_index: 1,
  current_fr_index_flow: true,
  slide_step: 1,
  current_fr_class: 'fr-current',
  active_fr_class: 'fr-active',
  custom_fr_class: '',
  left_padding: 0,
  right_padding: 0,
  speed: 1000,
  ease_function: 'ease-out',
  sencitive_drag: 100,
  loop: false,
  auto_play: false,
  auto_play_period: 3000,
  start_slide_index: 1,
  arrows: false,
  prev_arrow: '',
  next_arrow: '',
});

---

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