Octavian Octavian - 1 month ago 20
jQuery Question

How to make a bootstrap carousel (fed from Instagram) with nearby images visible?

How would one go about making a bootstrap (or at least responsive) carousel with images to the right and left of the main image visible to the sides of the screen? Ideally these side images would have a transparent overlay or a blur effect to keep from being distracting.

Bonus points for making an example fed from Instagram!

EDIT: I don't think I made it clear before, but I need it to show images with equal height, but variable width (maintaining proportions - no crop). Focused image would be centered, with adjacent images falling off screen.

Answer

In my experience with sliders, I really like swiper slider

It's really easy and simple to use. You have an HTML layout:

 <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><!-- What ever you want here - Slide 1 --></div>
        <div class="swiper-slide"><!-- Slide 2 --></div>
        ... <!-- And so on… -->
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
</div>

And the javascript has some options

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 10,
  centeredSlides: true,
  slidesPerView: 3
});

And they also have a lot of working examples, so you shouldn't have problems using swiper slider.

JSFiddle live example here

Please notice that you need to include swiper.min.css, swiper.min.js and a little css to make it work.

I have used Instagram integrations with Wordpress using The Instagram Feed plugin but never with something else, however, this javascript plugin looks nice but haven't tested it yet.