2

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.

Octavian
  • 494
  • 1
  • 8
  • 20

3 Answers3

1

The Bootstrap carousel only shows the current image (it does not show the previous and next images on the sides): http://getbootstrap.com/javascript/#carousel

The Slippry Slider is responsive and has a well-documented example achieving just what you want: http://slippry.com/examples/shop

rebagliatte
  • 2,110
  • 1
  • 20
  • 25
  • Does Slippry Slider allow for variable width, fixed-height images (so images keep proportions, have same height, but are allowed equal width)? Not seeing anything about that in documentation. – Octavian Nov 08 '16 at 15:54
  • Yup, if you resize your browser you'll see the slider getting resized. The example is set so it uses the full width of the page. – rebagliatte Nov 08 '16 at 16:07
  • Regarding the slider height, you can control whether to have a fixed height (and make images fill that space in proportionally) or make it change on the fly based on the current slide. You can achieve this by using the `adaptiveHeight` setting as described here http://slippry.com/settings/ – rebagliatte Nov 08 '16 at 16:09
1

If you want to achieve this, you can use the classical twitter bootstrap carousel example with multiple items. All you have to do is to add 2 div blocks with 33% width placed in the left and right to cover the images from the left and the right and you can also add some blur effect or some opacity to keep the focus on the main image.

<div class="inactive" style="left: 0px;"></div>
<div class="inactive" style="right: 0px;"></div>

.inactive {
    top: 0px;          
    width: 33%; 
    height: 100%; 
    display: block; 
    position: absolute; 
    background: white; 
    opacity: 0.8; 
    z-index: 1;
}

Here is my code exemple.

Community
  • 1
  • 1
paulalexandru
  • 9,218
  • 7
  • 66
  • 94
  • How would I get proportional, fixed-height images without weird blank space in between them? Looks like this solution requires equal width (or cropped) images. – Octavian Nov 08 '16 at 15:52
  • Just set the height of your container (.carousel-inner). Set it to the maximum height of your pictures. After that you have the option to vertical align them to be in the center of the carousel item. – paulalexandru Nov 08 '16 at 19:16
1

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.

xWaZzo
  • 748
  • 5
  • 19