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
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 want to find center item, in owl carousel 2 (in native) not select by class like $('.owl-item.center') I want to find it by owl carousel native function and result, now I can get event, and there are bunch of results, I can get any value related to center
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log(e);
if (e.itemClass === 'center') {
alert('it is center one!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>
how can I detect owl carousel 2 center item in native? again, I don't want to find jquery find items by center class with find each or any other selector, I want to owl give it to me.
I don't think owl carousel provide such option to get center item in event result. you can do this littly tricky like this, just get e.item.index it is current active item, then +1 to get centered item. check example below:
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log('center item is:'+ (e.item.index + 1));
});
.item {
border: 1px solid;
text-align: center;
}
.owl-item.active.center {
background: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>
Is there any feature about animation on multiple slide item? I have tried its fine on single slide but not working on multiple item slide.
You can use JSFiddle or below code to debug.
$('.loop-test').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
dots: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel loop-test">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
Any pointers would be appreciated!
Thanks.
According to my understanding, you are looking for different slide transition.
Each slide is going to get the animation class and add it to the item thus giving different animation for each slide.
Here is the updated fiddle
<div class="owl-carousel loop-test">
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="bounceIn animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content 2 </div>
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
<div data-animate="flipInY animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
</div>
Try auto play
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
$('.play').on('click',function(){
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})
JSFiddle link
$('.loop-test').owlCarousel({
loop: true,
items: 2,
nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
$(this).find(".item").hide();
});
$('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme loop-test">
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
</div>
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);
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);