Swiper doesn't work properly (cannot swipe)

Questions
1

Hi there, I’m having trouble with a dynamic swiper slider I’ve created. So I made a get request to fetch images from the server and to dynamically display the images i created elements in my app.js file. this is my code:

app.js:

//Init slides
//Get swiper/slider div
var sliderContainer = document.getElementById('dynamic-img-container');
var slider = document.getElementById('dynamic-img');

//Fetch images
app.request.get(baseurl+'/getImages', function(res){
    var data = JSON.parse(res);
    //console.log(data.output);
    for(var i=0;i<data.output.length;i++){
    var imgPath = "img path";
    //Create img element
    var imgDiv = document.createElement('div');
    imgDiv.setAttribute('class', 'swiper-slide');

    var img = document.createElement('img');
    img.setAttribute('class', 'slider-img');
    img.setAttribute('src', imgPath);

    imgDiv.appendChild(img);

    slider.appendChild(imgDiv);
    }
    sliderContainer.appendChild(slider);
  }, function(error){
    console.log(error);
});

**dashboard.html:**
<template>
    <div class="page" data-name="dashboard-page">
        <div class="page-content">
            <div data-autoplay="2500" data-autoplay-disable-on-interaction="false" data-slides-per-view="auto" data-loop="true" data-centered-slides="true" class="swiper-container swiper-init image-slider" id="dynamic-img-container">
                <div class="swiper-wrapper" id="dynamic-img">
                </div>
            </div>
        </div>
    </div>
</template>

35%20PM
Screen Shot 2020-01-15 at 6.08.35 PM.jpg760×1308 244 KB

The images can show, but when i try to swipe, it’s stuck. it won’t change slides. from the screen shot above after i release my mouse / release the screen it goes back to the first picture.

also i’m trying to do an auto slider, but despite the attributes that i added, it doesn’t auto play. dashboard page is part of a routable tab page. can someone help me out please? Thanks!

2

https://swiperjs.com/ - I think you should look at examples. Your code can’t do what you want

3

Hi, thanks for the reply. I looked at the examples you gave me and this solved my problem!

html:

<div class="swiper-container image-slider">
      <div class="swiper-wrapper" id="dynamic-img">

      </div>
</div>

app.js:

var imgArray = [];
app.request.get(baseurl + '/getImages', function (res) {
    var data = JSON.parse(res);
    //console.log(data.output);
    for (var i = 0; i < data.output.length; i++) {
        var imgPath = "http://some-website.com/img/" + data.output[i].imageName;
        var imgDiv = '<div class="swiper-slide"><img src="'+imgPath+'" class="slider-img"></div>';

        imgArray.push(imgDiv);
    }

    //Init swiper
    var swiper = app.swiper.create('.swiper-container', {
      speed: 1000,
      slidesPerView: 'auto',
      loop: true,
      loopedSlides: data.output.length,
      observer: true
    });
    swiper.appendSlide(imgArray);
    swiper.autoplay.start();
}, function (error) {
    console.log(error);
});
1 Like