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 limit the displayed number of bullets swiperjs

Is it possible in swiperjs to make it so that 5 pagination buttons of the same size are always indicated. When switching, if there are more than 5 slides, then the first button disappeared and the next one appeared at the end (button 6).
DynamicBullets behavior: true,
together with custom pagination it is very strange.Or maybe there is some other ready-made slider that has something similar. I ask for help
window.addEventListener('load', function() {
var menu = ['1989', '1990', '1991', '1992', '1993', '1994','1995']
var mySwiper = new Swiper ('.swiper-container', {
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (menu[index]) + '</span>';
},
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
})
.swiper-container {
width: 100%;
height: 500px;
}
.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 {
position: absolute;
top: 10px;
right: 10px;
width: auto !important;
left: auto !important;
margin: 0;
}
.swiper-pagination-bullet {
padding: 5px 10px!important;
border-radius: 0!important;
width: auto!important;
height: 30px!important;
text-align: center!important;
line-height: 30px!important;
font-size: 12px!important;
color:#000!important;
opacity: 1!important;
background: rgba(0,0,0,0.2)!important;
}
.swiper-pagination-bullet-active {
color:#fff!important;
background: #007aff!important;
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Content</div>
<div class="swiper-slide" >Content</div>
<div class="swiper-slide">Content</div>
<div class="swiper-slide">Content</div>
<div class="swiper-slide">Content</div>
<div class="swiper-slide">Content</div>
<div class="swiper-slide">Content</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

add these lines:
dynamicBullets: true,
dynamicMainBullets: 4
var swiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
observer: true,
observeParents: true,
slidesPerView: 1,
centeredSlides: false,
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
dynamicMainBullets: 4
}
}

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.

Change page sections on scroll

I want to change sections on scroll, to kill the overflow of a single page website and change the sections that have 100% height on scroll. I tried using the:
https://github.com/hellsan631/angular-fullpage.js
but cannot make it work. When I follow all the instructions I get the following errors:
Error: [$compile:nonassign] http://errors.angularjs.org/1.6.6/$compile/nonassign?p0=undefined&p1=options&p2=fullPage
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
I also tried using https://github.com/alvarotrigo/fullPage.js, no errors but nothing happens.
Anyone has a different solution, or a way to fix this one? Thanks.

Here is a Swiper content sliding plugin, similar to fullpage.js:
http://idangero.us/swiper/demos/20-mousewheel-control.html
You can scroll it with mousewheel, mouse (desktop touch emulation), keypad (on desktop) and finger (on touch devices). Plus there is a non-JQuery version available.
Additionally, you can even configure it to change page background colors, like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<style>
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%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
/* 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;
}
body {
transition: background-color .5s ease-in-out;
}
body.red {
background-color: #f40;
}
body.orange {
background-color: #f90;
}
body.yellow {
background-color: #fe0;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-bg="red">Slide 1</div>
<div class="swiper-slide" data-bg="orange">Slide 2</div>
<div class="swiper-slide" data-bg="yellow">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<script>
var body = document.body;
body.className = 'red';
var slider = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
mousewheelControl: true,
onSlideChangeStart: function (swiper) {
var currentSlide = swiper.slides[ swiper.activeIndex ];
body.className = currentSlide.getAttribute( 'data-bg' );
console.log( currentSlide.getAttribute( 'data-bg' ) );
},
});
</script>
</body>
</html>
DEMO

Is it possible to precisely center Masonry.js content?

I am trying to build a layout of one to four columns - variable per page designed on, with the Masonry plugin. So far I've liked how it works.
However, it's leaving a highly annoying gap that with the configurations I cannot seem to get rid of.
To point out - it's already centered on the page. However, within the centered block, the content appears left justified.
The inner content has no margins either. Masonry is being initialized as:
$('.msgblock').masonry({
columnWidth: '.grid-item',
gutter: 8,
itemSelector: '.grid-item',
fitWidth: true,
resize: false
});
I have eliminated the .msgblock width entirely in CSS, so it is being provided by the plugin.
.msgblock {
min-height: 100%;
margin: 0 auto;
z-index: 1;
}
.grid-item {
min-height: 100%;
padding-top: 10px;
}

Try using the flex method:
.grid-item {
min-height: 100%;
padding-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
Update: to fill the gap you can use the stretch option. Here's a fiddle
.grid-item {
background: ghostwhite;
box-sizing: border-box;
padding: 10px;
display: inline-flex;
min-height: 200px;
align-self: stretch;
flex-direction: column;
flex: 1 0 auto;
outline: 1px solid #dde;
}
.grid-item:nth-child(2n+1) {
background: ghostwhite;
}
.grid-item:nth-child(2n) {
background: #eef;
}
.row {
width: 100%;
background: gray;
display: flex;
flex-wrap: wrap;
}
<div class="row">
<div class="grid-item" style='min-width:60%'>Cell 1</div>
<div class="grid-item" style='min-width:35%'>Cell 2</div>
<div class="grid-item" style='min-width:45%'>Cell 3</div>
<div class="grid-item" style='min-width:25%'>Cell 4</div>
<div class="grid-item" style='min-width:15%'>Cell 5</div>
</div>

After some research and testing, I've decided to go with the CSS Flexbox property. It does what I need to do without as much hassle as Masonry, and my browser support planing goes back for IE 11 - so it should be a better choice. Doing this also eliminates some JS load from the system.