Legacys7 wrote Could you give me an example code? Like what Osgood posted. What Osgood has showed me works. However, I'm not keeping a closed mind. All knowledge that works, benefits me and I'm sure a lot of others on here. Sure - you just need to strip half of the code, which is redundant in your case: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Swiper</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script> <style> body { margin: 0; background-color: #000; } * { box-sizing: border-box; } .swiper-container { height: 100vh; width: 100vw; text-align: center; } @media screen and (max-width: 768px) { .swiper-slide { width: 100%; } } img { max-height: 100%; max-width: 100%; } .swiper-button-prev, .swiper-button-next { display: flex; justify-content: center; background-image: none!important; color: #fff; font-size: 35px; height: auto!important; } @media screen and (max-width: 768px) { .swiper-button-prev { top: 100px; background-color: #000; border-radius: 4px; padding: 0 9px 0 5px; } .swiper-button-next { top: 100px; background-color: #000; border-radius: 4px; padding: 0 5px 0 9px; } } .caption { color: white; } </style> </head> <body> <div id="app"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://source.unsplash.com/random/?nature" alt="Nature"> </div> <div class="swiper-slide"><img src="https://source.unsplash.com/random/?food" alt="Food"> </div> <div class="swiper-slide"><img src="https://source.unsplash.com/random/?business" alt="Business"> </div> <div class="swiper-slide"><img src="https://source.unsplash.com/random/?fashion" alt="Fashion"> </div> <div class="swiper-slide"><img src="https://source.unsplash.com/random/?animal" alt="Animal"> </div> </div> <div class="swiper-button-prev"><i class="fa fa-angle-left"></i> </div> <div class="swiper-button-next"><i class="fa fa-angle-right"></i> </div> </div> </div> <!-- end app --> <script> var mySwiper = new Swiper( '.swiper-container', { centeredSlides: true, direction: 'horizontal', loop: this.infinite, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', } ); </script> </body>
... View more