Swiper doesn't work properly (cannot swipe)

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:


//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);
    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);


  }, function(error){

    <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">

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!

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

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


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



var imgArray = [];
app.request.get(baseurl + '/getImages', function (res) {
    var data = JSON.parse(res);
    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>';


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