i am working on a webapp working with Swiper JS for my image gallery. Without the usage of Phonegap it works fine, but using Phonegap the "slide" effect doenst work correctly and the prev/next Buttons of the JS were shown but they are not touchable. Curiously it starts working after changing the size of my browser window (firefox). Any ideas?
<!-- Swiper -->
<div class="swiper-container">
<div id="swiper-wrapper" class="swiper-wrapper">
<div id="img0" class="swiper-slide"></div>
<div id="img1" class="swiper-slide"></div>
<div id="img2" class="swiper-slide"></div>
<div id="img3" class="swiper-slide"></div>
<div id="img4" class="swiper-slide"></div>
<div id="img5" class="swiper-slide"></div>
<div id="img6" class="swiper-slide"></div>
<div id="img7" class="swiper-slide"></div>
<div id="img8" class="swiper-slide"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
The images are loaded via DOM
i fixed the issue with the following solution:
loop through my images and add them into the swiper-wrapper:
var str = "<div class=swiper-slide><img src=data:image/png;base64,"+image_data+" class=gallery_images></img></div>";
$('.swiper-wrapper').append(str);
then intitiate the Swiper:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
and after setting the divs attribute display:inherit i had to update the swiper object:
swiper.update(true);
Related
My code:
<div class="tab-pane fade in active" id="home">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="www.example.com" data-toggle="modal" data-target="#123" onclick="window.open(this.href, '_blank');">
<span class="coupon-code-value">123</span>
</a>
</div>
</div>
....
</div>
<div class="dhs-controls">
<div class="dhs dhs-prev"></div>
<div class="dhs dhs-next"></div>
</div>
</div>
<!-- Modal -->
<div id="123" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
....
//script for swiper slider
var swiper = new Swiper(".swiper-container", {
preloadImages: false,
freeMode: false,
slidesPerView: 1,
spaceBetween: 10,
loop: false,
grabCursor: true,
mousewheel: false,
observer: true,
observeParents: true,
navigation: {
nextEl: '.dhs-next',
prevEl: '.dhs-prev',
}
});
In above code, both tabs and slider are working fine. Modal div exist in the code. But Modal popup is not showing when I click the modal link.
I have tried giving highest z-index value for modal class and also tried giving negative z-index value to swiper-container class. Still its not working..
Can anyone please tell me where I am doing wrong? Is it possible that modal works with slider?
I'm trying to add swiper to prestashop. The swiper works but I have one small problem. Other images in slider are displayed and I want to hide them. Been searching from yesterday and can't find what I need. I'm a newbie with coding but I managed to get it work with this code:
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<div class="modal fade js-product-images-modal" id="product-modal">
<div class="modal-dialog" role="document">
<div class="swiper-container " style="width:100%">
<div class="swiper-wrapper">
{foreach from=$product.images item=image}
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="{$image.bySize.large_default.url}" alt="{$image.legend}" style="width:100%;" title="{$image.legend}" itemprop="image">
</div>
</div>
{/foreach}
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
var swiper = new Swiper(".swiper-container", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
Swiper looks like this now:
https://i.ibb.co/c2D8QPx/Swiper-preview.png
So I want to hide other images on the right, is it possible?
Found the solution, wrong 'swiper-container' in swiper 7 it should just be 'swiper'. Working very well now :)
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<div class="modal fade js-product-images-modal" id="product-modal">
<div class="modal-dialog" role="document">
<div class="swiper" style="width:100%">
<div class="swiper-wrapper">
{foreach from=$product.images item=image}
<div class="swiper-slide">
<img src="{$image.bySize.large_default.url}" alt="{$image.legend}" style="width:100%;" title="{$image.legend}" itemprop="image">
</div>
{/foreach}
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
var swiper = new Swiper(".swiper", {
spaceBetween: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
keyboard: true,
effect: "fade",
});
</script>
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Posting if someone wants to use it :) added effect fade and keyboard shifting
I am trying to change the width of the images in my owl-carousel.
<!-- Slider -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="owl-carousel owl-carousel-fullwidth">
<div class="item"><img src="images/frontview.jpg" alt="image"></div>
<div class="item"><img src="images/entry.jpg" alt="image"></div>
<div class="item"><img src="images/register.jpg" alt="image"></div>
<div class="item"><img src="images/bulk2.jpg" alt="image"></div>
<div class="item"><img src="images/herbs3.jpg" alt="image"></div>
<div class="item"><img src="images/overhead.jpg" alt="image"></div>
</div>
</div>
</div>
</div>
<!-- Slider -->
If I right-click on the image to inspect the element, it this inline style:
<div class="owl-item" style="width: 960px; margin-right: 0px;">
The only information I can find about width in the docs is about the autoWidth, which doesn't help me.
Any ideas? Thank you!
var owlCarouselFeatureSlide = function() {
$('.owl-carousel').owlCarousel({
animateOut: 'fadeOut',
autoplay: true,
autoplayTimeout: 5000,
autoHeight: true,
items: 1,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
// smartSpeed: 500,
navText : ["<i class='icon icon-chevron-left'></i>","<i class='icon icon-chevron-right'></i>"]
});
};
Owl Carousel dynamically sets the widths of div.item when the browser window resizes, but not elements within each div.item. So, you can provide CSS to do that. Since you're already using Bootstrap, have a look at these CSS classes that it provides https://getbootstrap.com/docs/4.0/content/images/
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);
I'm trying to implement this 3D slide from the iDangerous Swiper. I could not figure where the width and height of the div class=swiper-slide come from. Below is the body body:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(images/2.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/4.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/3.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/5.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/7.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/6.jpg)">
</div>
</div>
</div>
<script src="scripts/idangerous.swiper-2.0.min.js"></script>
<script src="scripts/idangerous.swiper.3dflow-2.0.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView:3,
loop:true,
//Enable 3D Flow
tdFlow: {
rotate : 30,
stretch :10,
depth: 150,
modifier : 1,
shadows:true
}
})
</script>
When I use firebug to look at the height and width, I could not find where the height: 189px; and width: 293.333px; came from. Any help is much appreciated.