We Keep Coding

Adding Images Dynamically into Swiper JS not working

I have a page where images need to showed in slider.
// Initializing the Swiper
var swiper = new Swiper(".mySwiper", {
loop: true,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
loop: true,
spaceBetween: 10,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
$("body").keydown(function (e) {
if (e.keyCode == 37) { // top
swiper.slidePrev();
}
else if (e.keyCode == 39) { // bottom
swiper.slideNext();
}
});
let image_list = ["https://swiperjs.com/demos/images/nature-1.jpg", "https://swiperjs.com/demos/images/nature-2.jpg", "https://swiperjs.com/demos/images/nature-3.jpg", "https://swiperjs.com/demos/images/nature-4.jpg", "https://swiperjs.com/demos/images/nature-5.jpg", "https://swiperjs.com/demos/images/nature-6.jpg", "https://swiperjs.com/demos/images/nature-7.jpg",
"https://swiperjs.com/demos/images/nature-8.jpg",
"https://swiperjs.com/demos/images/nature-9.jpg",
"https://swiperjs.com/demos/images/nature-10.jpg"]
// Adding Images
for (i = 0; i < image_list.length; i++) {
let div = '<div class="swiper-slide"><img src="' + image_list[i] + '" alt=""/></div>';
$("#large-img").append(div);
$("#small-img").append(div);
}
/* SWIPER JS */
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper {
width: 100%;
height: 10rem;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.mySwiper2 {
height: 27rem;
width: 100%;
}
.mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.mySwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<div class="container-fluid" style="padding: 0;">
<div class="row g-0 justify-content-center mt-5">
<div class="col-md-12">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper" id="large-img">
<!-- Images coming from the backend through javascript -->
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper" id="small-img">
<!-- Images coming from the backend through javascript -->
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
When I am adding the Images Dynamically through the javascript into the HTML template, the SWIPER doesnt work. I am actually passing the media url of the image in the img.src attribute as I am using Django as the backend. No matter from where you pass the image url, it doesnt work.
**UPDATE** : In running this code, it works on the full screen mode (Only the autoplay and next and previous button. Clicking on the thumbnail isnt working) and in the small window which opens when pressing the Run Snippet, the Swiper.js doesnt work. The problem in the small window is similar to what I am seeing in my website.

You should load the Swiper after loading the images, this way it can use the images when initializing. Maybe it would be a good way to check the Swipper documentation, I saw it has some lazy loading parameters which could possibly help solve this differently.
doc:
https://swiperjs.com/swiper-api#lazy-loading

How to initialize Swiper.JS in Elementor Pro dynamically with JavaScript?

I'm building simple one page layout website with Elementor Pro and Hello Theme. I have an issue. On section on the website is build with 3 columns layout. On desktop it look nice, but on mobile devices I rather would like to show this section as slider. What I found is that Elementor uses SwiperJS for slider. Here is the code I've got to turn into slider on mobile:
<section class="elementor-section elementor-inner-section elementor-element elementor-element-53777fe3 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="53777fe3" data-element_type="section" id="summary">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-145d728 animated bounceInLeft" data-id="145d728" data-element_type="column" data-settings="{"animation":"bounceInLeft"}">( content of column/slide )</div>
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-4c151e67 animated bounceInLeft" data-id="4c151e67" data-element_type="column" data-settings="{"animation":"bounceInLeft"}">( content od column/slide )</div>
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-53280d85 animated bounceInLeft" data-id="53280d85" data-element_type="column" data-settings="{"animation":"bounceInLeft"}"></div>
</div>
</section>
As you can see I added id #summary to section. Then I created custom js and css files and upload them manualy.
custom.js:
var mySwiper = new Swiper('#summary', {
slidesPerView: 1,
spaceBetween: 10,
slideClass: 'elementor-column',
wrapperClass: 'elementor-container',
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 20,
},
768: {
slidesPerView: 1,
spaceBetween: 40,
},
1024: {
slidesPerView: 3,
spaceBetween: 0,
},
}
});
custom.css:
#media screen and (max-width: 768px) {
#summary .elementor-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
#summary .elementor-container {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
#summary .elementor-container .elementor-column {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
}
Then I modified functions.php and load my files:
wp_enqueue_script( 'custom', get_theme_file_uri( 'assets/js/custom.js' ), ['jquery', 'swiper'], '', true );
wp_enqueue_style('custom', get_template_directory_uri('custom.css'));
So I thought everything looks good. The effect?
My files custom.js and custom.css are properly loaded.
swiper.js is laoded before custom.js.
section tag has new classes .swiper-container-initialized and .swiper-container-horizontal
First div tag with elementor-column class has new class .swiper-slide-active
Second div tag with elementor-column class has new class .swiper-slide-next
So Swiper propely initialized, but still on mobile device there are all 3 elements visible and no slider.
Please help me with this issue.
Kind regards,
Kamil

Swiper.js: cannot get textarea value in loop mode

I cannot get the value of an textarea in a looped swiper of Swiper.js.
Here's what I did.
I defined a swiper with a single slide and put a textarea in it. (id="aaa", one and only textarea)
I defined a function "getValue()" that shows the value of the textarea. (using getElementById(), console.log())
function getValue(id){
var element = document.getElementById(id);
var value = element.value;
console.log(value);
}
I enabled the loop mode of the swiper.
// Swiper Setting
var swiper = new Swiper('.swiper-container', {
allowTouchMove: false,
loop: true,
I executed the function with a button, and it returns "" (empty string)
Here's the results of my experiments
When the loop is disabled, the function returns the proper text in the textarea.
When the swiper has multiple slides, the function returns "" only for textareas in the last slide.
Here's the full code that replicates the problem.
https://jsfiddle.net/mjn7d385/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #000;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="page1">
<textarea name="aaa" id="aaa" cols="40" rows="5"></textarea>
<button onclick="getValue('aaa');">Check Values</button>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
// Swiper Setting
var swiper = new Swiper('.swiper-container', {
allowTouchMove: false,
loop: true,
pagination: {
el: '.swiper-pagination',
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
function getValue(id){
var element = document.getElementById(id);
var value = element.value;
console.log(value);
}
</script>
</body>
</html>
How can I get the value of the textarea in a looped swiper? Please let me know if you have any solutions for this.
Thank you in advance.

The problem here is that Id's can't be duplicated in the same document, and this control duplicates the Template Slide and its contents, so "aaa" is declared multiple times. One solution could be this one:
Modify Slide Template to be like this:
<div class="swiper-slide" id="page1">
<textarea cols="40" rows="5"></textarea>
<button onclick="getValue(this);">Check Values</button>
</div>
Here, getValue() is called using the Caller object (Button) as argument.
Now, getValue function is modified to this:
function getValue(obj){
var element = obj.parentElement.getElementsByTagName("textarea")[0];
var value = element.value;
console.log(value);
}
In this function, we locate the parent object of the button, which is the DIV, and then we get the first textarea object that contains. That's it!
Have a look to the proposed solution in JSFiddle:
https://jsfiddle.net/s0Lw2yeg/1/
I hope this will be useful.

swiper slider - swiping as one slide, but CSS is included

How come swiper slider is sliding all my divs as one? Did the library change?
Below is my example:
var swiper = new Swiper('.swiper-container', {
autoplay:false,
direction: "horizontal",
loop:false,
pagination: {
el: '.product-image-thumbs .swiper-pagination',
clickable: true,
bulletActiveClass: 'active'
}
});
.swiper-slide {
background-color: green;
width: 300px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<div class="swiper-pagination"></div>
</div>
you can see that all the slides are in one slide?
as per these answers
Swiper Slider puts all slides in one slide
Swiper slider does not swipe slides on mobile devices
They all say to include the CSS file, but you can see that my CSS file is included, and the linked answers are now exhibiting the same behavior as mine.
Did swiper change?

Yes might be links are outdated, refer swiperjs for latest version and try this links:
// CSS
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
// JS
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
There are few quick fixes:
Pagination: Property el will allow comma separated classes, that you have separated with spaces
BulletActiveClass: Currently there are no style on active class that you have specified, so commented for now
Script Location: Always try to use scripts at the end of body tag, as i have add in below example
CSS: I have added css from swiper example, because here without css slider was corrupted
Your working example with above fixes:
var swiper = new Swiper('.swiper-container', {
autoplay:false,
direction: "horizontal",
loop:false,
pagination: {
el: '.product-image-thumbs, .swiper-pagination',
clickable: true,
// bulletActiveClass: 'active'
}
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper-container">
<div class="product-image-thumbs"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

why swiper progress event doesn't reflect slide movement?

Is there a way in swiperjs to know the real event of slide progress?
I set my slide speed to six seconds (very slow).
And I try to listen to progress event. but when I click on the arrow, it fire only once. and when I swipe using touch it fire correct but when I release the touch, the slide is still moving but the progress doesn't fire.
So, the progress bar doesn't work as expected.
I looking for event that tell me "the slide is moving". I try all the events in the docs. but none of them works. maybe another techniuqe?
var swiperOptions = {
speed: 5000,
grabCursor: true,
watchSlidesProgress: true,
mousewheelControl: true,
keyboardControl: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
progress: function(data) {
console.log('event progress', data);
}
}
};
var swiper = new Swiper(".swiper-container", swiperOptions);
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
background: #404449;
margin: 0;
padding: 0;
}
.swiper-container {
height: calc(100vh - 120px);
margin: 60px;
}
.swiper-slide {
overflow: hidden;
}
.slide-inner {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: center;
}
a {
color: white;
}
.wrap-footer { position:absolute;bottom:0;height:100px;background:#000;width:100%;overflow:hidden; }
.footer { height:100px;/*transform:translateY(-100px);*/}
.red { background:red; }
.blue { background: blue;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css" integrity="sha256-eN7gD6kRzzeXS87cycVGlO3smXA9o+yeN0BDkTVaOc0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js" integrity="sha256-2AzmZuC/JWSxd9zvzxqNIBQIoB/uSRsSYtXJBhAkfjY=" crossorigin="anonymous"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://pp.userapi.com/c836139/v836139003/63ce1/QThPx7qPzvU.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://pp.userapi.com/c412624/v412624691/4136/_da_uAA6ha8.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://pp.userapi.com/c637331/v637331691/48f5f/spHnV42iYVw.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://pp.userapi.com/c837139/v837139407/67f52/fFqjq4U2mEk.jpg)"></div>
</div>
</div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>

I think that, you can do like this.
onProgress: (swiper, progress) => {...}