I am using Swiper 3.4.2 slider with thumbs as a pagination slider. And I need to disable drag on the pagination slider but to enable click events so the main slider can be changed by clicking on thumbs in the pagination slider.
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0,
slidesPerView: 'auto',
shortSwipes: false,
slideToClickedSlide: true,
preventClicksPropagation: false,
preventClicks: false
});
By setting simulateTouch to false, I am loosing the click touch event also.
Setting the touchRatio: 0 will disable the drag touch event and leave the click touch event enabled
Update from v4
allowTouchMove: false,
From version 4.0, you can use:
allowTouchMove
If false, then the only way to switch the slide is use of external API
functions like slidePrev or slideNext
You can alsow use touchRatio at breakpoints:
breakpoints: {
600: {
slidesPerView: 1,
spaceBetweenSlides: 30,
touchRatio: 1
},
768: {
slidesPerView: 2,
touchRatio: 0
}
},
Related
I'm fairly new to videojs but I upgraded a project with videojs to v7.17.0
Defined the playback rate in the options
videojs(
'my_video',
{
techOrder: ["youtube"],
playbackRates: [0.5, 0.75, 1],
children: [
"mediaLoader",
"posterImage",
"textTrackDisplay",
"loadingSpinner",
"bigPlayButton",
"controlBar",
"errorDisplay",
"textTrackSettings",
"resizeManager"
],
sources: [
{
"type": "video/youtube",
"src": 'video_url'
}
],
controlBar: {
pictureInPictureToggle: false
}
}
)
This didn't add the playback rate menu in the control bar. So I did some test in the browser console itself
player.controlBar.addChild('playbackRateMenuButton')
e {player_: o, isDisposed_: false, parentComponent_: t, options_: {…}, id_: 'my_video_component_5045', …}
This suggests that menu button was added but still no button in the control bar itself.
I also tried this with the pictureInpicture toggle menu and it does add it to the controlbar but not the playback rate menu
Anyone know a fix for this?
P.S. I tried to define playbackRateMenuButton: true in the controlBar option as well which throws a RangeError: Invalid array length
This usually happens "data-setup" is passed in the video tag, in that case, the options passed while initializing is not applied. Removing data-setup from HTML must work.
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup="{}" // Remove this from code.
>
trying to build a website with swiper with bigger number of photos.
On various browsers on Mac and PC it works well, but fail on ios safari after more than 50 images are within my images array.
Failure is that IOS Safari try to load the page, refreshes automatically and try again and again, then show a message saying that website loading failed.
Same on IOS Firefox works.
The source I build up using some PHP within a CMS (LEPTON), after collection the image names (without size & extension) within an array:
foreach( $aImages as $image )
{
$div .= ' <div class="swiper-slide" data-title="' . $image . '" >' . PHP_EOL;
$div .= ' <img data-src="' . $imageURL . $image . '_8b.png" data-srcset="' . $imageURL . $image . '_24b.png 1200w" class="swiper-lazy">' . PHP_EOL;
$div .= ' <div class="swiper-lazy-preloader"></div>' . PHP_EOL;
$div .= ' </div>' . PHP_EOL;
}
my JS to initialize the slider looks like:
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
/* parameters with different value than default */
// Duration of transition between slides (in ms)
speed: 1400,
// fading effect
effect: 'fade',
fadeEffect: {
crossFade: true
},
// show hand on image
grabCursor: true,
// add visibility class to currently showing image
watchSlidesProgress: true,
watchSlidesVisibility: true,
// Lazy Loading
preloadImages: false,
lazy: {
loadPrevNext: true,
loadPrevNextAmount: 1,
loadOnTransitionStart: true,
},
// continuous loop mode
loop: true,
// double click zoom into image
zoom: false,
// enable keyboard navigation prev/next
keyboard: {
enabled: true,
onlyInViewport: true,
pageUpDown: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: false,
},
// center image
centeredSlides: true,
centeredSlidesBounds: false,
// autoplay
autoplay: {
delay: 3000,
disableOnInteraction: true
},
autoplay: false,
});
Any idea what's wrong or what I can change in order to solve my issue ?
Thx in advance
I think the solution for my problem are the virtual slides ....
Testing this but getting other issues there ....
And the available examples in native JS does not really help.
Update: Finally I got it running with virtual slides.
However there is a bug within combination with fadings.
Without fade parameter it is running.
We are working on a mobile web application. The designer likes the image carousel effect on App Store (the screenshots of the an App). So we try to mimic the same effect using JavaScript.
We are using iScroll to implement. So here is a customization of its demo carousel: http://jsfiddle.net/0t9savgj/. The options are:
{
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapSpeed: 400,
keyBindings: true,
indicators: {
el: document.getElementById('indicator'),
resize: false
}
});
The problem is: for the last image, there is always some extra space, which is unwanted:
Does any one knows how to solve this? Or some other JS libraries implementing the same carousel? Thanks.
After exploration, the only way is to use the scroll event of iscroll-probe.js. Manually stop the scrolling when reaching the right border. But the indicators are not exact.
I am trying to take a picture using camera in Sencha Touch 2. Here i have one button 'Take a Picture', when i will press it, camera should start. As i am new to this sencha touch 2, i am unable to figure it out, how to do this?
For this i used the below code:
Sencha Fiddle Link
Please help me. I do not want to use Phone gap.
You have to add device folder of Sencha Library in root directory
and add below code in
Ext.require('Ext.device.Camera');
and use this code for capture image using camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
If you want to use purely sencha, then you can check this code:
xtype: 'button',
handler: function(button, event) {
Ext.device.Camera.capture({
source: 'camera',
destination: 'data',
success: function(imagedata) {
var img = Ext.getCmp('theimage');
img.setSrc('data:image/jpeg;base64,' +imagedata);
},
failure: function() {
Ext.Msg.alert('Error', 'There was an error when acquiring the picture.');
},
scope: this
});
But if you want to use phonegap camera features, may be you have to change the code. As sencha is giving the default feature to handle the camera, i wish not to go with phonegap. Hope it will help..
Iam using sencha touch for building mobile application, Ia m using card layout switch in my tab panel. sometimes the card layout is not working properly. Please help me regarding this.
App.views.TabPanelView = Ext.extend(Ext.TabPanel, {
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'horizontal'
},
items: [item1, item2,item3,item4,item5]
}
}
First you should change horizantal to horizontal
simple Just Put cover: false in your cardSwitchAnimation. Hope it works