Почему не работает Swiper?

У меня есть блоки которые появляются после нажатия на кнопку

$('#send').on('click', function () {
setTimeout(function() { 
var test = 'hello';
var selectcategories = '<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" id="first_categor_mess"><p>slide</p></div><div class="swiper-slide" id="two_categor_mess"><p>slide</p></div><div class="swiper-slide" id="last_categor_mess"><p>slide</p></div></div></div>';
if (divValue.indexOf(test)  >= 0)
    {
$('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12">'+selectcategories+'</div>');
},1200);
 });  
</script>


swiper-container Это горизонтальный свайпер от Swiper API https://github.com/nolimits4web/Swiper/blob/master...

И есть подключенный скрипт для этого свайпера

<script src="dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>


Но свайпер не работает после появления блоков
Swiper api подключен правильно, потому что когда я вставляла код с переменной selectcategories как обычный html то свайпер работал
  • Вопрос задан
  • 756 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Eduard07
Переинициализировать swiper нужно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы