Octavian Octavian - 1 year ago 91
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download