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?
Related
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/
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);
I want to use Slick carousel on my website but i can't make the first example (single item) from kenwheeler.github.io/slick/ to work. Maybe i forgot something but i cannot find what.
Here is my code (also on jsfiddle) :
HTML
<div class="slider single-item slick-initialized slick-slider">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 4480px; transform: translate3d(-560px, 0px, 0px);">
<div class="slick-slide slick-cloned" index="-1" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-active" index="0" style="width: 560px;"><h3>1</h3></div>
<div class="slick-slide" index="1" style="width: 560px;"><h3>2</h3></div>
<div class="slick-slide" index="2" style="width: 560px;"><h3>3</h3></div>
<div class="slick-slide" index="3" style="width: 560px;"><h3>4</h3></div>
<div class="slick-slide" index="4" style="width: 560px;"><h3>5</h3></div>
<div class="slick-slide" index="5" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-cloned" index="6" style="width: 560px;"><h3>1</h3></div>
</div>
</div>
<button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>
<button type="button" data-role="none" class="slick-next" style="display: block;">Next</button>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button type="button" data-role="none">1</button></li>
<li><button type="button" data-role="none">2</button></li>
<li><button type="button" data-role="none">3</button></li>
<li><button type="button" data-role="none">4</button></li>
<li><button type="button" data-role="none">5</button></li>
<li><button type="button" data-role="none">6</button></li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Thanks.
Edit : When i check event listeners on buttons with the developper tools, i've nothing, contrary to the same carousel on slick documentation (http://kenwheeler.github.io/slick/#demos).
On the Slick website, there is a click event listener on the next arrow button, as you can see on the screen :
I don't know why this event listener doesn't exist in local (jquery is correctly loaded by the way).
Many mistakes on your jsfiddle
Your HTML was a copy-paste that is already marked up by the library
You need to load jQuery before slick
You included a 1.12 jquery that doesnt exist(didn't matter but worth pointing out)
HTML:
<section id="features" class="blue">
<div class="content">
<div class="single-item">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</section>
JS:
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Here's a jsfiddle.
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);