swiper half grid example

by pawangupta18

HTML

<link rel="stylesheet" href="https://rawgit.com/nolimits4web/Swiper/master/dist/css/swiper.min.css">
<script src="https://rawgit.com/nolimits4web/Swiper/master/dist/js/swiper.min.js"></script>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><div>Slide 1</div></div>
            <div class="swiper-slide"><div>Slide 2</div></div>
            <div class="swiper-slide"><div>Slide 3</div></div>
            <div class="swiper-slide"><div>Slide 4</div></div>
            <div class="swiper-slide"><div>Slide 5</div></div>
            <div class="swiper-slide"><div>Slide 6</div></div>
            <div class="swiper-slide"><div>Slide 7</div></div>
            <div class="swiper-slide"><div>Slide 8</div></div>
        </div>
    
         <!-- Add Pagination -->
         <div class="swiper-pagination"></div>  
    </div>


    <!-- Add Arrows -->
    <div class="swiper-button-next">
      
      <svg height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"/><g id="arrow_x5F_right_x5F_alt1"><path d="M16,0C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0z M16.031,24v-6H8v-4h8.031   V8.031L24,16L16.031,24z" style="fill:#4E4E50;"/></g></svg>
    </div>
    <div class="swiper-button-prev">
      <svg height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"/><g id="arrow_x5F_left_x5F_alt1"><path d="M16,32c8.836,0,16-7.164,16-15.998C32,7.164,24.836,0,16,0S0,7.164,0,16.002   C0,24.836,7.164,32,16,32z M15.969,8v6.002H24V18h-8.031v5.969L8,16.002L15.969,8z" style="fill:#4E4E50;"/></g></svg>
    </div>

CSS

html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 90%;
        height: 220px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        width:200px;
        height:220px;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide:last-child{
        background:red; 
    }
    .swiper-slide{
      width:70%;
    }
    .swiper-slide div{
        width:100%;
        height:200px;
        margin:10px;
        background:lightblue;   
    }
    .swiper-button-prev{
      left:-10px;
    }
    
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev, .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
      background-image:none;
      position:absolute;
      top:120px
       
      }

JavaScript

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 10,
    slidesPerView: 'auto',
    loop: false,
    autoplay: {
    delay: 5000,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});