I want to create a ticker newspaper mode slider with swiper js. I have used the following codes, they are not working perfectly.
var mySwiper = new Swiper('.swiper-container', {
speed: 1000,
loop: true,
autoplay: true,
cssEase:'linear',
});
please suggest what can I do?
i think this will help you in your case
let SwiperTicker = new Swiper('.swiper--top', {
spaceBetween: 0,
centeredSlides: true,
speed: 6000,
autoplay: {
delay: 1,
},
loop: true,
slidesPerView:'auto',
allowTouchMove: false,
disableOnInteraction: true
});
Swiper doesn't have parameter cssEase.
I can work fine to add css.
.swiper-wrapper{transition-timing-function:linear; }
https://github.com/nolimits4web/Swiper/issues/496
Related
I'm trying to set the inactivityTimeout on my video element to shorten the time it takes for the control bar to hide. However, the following doesn't seem to change it:
const opts = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
},
inactivityTimeout: 100,
};
videojs(myVideoEl, opts);
When I do this it does work, but I get a warning:
player.options().inactivityTimeout = 500;
VIDEOJS: WARN: this.options() has been deprecated and will be moved to
the constructor in 6.0
Does anyone know why I can't seem to set it using the options?
var player = videojs("sessionsimple-player",{
inactivityTimeout: 100,
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
}
});
Note: Do not use both data-setup and an options object.
https://docs.videojs.com/tutorial-setup.html#options
I have Datatable with statesave and header filter, see below code.
dttblEnrolledUser = $('#tblUsers').dataTable({
paging: true,
searching: true,
bLengthChange: false,
info: false,
ordering: true,
columnDefs:
[{ targets: 0, orderable: false },
{ targets: 5, orderable: false }],
order: [1, 'asc'],
stateSave: true,
dom: '<"top"i>rt<"bottom"flp><"clear">'
});
here is the code for Statesave and applying filtered value.
var state = dttblEnrolledUser.api().state.loaded();
if (state) {
dttblEnrolledUser.api().columns().eq(0).each(function (colIdx)
{
var colSearch = state.columns[colIdx].search;
if (colSearch.search) {
$( 'input', dttblEnrolledUser.api().column( colIdx ).header() ).val( colSearch.search );
}
});
dttblEnrolledUser.api().draw();
}
// Apply the search
dttblEnrolledUser.api().columns().eq(0).each( function (colIdx) {
$('input', dttblEnrolledUser.api().column(colIdx).header()).on( 'keyup change', function () {
dttblEnrolledUser.api()
.column( colIdx )
.search( this.value )
.draw();
});
});
What I Want?
My main priority is to remove sorting from statesave, I mean if user refresh page, sorting should be on default column.
but at that time filter should be work with statesave.
What I did?
I tried to add code like this.
https://datatables.net/reference/api/state.clear()
and I also got saved column in state but cannot reorder it to default.
Have you looked at stateLoadParams?
dttblEnrolledUser = $('#tblUsers').dataTable({
...
stateLoadParams: function( settings, data ) {
if (data.order) delete data.order;
}
})
Will effectively reset the saved sorting order on each refresh.
I have a Slick slider with some images and some html5 videos.
I have managed to make the Prev/Next arrows work: if I click on the arrows the slider goes to the next video (it plays automatically) and the previous one is paused.
Now I've added a button to pause/play the current video, but I can't find a way to make it work properly. The button works only the first time a video is played. If I change slide and go back to the same video I am not able to pause it anymore.
$('.sliderVideo').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
dots: true,
autoplay: true,
autoplaySpeed: 1000,
adaptiveHeight: true,
pauseOnHover:false,
cssEase: 'linear'});
$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$("video").each(function(){
$(this).get(0).pause();
});
});
$('.sliderVideo').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('video');
if (vid.length > 0) {
$('.sliderVideo').slick('slickPause');
$(vid).get(0).play();
var MyPlayButton = $(slick.$slides[currentSlide]).find('.play-button');
//var MyPlayButton = $('.play-button');
MyPlayButton.on('click', function () {
if ($(vid).get(0).paused) {
$(vid).get(0).play();
console.log('play');
} else {
$(vid).get(0).pause();
console.log('paused');
}
return false;
});
}
});
$('video').on('ended',function(){
$('.sliderVideo').slick('slickPlay');});
I would really appreciate your help.
I've created a fiddle https://jsfiddle.net/8ds3Lrxm/22/
OK, fixed this way:
var MyPlayButton = null;
$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){
if (null !== MyPlayButton) {
MyPlayButton.off('click');
}
$("video").each(function(){
$(this).get(0).pause();
});
});
A very simple way (keeping it simple is best)
this way we reset the video whenever we start playing it...
$('#slider_id').on('beforeChange', function(event, slick, currentSlide, nextSlide){
// pause old video (better performance)
var old_vid = $('#slider_id .slide:eq('+currentSlide+')').find('video');
$(old_vid).get(0).pause();
// play current video from start
var cur_vid = $('#slider_id .slide:eq('+nextSlide+')').find('video');
$(cur_vid).get(0).currentTime = 0;
$(cur_vid).get(0).play();
});
$('.video_banner_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
console.log(currentSlide);
$("video").each(function(){
$(this).get(0).pause();
});
});
This is really wired. I have a tab in a TabPanel that I want to refresh every time the user taps it. In the tab there should be a list of things. when i am trying to add the list to the panel(the tab container), it is just do not appear! when i try to add other things they aper normally!
For example:
var listConfiguration = this.getListConfiguration();
var myPanel = Ext.create('Ext.Panel', {
html: 'This will be added to a Container'
});
Ext.getCmp('Peoplebutton').add(listConfiguration);
Ext.getCmp('Peoplebutton').add(myPanel);
This code gets the html perfectly in the place! but the list is not shown! The list code is working fine, I have checked it several times...
I would be very happy if someone can help me (:
The list code, working fine for sure
getListConfiguration: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['firstName', 'lastName'],
sorters: 'firstName',
autoLoad: true,
grouper: {
groupFn: function(record) {
return record.get('firstName')[0];
}
},
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
return {
xtype: 'list',
id: 'list',
itemTpl: '{firstName} ,{lastName}',
grouped: true,
indexBar: true,
infinite: true,
useSimpleItems: true,
variableHeights: true,
striped: true,
ui: 'round',
store: store
};
}
It should be an issue with the height of the list component.
Try adding a fixed height to the list, or maybe flex: 1.
Hope it helps-
I'm trying to add a class "disabled" to the pager if the slider has only 1 slide showing, and nothing to actually slide.
I'm sliding a div, not a list.
It's just a basic div:
<div class="bxslider2">
<div class="wrap">
...
</div>
</div>
Here is the jquery for the slider:
$('.bxslider2').bxSlider({
mode: 'horizontal',
speed: '180',
pagerType:'full',
pager:'true',
captions: false
});
I would like to not show the pager if there is only 1 slide showing.
Thanks for any help!
Justin
I faced the same trouble and here is my solution: we should count how many child elements we have under .bxslider2 block
$(".bxslider2>.wrap").length
and if there is only one, then set option to 'false', otherwise to 'true'.
$('.bxslider2').bxSlider({
mode: 'horizontal',
speed: '180',
pagerType:'full',
pager: ($(".bxslider2>.wrap").length > 1) ? true: false,
captions: false
});
Hope it will helps.
I use css to achieve this.
.bx-pager-item:first-of-type:last-of-type {
display: none
}
Here is a solution if you have more than one bxslider on the page.
$('.bxslider').each(function() {
var options = {
mode: 'fade',
};
if ($(this).find('li').length === 1) {
options.pager = false;
}
$(this).bxSlider(options);
});
Goes through each slider and finds if it has only one li. If so, add pager: false to the object passed to bxSlider.
a nice way to solve this thing is to reload the object like that
and change the controls per number of the items :
var slideQty = $('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 3,
slideWidth: 110,
slideMargin: 0,
adaptiveHeight: true,
pager: false,
moveSlides: 1,
onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }
});
var count = slideQty.getSlideCount();
if (count < 7) {
slideQty.reloadSlider({
controls : false,
minSlides: 1,
maxSlides: 3,
slideWidth: 110,
slideMargin: 0,
adaptiveHeight: true,
pager: false,
moveSlides: 1,
onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }
});
}
return false;
Try this it works for me!!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});