Swiper slider: how to make images smaller but still cover the whole window?

I'm using Swiper to create a slider that takes up the whole window, minus a few pixels for a bar-- no problem there. (https://i.imgur.com/2MIJOvs.jpg) However, as you can see, the image that I put in for the slide (https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) is really enlarged.

How do I make the image show a little more of the width so it doesn't look so enlarged/low quality?

I tried messing with some of the width/height settings in the style/CSS, but either nothing changes or the whole container/wrapper gets messed up.

CSS: (in the html head in a style tag)

    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      width: 100%;

    }
    .swiper-slide img{
        min-width:100%;
    }

Javascript:

  <!-- Swiper JS -->
  <script src="swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 0,
      centeredSlides: true,
      autoplay: {
        delay: 8000,
        disableOnInteraction: false,
      },
      loop:true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

  </script>

HTML:

  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style= "background-image:url
        (&quot;https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260&quot;);"></div>

        <div class="swiper-slide" style= "background-image:url
        (&quot;https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260&quot;);"></div>

        <div class="swiper-slide" style= "background-image:url
        (&quot;https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260&quot;);"></div>

     </div>
     <!-- If we need navigation buttons -->
     <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>

   <!-- Add Pagination -->
   <div class="swiper-pagination"></div>


</div>

1 answer

  • answered 2019-05-15 03:22 Momin

    Here is the little update about fullscreen swiper slider .

    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      spaceBetween: 10,
    });
    html,
    body {
      position: relative;
      height: 100%;
    }
    
    body {
      background: #000;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #fff;
      margin: 0;
      padding: 0;
    }
    
    .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    
    .gallery-top {
      height: 100%;
      width: 100%;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/css/swiper.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/js/swiper.js"></script>
    <!-- Swiper -->
    <div class="swiper-container gallery-top">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
      </div>
      <!-- Add Arrows -->
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
    </div>