I use the "FLexslider - Jquery" plugin.
I don't like it when animationLoop is true and it reaches the end of the slides, it does a quick scroll to the start. I would like it to instead keep a continuous loop. I did NOT see an option for this.
Can anyone help me?
Based on the date of your post, can we assume that you're using Flexslider2? If you are, the option animationLoop should already be set as TRUE and should clone your first and last slides so it will always loop instead of "reset" back to the beginning. Can you paste your code on what you have and lets get going from there.
Ex:
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
animationLoop: false,
video: true,
controlsContainer: '.flex-nav',
manualControls: ".flex-nav_tab li",
start: function() {
console.log('changing slide')
}
});
Related
I have a problem with Swiperjs, that I'm trying to make the crossfade, but it doesn't crossfade like it should, but between showing the two images it adds approximately 20% white overlay between the two images.
Hard to describe, but as if it would first fade the image to 20% white overlay, so the image brightens a bit and then it fades to the next image. So maybe it's not obvious, but still not the same as
JS:
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
loop: true,
speed: 2000,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
Just standard Swiper JS, nothing fancy here which would change how the animation behaves. HTML exactly the same as on their page, not changed.
I'm going through the same thing.I try to add "animation" function below the transition(duration) function.But error was throw said "animation was not a function".I don't know why I can't add my own function in the javascript source file swiper-bundle.js.And if modify the transition(duration) function directly it dosen't work either.Maybe I need read the source file deeply.
I'm using a basic swiper with no option. Then I have a listener for "mousemove" in the body of my site. I did this to build a mouse follower effect. This works well, but when I start to drag a slide, it seems this event will not arrive anymore and my custom div "used for mouse effect" does not move.
I finally found a solution in the api! You can set touchStartPreventDefault to false:
this.mySwiper = new Swiper(".swiper-container", {
touchStartPreventDefault: false
})
Look for the Touches section in the #Parameters
touchStartPreventDefault: false
causes firefox swipe bug.
You can use pointermove instead of mousemove.
Bro after full day of testing this is what finally worked
const slider = new Swiper(e, {
slidesPerView: 'auto',
direction: 'horizontal',
speed: 200,
loop: true,
touchStartPreventDefault: false,
allowTouchMove: true,
})
I cannot figure out the way to solve this. Ive tried adding "table-layout:fixed" but it no longer works in dt's current version.
Thanks
var config = {
"bFilter": false,
"bInfo": false,
"bPaginate": true,
"scrollY": 200,
"table-layout":fixed,
"data": dataoMine,
"bAutoWidth": false,
"columns": columns,
"scroller": true,
"language": {
"emptyTable": "empty data"
},
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
]
};
<table class="dataTable" style="width:80%; height:100%; margin-left:10%; margin-right:10%;}">
<thead><tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
<th>a5</th>
<th>a6</th>
<th>a7</th>
<th>a8</th>
</tr></thead>
</table>
I don't quite have enough information to give you a firm answer, because you don't tell us what's in your columns variable and don't give us the structure of your dataoMine array. But, it seems pretty clear from your screen shot that you have four columns of data, and also have eight columns specified. That will show all the columns and whatever background you have for the missing data columns. Presumably, your "barbershop stripes" are the page background in whatever theme you are using.
Make sure that you have the same number of columns in your data that you have in your column specification, and see if that fixes your problem.
After researching it turns out that this problem is very common. It seems there is no definitive solution but this worked for me:
add this into dt's config:
scrollX: 100%
i fixed my problem by just adding
scrollX: true
Is there a way to have both centered slides and an infinite loop, along with thumbnails with swiper.js? I have the following settings, but when I add loop true it doesn't seem to work.
var mySwiper = new Swiper('.swiper-container',{
paginationClickable: true,
centeredSlides: true,
initialSlide:1,
speed:1200,
centeredSlides: true,
slidesPerView: 'auto'
http://machinas.com/wip/hugoboss/fall2014/startpage/variable-width/
Thanks
centeredSlides is not really compatible with Loop mode. Try to increase loopedSlides and loopAdditionalSlides parameters.
eg:
centeredSlides: true
loop: true
loopAdditionalSlides: 100
I'm trying to pass additional parameters to the ajax call that is done after selecting a row then clicking delete button. Here's the code I have:
$('#datatable').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bFilter": false,
"iDeferLoading": <%= #count %>,
"sAjaxSource": "redraw",
"fnServerData": fnDataTablesPipeline
}).makeEditable({
sDeleteURL: "delete.rb",
oDeleteParameters:
{
foo: WHAT IS ID
}
});
As you can see, I'm trying to send a parameter foo=ID but I'm not sure how to grab the selected ID of the row.
i have used the following function mentioned in the link below to get the id's of the rows that have been selected and sending them via ajax to the serverside where they get deleted.
hope this solves what you were looking for...
http://datatables.net/examples/api/select_row.html