As title, when a keypad is within a swipe it won't work, any ideas of a workaroud?
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="text-align:center">
<h3>Product name</h3>
<div class="range-slider"><input type="range" min="0" value="" step="1" onchange="$$(this).parent().parent().find('span').html(this.value);" oninput="$$(this).parent().parent().find('input').val(this.value);"></div>
<div class="list-block">
<ul>
<li><div class="item-content">
<div class="item-inner">
<div class="item-title label">Qtd</div>
<div class="item-input">
<input type="text" class="kpNumpad">
</div>
</div>
</div></li>
</ul>
</div>
<img src="img/temp/img01-mobile-md.jpg" style="max-height: 45vh;">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
The script to create keypad + swipe:
myApp.keypad({ 'input': '.kpNumpad', 'dotButton': true, 'toolbarCloseText': 'Fechar', 'toolbarTemplate': '' });
myApp.swiper('.swiper-container',{
'onlyExternal': true,
'nextButton': '.swiper-button-next',
'prevButton': '.swiper-button-prev',
'speed': 600,
'loop': true, // <- DON'T USE IT, set it to false (see my answer)
'effect': 'slide' //-- slide, coverflow, flip
});
No matter the order if swiper or keypad is called first, none of them work, debugging inside a browser, the div of keypad is created but don't show, and input becomes unclicable.
Problem solved by creating an instance for each keypad input.
window.top.myKeyPad = [];
$$('.kpNumpad').each(function(){
var kpNum = myApp.keypad({ 'input': $(this), 'dotButton': true, 'toolbarTemplate': '' });
window.top.myKeyPad.push(kpNum);
});
NOTE: AVOID Swiper parameter 'loop' == false, it will break the keypad, also, I highly recommend not to use it as it will erase your input values when loop restart
Related
I am working on a website and there seems to be conflicting elements.
I started with a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow, and there are conflicts in either the JS or the CSS that prevent me from editing the Slick slider (parts of the slick-slider code were already present in the "Organic Farm" template).
Right now I have js/core.min.js, js/script.js and js/slick.js being loaded into the page, and then at the bottom of the index page:
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-slide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
});
});
</script>
The HTML portion is:
<section class="section">
<div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
<div class="swiper-wrapper swiper-wrapper-custom">
<div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
Is there a way to find out why my custom script is not active? The arrows are also not showing up. For anything HTML and CSS I use the Inspector of Firefox, but here I'm really stumped.
Two things to consider:
1) When using slick.js, it is customary to add it to the element which is the parent of a set of elements which are then converted into slides. For example:
<div id="slide-wrapper">
<div class="my-slide">...</div>
<div class="my-slide">...</div>
<div class="my-slide">...</div>
</div>
$('.slide-wrapper').slick({
...
});
In your case, that would mean adding Slick to swiper-wrapper:
$('.swiper-wrapper').slick({
...
});
2) More likely the problem is that you have a conflict with the setup of a different slide show library altogether, Swiper.js (https://swiperjs.com/api/), which uses classes like swiper-container, swiper-wrapper and swiper-slide. To implement that slideshow, you would have to include that library on your page and initialize the slideshow with something like:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
Issue:
We are having accessibility issues on the swiper slider when pressing the enter button on the thumbnail which doesn't bring the selected image to the main image area.
is there any way if we can do so pressing the enter button changes the main image of the slider?
Scenario:
We have a swiper JS - slider (https://swiperjs.com/) set up on our website the slider works perfectly with thumbnails. that means clicking on the thumbnail, shows the specific image in the main image area.
But for the accessibility, I am trying to add "tabindex='0'" and "role='button'" so I can focus the thumbnails by pressing tabs (and this works) but pressing (enter) button doesn't bring up the selected image on the main image area.
Please see the codepen link below with the code example and you can see that you can tab through the thumbnails but hitting enter on the thumbnail doesn't do anything:
Code with the demo link:
https://codepen.io/asifkhanlush/pen/oNjvVpG?editors=1111
Code:
HTML:
<body>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container">Slide 1</div>
</div>
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container">Slide 2</div>
</div>
....
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container" >Slide 1</div>
</div>
<div class="swiper-slide" tabindex="0" role="button">
<div class="swiper-slide-container">Slide 2</div>
</div>
...
</div>
</div>
JS:
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
loopedSlides: 4
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 4
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
This is a bug/missing feature in Swiper (https://github.com/nolimits4web/swiper/issues/4324), but I found a workaround.
Basically, add data-slide-index to all thumbs and add a keydown listener to the thumbnail elements:
galleryThumbs.$el.on("keydown", (e) => {
if (e.keyCode !== 13 && e.keyCode !== 32) return;
var slideIndex = e.target.dataset.slideIndex;
if (!slideIndex) return;
galleryThumbs.slideTo(slideIndex);
galleryTop.slideTo(slideIndex);
});
Here's the full code with a demo: https://codesandbox.io/s/swiper-thumbs-gallery-forked-2d1up?file=/index.html.
I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes.
Here is the code:
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
What I need to do is either with js or css or both have the images scrolling every few seconds.
How can I do this?
Looking into the sliders.js it is based off
https://github.com/thebird/Swipe
So a function like this could work, it might need some tweaking.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
is it possible to change an image dependent on the current slide in owl carousel?
I know that there are events within owl carousel but I didn't found what I wanted.
Thanks in advance to everyone who takes the time to answer the questions.
Screenshot
HTML:
<div class="row">
<div class="col-lg-3 hidden-md hidden-sm hidden-xs">
<div>
<img src="image1.png"/> <!-- change to image2.png if slide 2 is active -->
</div>
</div>
<div class="owl-carousel-team">
<div class="col-lg-9 col-md-12 item">
<h3>Slide 1</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
<div class="col-lg-9 col-md-12 item">
<h3>Slide 2</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
</div>
Javascript:
var teamCarousel = function(){
var owl = $('.owl-carousel-team');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:false,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight()
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
teamCarousel();
});
You can detect your slide movement by
owl.on('translated.owl.carousel', function(event) {
// Your code here
})
use translated.owl.carousel for after slider moved
Give an id to your image tag, then get the active slider image source and set to <img/>
e.g.
owl.on('translated.owl.carousel', function(event) {
var now_src = $('.owl-carousel').find('.owl-item.active img').attr('src');
$('#you_img_id').attr('src', now_src);
})
Here's the demo https://jsfiddle.net/566j4jsf/
I would like the Anchor-Array of the fullpage.js to be set automatically.
I would like to paste this into my WordPress theme, but i have problem with my functions. Do you have a idea? Thank you for help.
HTML
<div id="fullpage">
<div class="section" id="page-section-1"></div>
<div class="section" id="page-section-2"></div>
<div class="section" id="page-section-3"></div>
<div class="section" id="page-section-4"></div>
</div>
JS
function getAnchorarray() {
var idarray = $("#fullpage")
.find(".section")
.map(function () {
return this.id;
})
.get(); //ToArray
}
$('#fullpage').fullpage({
navigation: false,
scrollBar: true,
menu: '.main-nav',
//anchors: ["page-section-1", "page-section-2", "page-section-3", "page-section-4"],
anchors: getAnchorarray(),
responsiveWidth: 400
});
Just use the data-anchor attribute :)
As detailed in the docs:
Note that section anchors can also be defined in the same way, by using the data-anchor attribute, if no anchors array is provided.
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>