i am trying study swipper js and bootstrap , but when i put both in same project, swipper dont works ...
Someone can help me ?
code below >:
Code: Select all
Procedure AppendHead(content.s)
Debug "head"
!$("head").append(v_content);
EndProcedure
Global HTML.s
tmp.s = ""
For i = 1 To 1000
tmp = tmp + "testing</br>"
Next
Procedure Main()
! var mySwiper = new Swiper('.swiper-container', {
! })
! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css").appendTo("head");
! require(["https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"], function() {
HTML = "<!-- Slider main container -->" +
"<div class='swiper-container' style='width:100%; height:100%; background-color:white'>" +
" <!-- Additional required wrapper -->" +
" <div class='swiper-wrapper'>" +
" <!-- Slides -->" +
" <div class='swiper-slide' style='background-color:red'>Slide 1</div>" +
" <div class='swiper-slide' style='background-color:green'> "+
" <div id='scrollarea-invalid'> "+
" "+tmp+
" </div>"+
" </div>" +
" <div class='swiper-slide' style='background-color:blue'>Slide 3</div>" +
" </div>" +
"</div>"
! $(v_html).appendTo("body");
! });
EndProcedure
! $("<link rel='stylesheet' href='https://unpkg.com/swiper/swiper-bundle.min.css' />").appendTo("head");
AppendHead("<style>"+
"#scrollarea-invalid {"+
"overflow-y: scroll;"+
"height: 100%;"+
"-webkit-overflow-scrolling: touch;"+
"}"+
"#scrollarea-content{"+
"overflow-y: scroll;"+
"height: 500%;"+
"}"+
"/style>")
! require(["https://unpkg.com/swiper/swiper-bundle.min.js"], function(s) {
! Swiper = s
Main()
! });