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

Swipper Js + Bootstrap dont works together ?

by skinkairewalker Mon Dec 14, 2020 2:43 am

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()
! });
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 3 guests