How to create Image Grid Slider with different heights and width of image ( masonry slider )

user_2775082 0
Viewed 555

I wanted to create a grid image slider with different height and width of the image. something looks like the below image.

In the below image we have the first image slider as Squire Image and 2nd slider as two rectangle image than again Squire image and continue ...

enter image description here

Can anyone suggest any slider which supports this type of image configuration?

owl-carousel slick.js reactjs css jquery
1 Answers

You could use Swiper.js for this, adding a custom class to the swiper-slide elements, eg. swiper-slide grid-squire etc...

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide grid-squire">
            <img data-src="1.jpg" class="squire-image-type-1">
            <img data-src="2.jpg" class="squire-image-type-2">
            <img data-src="3.jpg" class="squire-image-type-3"> 
        </div>
        <div class="swiper-slide grid-rectangle">
            <img data-src="4.jpg" class="rectangle-image-type-1">
            <img data-src="5.jpg" class="rectangle-image-type-2">
            <img data-src="6.jpg" class="rectangle-image-type-3"> 
        </div>
    </div>
</div>

Similar to how this works, but instead of slides per column, elements per slide.

user_133643650
Related