Swiper sliderr...removing arrows unless needed

JavaScript
1

HAs anyone used swiper slider? I have four images on my home page and would like to get rid of the arrows unless 3 or fewer images are showing…show mobile obviously and other smaller screens as well.

Here’s a link to the site: https://bit.ly/2FuxJiQ

Here’s the code

<link rel='stylesheet' id='swiper-css-css'  href='http://idangero.us/swiper/dist/css/swiper.min.css' type='text/css' media='all' />

<style>
 
    .swiper-container {
      width: 100%;
      height: 225px;
    top: 55%;
    position: fixed;
    }
    
    .swiper-slide img {
        width: 100%;
        
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
    width: 38%%;
    height: auto;
    margin: 25px 0px;
    border-color: #FFF;
    border-size: 2px;
      /* 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;
    }

    media (max-width: 991px)


#featured-boxes .title-top, #featured-boxes .title-bottom {
    opacity: 0.85;
    font-size: 20px;
    letter-spacing: 0px;
    margin-top: -25px;
}
#featured-boxes .title-top, #featured-boxes .title-bottom {
    background: rgba(0, 0, 0, 0.48);
    width: 100%;
    position: absolute;
    padding: 10px 30px 10px;
    color: white;
    font-size: 22px;
    letter-spacing: -1px;
    text-align: left;
    /* margin-top: -36px; */
    
    line-height: 22px;
    bottom: 0px;
    height: auto;
    z-index: 1;
}

img .swiper-slide:hover {
transform: scale(1.03);
  }
  </style>

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">   <div id="featured-boxes">
<a class="fb-title" onclick="window.open('/home', '_blank'); return false;">
                                        <div class="title-top">
                                            <span class="fb-header"></span>
                                            SHOWS                                        </div></div>

            <img width="400" height="225" src="/hostedbento-prod/filer_public/News/Chip%20Blogs/OddFellas030218.jpg" class="attachment-small size-small" alt="Eight One Sixty" srcset="/hostedbento-prod/filer_public/News/Chip%20Blogs/OddFellas030218.jpg" sizes="(max-width: 400px) 100vw, 400px" /></a></div>
<div class="swiper-slide">
<div id="featured-boxes">
<a class="fb-title" onclick="window.open('/home', '_blank'); return false;">
                                        <div class="title-top">
                                            <span class="fb-header"></span>
                                            FM90 EVENTS                                       </div></div>

  <img width="400" height="225" src="/hostedbento-prod/filer_public/News/Chip%20Blogs/RedSparrowA.jpg" class="attachment-small size-small" alt="Eight One Sixty" srcset="hostedbento-prod/filer_public/News/Chip%20Blogs/RedSparrowA.jpg" sizes="(max-width: 400px) 100vw, 400px" /></div>
<div class="swiper-slide">
<div id="featured-boxes">
<a class="fb-title" onclick="window.open('/home', '_blank'); return false;">
                                        <div class="title-top">
                                            <span class="fb-header"></span>
                                         BLOGS AND PODCASTS                                     </div></div>

  <img width="400" height="225" src="/hostedbento-prod/filer_public/News/Chip%20Blogs/LouOscarShort.jpg" class="attachment-small size-small" alt="Eight One Sixty" srcset="/hostedbento-prod/filer_public/News/Chip%20Blogs/LouOscarShort.jpg" sizes="(max-width: 400px) 100vw, 400px" /></div>
<div class="swiper-slide">
<div id="featured-boxes">
<a class="fb-title" onclick="window.open('/home', '_blank'); return false;">
                                        <div class="title-top">
                                            <span class="fb-header"></span>
                                            LISTEN LIVE                                      </div></div>

  <img width="400" height="225" src="/hostedbento-prod/filer_public/News/Chip%20Blogs/DirtyDancing030218.jpg" class="attachment-small size-small" alt="Eight One Sixty" srcset="/hostedbento-prod/filer_public/News/Chip%20Blogs/DirtyDancing030218.jpg" sizes="(max-width: 400px) 100vw, 400px" /></div>
</div>

<div class="swiper-pagination"></div>

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>

<script>
   var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 4,
                    slidesPerGroup: 4,
                    loopedSlides: 4,
                    centeredSlides: false,
                    spaceBetween: 0,
                    grabCursor: true,
                    loop:false,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    breakpoints: {
                        1200: {
                            slidesPerView: 4,
                            loopedSlides: 4,
                            spaceBetween: 10
                        },
                        1024: {
                            slidesPerView: 3,
                            loopedSlides: 3,
                            spaceBetween: 10
                        },
                        768: {
                            slidesPerView: 2,
                            loopedSlides: 2,
                            spaceBetween: 10
                        },
                        675: {
                            slidesPerView: 1,
                            loopedSlides: 1,
                            spaceBetween: 20
                        }
                    }
                });
    document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide([
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
        ]);
    });
    document.querySelector('.prepend-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
    });
    document.querySelector('.append-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
    });
    document.querySelector('.append-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide([
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
        ]);
    });
  </script>
2

Hi @bmwaldrop,
maybe the following will be close to what you need:

var slides = document.querySelectorAll('.swiper-wrapper .swiper-slide');
var arrowPrev = document.querySelector('.swiper-button-prev');
var arrowNext = document.querySelector('.swiper-button-prev');

if (slides.length < 4) {
    arrowPrev.style.display = 'none';
    arrowNext.style.display = 'none';
}

Hope it helps,

Andres

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.