how to start swiper Autoplay when user scroll to swiper wrapper id
It usually runs automatically when opening the page
how can i control autoplay events ?
This is example:
https://codepen.io/elostoracom/pen/ExgRNvP
And here is the js code
new Vue({
el: ".home-slider",
data() {
return {
homeSwiper: "",
};
},
mounted() {
this.homeSwiper = new Swiper(".home-slider", {
updateOnWindowResize: true,
loop: true,
slidesPerView: 1.5,
spaceBetween: 10,
speed: 500,
centeredSlides: true,
centeredSlidesBounds: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
}
})
how can i control autoplay events ?
You can use swiper.autoplay.start() to start the autoplay and swiper.autoplay.stop() to stop the auto play imperatively.
how to start swiper Autoplay when user scroll to swiper wrapper id It usually runs automatically when opening the page
Intersection Observer lets you know when an element is in view. It's got a good support in the (modern) browsers, but if you want it to work in all browsers, you can use the polyfill.
Here is a codepen
Related
I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......
I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin
For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.
I'm currently building a slider with swiper. Now I want to add a class to the "new" visible slide and remove the same class from the old on.
I tried it with this. But it's not nearly working as aspected.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
loop: true,
onSlideNextStart: function (slider) {
$(".swiper-slide[data-swiper-slide-index]").addClass("slider-collapse");
$(".swiper-slide.swiper-slide-active").removeClass("slider-collapse");
}
});
Amongst others I'm really struggling with the slide duplicates.
I am using JW player. when player starts loading it shows 'Loading symbol' but if i set controls: false the loading icon also not appear while video start. is there any way to hide only bottom controls
Reference
var playerInstance = jwplayer("player1");
playerInstance.setup({
file:"",
width: "100%",
displaytitle: false,
controls: false,
primary: 'html5',
mute:'false',
autostart: true,
advertising: {
client: "vast",
tag: ''
}
});
Have you tried using .jw-controlbar { display: none } in a style tag in your head tag? https://developer.jwplayer.com/jw-player/css-skinning-reference.html#
I am using http://responsiveslides.com/ to build a slideshow with custom navigation. I would love this navigation to run through once and then stop back at the first one. Any ideas on how to do this? This my JS for it (basically taken from their docs...).
Thanks in advance!
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: true, // Boolean: Show pager, true or false
nav: true, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: true, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: ".slider", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: ".types-home", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){
}, // Function: Before callback
after: function(){
} // Function: After callback
});
Opening and then closing a popup using Magnific Popup on a fullPage.js site seems to stop the autoScrolling: false, option working.
So once the pop up closes you can no longer scroll manually up and down the site. You can use the menu anchors to snap to sections but not scroll. Its normal again once refreshed but will happen again after opening a popup.
Any ideas why this happens and how to resolve it?
Magnific Popup
https://github.com/dimsemenov/Magnific-Popup
fullPage.js https://github.com/alvarotrigo/fullPage.js/
fullpage code:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['section1','section2'],
navigation: false,
scrollOverflow:false,
showActiveTooltip:true,
slidesNavigation: false,
menu:'.menu',
fixedElements: '#header, #footer',
paddingTop:'140px',
autoScrolling: false,
scrollOverflow: false
});
</script>
Magnific Popup code
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery:{enabled:true},
image:{titleSrc: 'title'},
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
});
//]]>
</script>
MagnificPopup HTML
<img src="image.png" width="100%">
Add the plugin's initialization inside the afterRender callback as per fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
Like this:
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['section1', 'section2'],
navigation: false,
scrollOverflow: false,
showActiveTooltip: true,
slidesNavigation: false,
menu: '.menu',
fixedElements: '#header, #footer',
paddingTop: '140px',
autoScrolling: false,
scrollOverflow: false,
afterRender: function () {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
image: {
titleSrc: 'title'
},
callbacks: {
beforeOpen: function () {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
}
});
});