Need some clarification regard swiper plugin. Used in other pages, it works fine. Only on particular page, we are updating image manually to change based on user preference. Once Image is changed, we need initalize the Swiper carosuel.
Tried in multiple way with swiper.init() or destroy(true, true). But its not initalize the component. Not sure whether this plugin wont support this logic.
Whether we can init swiper like below and verify in browser console.
var swiper = new Swiper('.swiper-container'){
loop: true,
slidesPerView: 1,
autoplay: 2000
}
setTimeout(function() { swiper.init(); },10000);
Put swiper instance in a function and use that function when you want to init swiper.
function initSwiper() {
new Swiper('.swiper-container'){
loop: true,
slidesPerView: 1,
autoplay: 2000
}
};
initSwiper();
Related
Im trying to add a slide to an empty slick slider that has been initialized. I am using the statement:
$('.mapOfficeSlideshow.slick-slider').slick('slickAdd', '<div><h3>test</h3></div>', 0, false);
When i do the statement it returns false. Addintionally, if i just try adding it without specifying the atIndex and the addBefore nothing gets added:
$('.mapOfficeSlideshow.slick-slider').slick('slickAdd', '<div><h3>test</h3></div>');
This is my initiate code below:
function initiateSlider() {
console.log("start");
var $mapOfficeSlideshow = $('.mapOfficeSlideshow.slick-slider');
if ($mapOfficeSlideshow.length) {
// Initialize slick
$mapOfficeSlideshow.slick({
slide: '.slide',
autoplay: true,
autoplaySpeed: 7000,
pauseOnHover: true,
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
rows: 0,
prevArrow: $('.mapOfficeSlideshow .prev'),
nextArrow: $('.mapOfficeSlideshow .next')
});
}
console.log("end");
}
Its worth noting that if i add the manually before initiating the slider itself works fine. Its just adding slides that doesn't work. Additionally, removing slides works fine for me.
Try this. This works fine for me:
$('.mapOfficeSlideshow.slick-slider').slick('slickAdd', '<div><h3>test</h3></div>', true);
So one thing i did wrong was i didn't add the proper classes to the slide i wanted to add. it would have "slide lazy" as a class in my case.
Additionally, it appears that adding slides to the slider if it didn't have any when initiated was causing problems. once it had some i could remove and add freely.
I have two Swipers on a page, which are linked and synchronized. Both are looped and show some 60 slides or so (length is dynamic). Both Swipers have pagination and it works fine on both a click on 'next' and 'previous' button (.swipePrev() and .swipeNext()).
The first Swiper is showing just one big image, the second one is a carousel with thumbnails (showing the active one, and two previous and two next slides). When I page on either one, the active index is updated and the active slide is centered in the small one, the big image is updated too.
I now want to add functionality to also update both sliders when I click on a slide in the carousel. I added the following code to the carousel:
onSlideClick: function() {
accoPager.swipeTo(accoPager.clickedSlideIndex);
accoSlider.swipeTo(accoPager.activeIndex);
}
This works fine when I click it once, but on a second click it doesn't work anymore.
Fun thing, after I use the regular pagers (the arrow buttons on either side), or I slide, the events work again. What seems to be happening is that the active index is not updated properly when I use .swipeTo(), but it is corrected when I use .swipeNext() or .swipePrevious().
The initialization of the Swipers is (big one first):
slider= $('#acco-slider-top').swiper({
mode: 'horizontal',
paginationClickable: true,
slidesPerView: 'auto',
loop: true,
loopedSlides: 99,
onTouchEnd: function () {
pagerCarousel.swipeTo(slider.activeIndex);
}
});
pagerCarousel = $('#pager-area .swiper-container').swiper({
mode: 'horizontal',
paginationClickable: true,
slidesPerView: 'auto',
offsetPxBefore: 144,
loop: true,
loopedSlides: 99,
onTouchEnd: function () {
slider.swipeTo(pagerCarousel.activeIndex);
},
onSlideClick: function() {
pagerCarousel.swipeTo(pagerCarousel.clickedSlideIndex);
slider.swipeTo(pagerCarousel.clickedSlideIndex);
}
});
I tried setting the active index, but that doesn't work. When I alert anything in the onSlideClick event I found that the event is still linked to the Swiper, but it gets stopped somewhere in the swiper code.
Does anyone have any issues with this too and what's the best way to proceed? I think it has something to do with the params.onSlideClick _this.allowSlideClick toggles in the Swiper code, but I can't pinpoint what exactly.
EDIT: Not unimportantly, I'm using Swiper 2.4.2+
This should work, hard to say where is the problem without looking at live example. Check this example and how it is done here, maybe it will be helpful http://goo.gl/Nc2M5P
I feel bad that I have to ask for help in this forum but the site I downloaded the script from does not have any form of help.
Anyway, I'm using a swiping script from iDangerous Swiper. I can't figure out how to stop the swiping at the last slide or div. Anyway suggestion is much appreciated. I'm using the default swipe.
In the API options section, it says that the default for looping is false...but have you tried explicitly setting it to false?
var mySwiper = new Swiper('.swiper-container', {
speed:750,
loop: false
})
It looks like in their "default" example they are setting loop to true:
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop: true,
grabCursor: true,
paginationClickable: true
})
If you simply remove, the loop property it may fix your issue.
From the documentation for iDangerous Swiper, it looks like you should add the noSwipingClass css class to the div for the last slide.
Via: http://www.idangero.us/sliders/swiper/api.php
noSwipingClass
string
'swiper-no-swiping'
'stop-swiping'
CSS class of html element that will be used to prevent swiping when "noSwiping" parameter is set to true.
I have a jCarouselLite plug in on my website. I am loading the li's from a jquery.load function. I cycle through the carousel vertically and have a function that triggers as soon as the first item comes back around to the top.
At this point, I want to refresh the data with another ajax.load. This is where I run into a problem. Once that data is reloaded, the carousel stops rotating (or rather, is running in the background).
One solution I tried is to try re-instating the carousel with another:
$("#tableapp").jCarouselLite({})
line. This seems to cause two carousels to be running at the same time. And then a third, and 4th, and so on.
So basically I am looking for some way to clear the carousel, reload the updated data, then run it again. Any ideas?
$(document).ready(function () {
updateConsole() //Gets new data
scrollWindow() //Starts carousell
});
function updateConsole() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
circular: true,
afterEnd: function (a) { ScrollEnd(a); }
});
};
function ScrollEnd(a) {
$('#tbDebug').val($('#tbDebug').val() + '\nScroll Ends');
if (**code that determines slide 1 is back on top**) {
updateConsoles();
scrollWindow(); //If this code is commented, the carousel stops cycling.
//If it isn't commented, two carousels start and things
//get buggy and eventually freezes.
}
}
I am pretty new to javascript, jquery, etc. I also tried this on jCarousel (not lite), but I couldn't get it working with vertical scrolling. It seemed buggy.
Here's a not-particulary thought out suggestion:
When you ScrollEnd, .remove that div.
http://api.jquery.com/remove/
Then recreate it and dump load into it.
Creating a div element in jQuery
Does that trick it into working?
I'm using jquery library jScrollPane to set the custom scroll bar for the whole page.
scroll_bar = $('body>div').jScrollPane(
{
autoReinitialise: true,
showArrows: true,
maintainPosition: false
}).data('jsp');
When new content is added at the bottom of the page (while user is at the bottom of the page), I call:
scroll_bar.getContentPane().find(".content").append(some_content);
scroll_bar.reinitialise();
This reinitializes the scroll bar, but it takes the user to the top of the page. I would like the window to stay at the same spot. Any solutions?
Are you sure you're getting the data needed, I have no idea if this works, but have you tried:
scroll_bar = $('body>div').jScrollPane(
{
autoReinitialise: true,
showArrows: true,
maintainPosition: false
});
scroll_bar.data('jsp');
And would'nt you normally use the .scroll-pane class for this, and not the body>div selector ?
I would think maybe it should be something like this:
var api = scroll_bar.data('jsp');
api.reinitialise();
If you want the scroll bar to retain its position, you should set the
maintainPosition: true
Also, try reconstruct the code like this:
// Use jscrollpane api function to enable reinitialization
var scrollelement = $('body>div').jScrollPane({ maintainPosition: true});
var api = scrollelement.data('jsp');
api.getContentPane().html(result);
// Needed to apply jscrollpane after change new container type
api.reinitialise();
Hope this help :)
From the docs:
maintainPosition [boolean] - Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it - so it doesn't scroll as you add more content (default true)
You set it to false.
For people who have issues re-initializing after the above:
function reinitialiseScrollpane() {
var settings = {
maintainPosition: true,
// add your settings here, below are examples
arrowButtonSpeed: 1,
showArrows: true,
animateScroll: true
};
pane.jScrollPane(settings);
var api = pane.data('jsp');
api.getContentPane().append();
api.reinitialise();
}
The important part is using the settings. Without re-initialising the settings, it can be glitchy. I have put it in a function call, so you simply call this whenever content is altered in any of your scroll panes (assuming you kept the .scroll-pane class with all regions)