The idea of using background images is that they work better in circumstances where you want to use them to 'cover' the complete screen. At some point i.e., when you get to mobile size they won't cover the screen without becoming distorted if they are 'inline' images, so a 'section' of the background-image is shown to cover the screen which keeps the image from becoming distorted BUT if you don't want to do that then you can use the images 'inline' - choose what images you use wisely for desktop so they are much higher than the screen, this allows the height of the image to be full depth of the screen and the width will just be what the width is (auto). Once you get to mobile size then the images wont be the depth of the screen any longer they will just become the depth of the original image in relationship to the mobile device being viewed on, just like the ones in the example url you provided function.
I've altered the code (see below) to allow that to happen and now you have 'inline' images instead of background images being sourced from an array of image links. So where you see this in the code - <img src="https://source.unsplash.com/random/?nature" alt="Nature"> you can alter that to your own images - <img src="images/image_1.jpg" alt="Image Description"> (where 'images' is the name of the folder in which your images reside in your website folder).
I would advise that you take Al up on his offer to review his extension at no cost to yourself, its a win win sitiuation. You may find it easier to implement but I'd also advise you to continue to learn to produce some coding and understand how things work. I dont think there is anything wrong with using extensions as long as you dont become totally depended on them and then can't therefore troubleshoot anything in instances where an extension may not be sufficient for what you require, that could be something ridiculously simple like wrapping a bit of text in a span tag to something much more complex. You'd be surprised how many can't perform the most simplest of coding tasks which are probably the most used when constructing a website.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Vue-Swiper</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js'></script>
<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/3.4.2/css/swiper.css'>
<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 app = new Vue({
el: '#app',
data: {
infinite: true
},
mounted: function () {
var mySwiper = new Swiper ('.swiper-container', {
centeredSlides:true,
direction: 'horizontal',
loop: this.infinite,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
}
})
</script>
</body>
63
Replies
Do you have any recommendations on learning the basics and going from there? Or what is your recommendation period? 
.
AdChoices