[SOLVED] Problem with Swiper

1

Good evening, friends

Again I need your help.

I use swiper:

echo ’
div id=“main_category”
div data-pagination=’{“el”: “.swiper-pagination”}’ data-space-between=“10” data-slides-per-view=“3” class=“swiper-container swiper-init demo-swiper”

div class=“swiper-pagination” style=“top:100px;”
/div

div class=“swiper-wrapper”
div class=“swiper-slide” onClick=“startsearchstring(’’,‘anchor’,‘мастеркласс’);”
img alt=“Мастерклассы” src=“images/c_masterclass.png” width=120
/div

div class=“swiper-slide” onClick=“startsearchstring(’’,‘anchor’,‘парк’);”
img alt=“Парки” src=“images/c_park.png” width=120
/div

div class=“swiper-slide” onClick=“startsearchstring(’’,‘anchor’,‘трц’);”
img alt=“ТРЦ” src=“images/c_trc.png” width=120
/div

div class=“swiper-slide” onClick=“startsearchstring(’’,‘anchor’,‘еда’);”
img alt=“Еда” src=“images/c_eda.png” width=120
/div

div class=“swiper-slide” onClick=“startsearchstring(’’,‘anchor’,‘активныйотдых’);”
img alt=“Активный отдых” src=“images/c_active.png” width=120
/div

div class=“swiper-slide” onClick=“startsearchstring(’’,‘anchor’,‘музей’);”
img alt=“Музеи” src=“images/c_musei.png” width=120
/div

/div
/div
/div’;

All is good looking (mykeep dot ru). But when I reload ‘main_category’ using XMLHttpRequest (changing city in top of site) in site loaded online first slide. In fact after reload with no changing slides reduced.

I think the problem related with swiper-pagination-bullet auto loaded, but I don’t know how to identify solution.

Could you please help.

Thanks

2

After XMLHttpRequest you must reinitializate swiper

3

Thank you! I find initialisation process in doc, trying, but its not working (

My script:

function update_city(city)
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function()
            {
            if (this.readyState == 4 && this.status == 200)
                {
                document.getElementById("main_category").innerHTML = this.responseText;
                }
            };
        u = "inc/main_category.php?city=" + city;
        xmlhttp.open("GET", u, true);
        xmlhttp.send();

        var swiper = app.swiper.create('.swiper-container', {
        speed: 400,
        spaceBetween: 10
        });

        return false;
    }
4

Try this

function update_city(city)
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function()
            {
            if (this.readyState == 4 && this.status == 200)
                {
                document.getElementById("main_category").innerHTML = this.responseText;
                init_swiper();
                }
            };
        u = "inc/main_category.php?city=" + city;
        xmlhttp.open("GET", u, true);
        xmlhttp.send();
        return false;
    }

function init_swiper(){
        var swiper = app.swiper.create('.swiper-container', {
        speed: 400,
        spaceBetween: 10
        });
}

I can not check the script now, your request is XMLHttpRequest empty return

5

Thank you!!! Now its working, but with problem:

  1. no bullets
  2. width per slide = 375px

I add new param and bullets seen again:

function init_swiper(){
  var swiper = app.swiper.create('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
        speed: 400,
        width: 118.333,
        spaceBetween: 10,
        });
    }

But its not so good:

  1. Fixed width is no good
  2. After update 2 bullets adding and last slide goes left

It does not look like it was originally :frowning:

6 
function init_swiper(Id){      
var swiper1 = app.swiper.create(Id, {
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
            speed: 400,
            spaceBetween: 10,
            slidesPerView: 3
            });
}

You hawe two swipers, each must be identified through a unique ID or Class

init_swiper(’#swipe_1’)…init_swiper(’#swipe_2’)…

7

Thank you so much!!! All is working! :slight_smile: