var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
slidesPerView: 2,
loop: true,
spaceBetween: 20,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
.swiper-container {
width: 100%;
height: 600px;
}
/**
Using flex to make sure the content expand full. This makes all items height equal
*/
.swiper-item {
display: flex;
flex-flow: column nowrap;
}
.swiper-item .item-image {
flex: 0 0 auto;
background: blue;
height: 250px;
}
.swiper-item .item-content {
flex: 1 1 0px;
height: auto;
background: white;
padding: 20px;
width: 85%;
margin: -30px auto 0;
}
.wrapper {
background: lightgreen;
padding: 10px;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="wrapper">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia unde placeat fuga reprehenderit temporibus non velit molestiae quam ipsam assumenda, quo dignissimos neque, eligendi ad in, debitis voluptatem. Eos harum praesentium facere? Quo fuga ipsum ut tenetur consequuntur veniam minus, doloremque tempora sunt ipsam dolorum reprehenderit magni excepturi ipsa quaerat voluptatum ea repudiandae assumenda placeat, earum eum cumque quis voluptates corporis! Id quis suscipit molestias, dolor laboriosam laudantium corrupti, ipsa cumque culpa tempore enim veniam saepe accusantium, natus dolores! Blanditiis quo fugiat minus iusto modi, iure earum voluptas, consequuntur qui distinctio maiores esse quae error odio cupiditate nisi veniam ad.</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sequi placeat reiciendis tenetur, illum est, ipsa esse iusto neque fugiat magnam earum nostrum deserunt, odit animi vel quas assumenda fugit obcaecati nulla! Reprehenderit eum, impedit quibusdam laborum harum unde tempore. A facilis itaque, in maiores nam reiciendis provident ducimus nesciunt, consequuntur dolorum numquam optio quis facere quisquam nemo distinctio saepe?</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, tempore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus quaerat omnis officiis. Quaerat dignissimos libero porro nesciunt quidem beatae assumenda. Doloremque temporibus quia soluta cum officiis odio, maxime veritatis.</p>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>