Support
Quality
Security
License
Reuse
kandi has reviewed swiper and discovered the below as its top functions. This is intended to give you an instant insight into swiper implemented functionality, and help decide if they suit your requirements.
Get all kandi verified functions for this library.
Get all kandi verified functions for this library.
Tree-shakeable: Only modules you use will be imported into your app's bundle.
Mobile-friendly: It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Library Agnostic: Swiper doesn't require any JavaScript libraries like jQuery, which makes Swiper much smaller and faster. It can be safely used with libraries such as jQuery, Zepto, jQuery Mobile, etc
1:1 Touch movement: By default, Swiper provides 1:1 touch movement interaction, but this ratio can be configured through Swiper settings
Mutation Observer: Swiper has an option to enable Mutation Observer, with this feature Swiper will be automatically reinitialized and recalculate all required parameters if you make dynamic changes to the DOM, or in Swiper styles itself
Rich API: Swiper comes with a very rich API. It allows creating your own pagination, navigation buttons, parallax effects and many more
RTL: Swiper is the only slider that provides 100% RTL support with correct layout
Multi Row Slides Layout: Swiper allows a multiple row slides layout, with a few slides per column
Transition Effects: Fade, Flip, 3D Cube, 3D Coverflow
Two-way Control: Swiper may be used as controller for any number of other Swipers, and even be controlled at the same time
Full Navigation Control: Swiper comes with all required built-in navigation elements, such as Pagination, Navigation arrows and Scrollbar
Flexbox Layout: Swiper uses modern flexbox layout for slides layout, which solves a lot of problems and time with size caclulations. Such layout also allows configuring the Slides grid using pure CSS
Most Flexible Slides Layout Grid: Swiper has a lot of parameters on initialization to make it as flexible as possible. You can control slides per view, per column, per group, space between slides, and many more
Images Lazy Loading: Swiper Lazy Loading delays loading of images in inactive/invisible slides until the user swipes to them. Such feature could make the page load faster and improve Swiper performance
Virtual Slides: Swiper comes with Virtual Slides feature that is great when you have a lot of slides or content-heavy/image-heavy slides so it will keep just the required amount of slides in DOM
Loop mode
Autoplay
Keyboard control
Mousewheel control
Nested sliders
History navigation
Hash navigation
Breakpoints configuration
Accessibility (A11y)
And many more ...
QUESTION
Adding Images Dynamically into Swiper JS not working
Asked 2022-Apr-11 at 18:00I 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.
ANSWER
Answered 2022-Apr-11 at 18:00You 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.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
See Similar Libraries in
Save this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source