jQuery Slider with 3 Images at a Time

Are you looking for an image slider that shows 3 images at a time? Well, here is a lightweight jQuery slider plugin to create an image slider with 3 images in view. The plugin renders images in CSS-designed cards that can be navigated by clicking the next/previous images. Likewise, it also supported keyboard arrow keys to navigate the next and previous image.

The images slide smoothly with fading effects while navigating. You just need to place your images in its HTML structure, the plugin will magically arrange them in 3 in-view cards. Besides this, you can also add any other element (like text/videos/iframes/inline elements) in the slider.

The plugin generates a general-purpose image carousel with a lightweight source code. So, it does not come with any configuration options. Anyhow, you can modify the slider function to customize the working of the slider.

Similarly, you can also customize the slider by editing its CSS file. Such as you can set the custom size for the slider, control min/max-width, and other similar properties.

How to Create Image Slide with 3 Images at a Time

In the very first step load the jQuery JavaScript library and "slider" CSS file in the head tag of your HTML document. If you already using jQuery in your project, then just add the CSS file.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> 
<!-- Slider CSS -->
<link href="css/slider.css" rel="stylesheet" type="text/css">

After that, create the HTML div tag with a class name "card-carousel" and place your images wrapping with a "my-card" wrapper element. You can also add some additional elements like text or inline HTML according to your needs.

<div class="card-carousel">
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?girl"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?cat"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?nature"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?yoga"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?bikni"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?design"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?wallpaper"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?dog"></div>
  <div class="my-card"><img src="https://source.unsplash.com/600x300/?buildings"></div>
</div>

In the above HTML code, you can place multiple images in the same order. You don’t need to add any additional tag/class for dividing images to show 3 at a time (in a view).
Finally, add the following slider JavaScript file into the script tag and place it before closing the body tag.

$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');
  }
});

That’s all! this jQuery plugin is useful to create an image slider with 3 images at a time. If you have any questions or need further help, let me know by comment below.