Swipper Js + Bootstrap dont works together ?

Just starting out? Need help? Post your questions and find answers here.
skinkairewalker
Posts: 105
Joined: Tue Jun 14, 2016 7:17 pm

Swipper Js + Bootstrap dont works together ?

Post by skinkairewalker »

hello everyone !
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()
! });