I have an issue with the swiper (http://www.idangero.us/sliders/swiper/api.php)... I am on page 1 and when I swich to the page 2 I want the slider to start with the first slide. I set mySwiper.swipeTo(0, 0, false); on pagebeforeshow and it doesnt work. the STRANGEST thing is that it works perfectly if I swich to second or third slide (ex mySwiper.swipeTo(1, 0, false) or mySwiper.swipeTo(2, 0, false)) but on the first one (0) it simply doesn't swich. Why is that? I tried every possible thing. It doesn't switch on the first slide, only on others. The only method that works is onpageshow but its ugly because first it shows one slide and after another..
I also tried with mySwiper.swipePrev(); a few times but its blocking on slide 2.. It wont go on the first slide.
UPDATE:
here's the jsfiddle example: http://jsfiddle.net/alecstheone/9VBha/103/
so... if I go to second page and I swipe to the third slide than I right click and go back, than back to page 2 the swiper is still on the slide 3 and it should be on page 1 as I set
mySwiper.swipeTo(0, 1, true);
If I set:
mySwiper.swipeTo(1, 1, true);
or
mySwiper.swipeTo(2, 1, true);
it works... only on 0 it wont...
I also noticed that in the 1.8.0 version of the swiper it works that command, but in the latest (2.6.0) it wont.
const swiper2 = new Swiper('.swiper-container2', {
direction: 'vertical',
slidesPerView: 1,
initialSlide: 2,
});
you can use initialSlide to set first slide
If you look up the method swipeTo() in the library you'll find the following condition:
if (index > (_this.slides.length - 1) || index < 0) return;
Which indicates you can only use this method from index 1.
Why don't you just initialize the plugin without the pageBeforeShow option? It should take the first slide.
UPDATE
Finally got it to work and I also hope the author reads this since this is a terrible library to setup as the configuration parameters go berzerk throughout the whole script.
$(page2).click(function () {
//mySwiper.activeIndex = 0;
//mySwiper.startAutoplay();
//mySwiper.swipeReset();
//mySwiper.reInit(true);
setTimeout(function(){
// to make sure the swiper-wrapper is shown after the animation of $.mobile.changePage()
mySwiper.swipeTo(0);
}, 200);
$.mobile.changePage(page2);
// $("#photo").hide().delay(1000).fadeOut();
// $("#photo").animate({opacity: 0.0}, 1);
});
As you can see, the commented functionality seems straightforward but only brings frustration to the people using this. For me this is a design flaw in naming convention and boolean traps.
I also noticed you set height and width dynamically and I'm sure there "is a way" to let the script calculate these parameters as it uses a polyfill for getComputedStyle(). Or you might try to use CSS3 calc() to take some performance hit out of JS.
Second time I use this library and again I had to use the unminified version to debug the functions and it's parameter setup which doesn't work together very well. Only a set of combinations can make this library work and it's up to the developer to figure this whole bunch out.
Good luck on the script and note that the provided code really helped (very quickly) in understanding the problem.
DEMO
I had the same problem few months after this discussion.
I know it's a ugly way to fix the problem, but its the only way I found :
When you call mySwiper.swipeTo(0), this line below :
if (newPosition === currentPosition) return false;
will return false and not apply the swipe, because newPosition = 0 and currentPosition = 0
so i changed this line on the method to
if (newPosition === currentPosition && newPosition !== 0) return false;
and it works now fine.
Since this does not work
mySwiper.swipeTo(0, 1, false)
you could also force it like
var swiper = new Swiper(
".swiper-container",
slideConfigs
);
swiper.on('beforeInit', function () {
swiper.slideTo(1, 1, false)
swiper.slidePrev(1, false)
})
swiper.init()
And don't forget to add this to your configs
init: false,
Related
I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several blank slides after the initialSlide. The blanks only appear when you click next starting with the third slide. When you click on the previous button the blank slides do not appear. What am I doing wrong?
$("#sync1 .item").on("click", function() {
var index = $(this).attr("data-slick-index");
$(".overlay-carousel-container").css("display", "block");
$("body").css("overflow", "hidden");
$("#overlayCarousel").slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
initialSlide: index,
focusOnSelect: true
});
})
$(".close").on("click", function() {
$(".overlay-carousel-container").css("display","none");
$("body").css("overflow", "inherit");
$("#overlayCarousel").slick("unslick");
$("#executiveOverlay").slick("unslick");
});
The Jquery attr() function returns a string value. When you pass that into the slick constructor function it translates it to a different number.
Adding a simple Number() function to change the index to numeric should solve your problem. Just place the following middle line between the lines I placed it:
var index = $(this).attr("data-slick-index");
index = Number(index);
$(".overlay-carousel-container").css("display", "block");
This answer is for the people who are struggling slick carousal as I also faced a lot of problem with it, even though it seems very easy as mentioned but I found out that it has lots limitation.
Very old
To have exact same look like mentioned it needs CSS(SCSS) which is difficult to do in development which as a new user I realised it quite late. Or you don't get dots and arrows with the same exact look easily.
Several other issues like the one mentioned here and other I found over stack flow.
The best one I resorted to for similar process is the one mentioned here
it's latest
and comes with a simple tutorial as well
Recommended for new beginner developers.
I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/
I'm trying to reload the slider and my custom pager after I've removed certain slides from it.
Here is what I have tried:
$(function() {
var slider = $('#slider').bxSlider({
pagerCustom: '#bx-pager'
});
$('.list').on('click', '.delete', function() {
image = $(this).closest('li').find('[type="hidden"]');
// image.attr('id') contains a string: image-0, image-1, image-2, etc.
$('#slider, #bx-pager').find('.' + image.attr('id')).remove();
slider.reloadSlider({
pagerCustom: '#bx-pager'
}); // I have also tried: slider.reloadSlider();
});
});
It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.
Thank you very much for any help.
As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.
In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.
I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.
Here is the before (line 1294):
if(slider.pagerEl) slider.pagerEl.remove();
And after:
if (slider.settings.pagerCustom === '') {
if(slider.pagerEl) slider.pagerEl.remove();
}
I'll post the bug on GitHub as soon as I have the time.
jQuery / Javascript / PHP
I am using the Liquid Slider as a pagination mechanism on a website, how I use it is I basically have it smoothly scroll through the pages left-right & vice versa.
What I'm trying to accomplish right now is: to have the dynamic arrows link to an external page at the end of the scroll (once it detects it is at its last page/tab), rather than to have it scroll back to where it first began.
Since such option variety is not originally supported from the author website, I am wondering if anyone from here would have an idea how to accomplish this?
A snippet of my dynamic arrows with their callback functions (functions not included):
$('#slider-id').liquidSlider({
continuous:false,
dynamicArrows:true,
dynamicTabs: false,
callbackFunction: function(){ drawLines() }
});
$('.liquid-nav-right-arrow').click(function(){
simRefresh(), simRefresh2();
});
$('.liquid-nav-left-arrow').click(function(){
simRefresh(), simRefresh2();
});
You can set conditionals based on the current panel (tab).
callbackFunction: function () {
var sliderObject = $.data( $('#slider-id)[0], 'liquidSlider');
if ( (sliderObject).currentTab === 4 ) {
//turn off click event
//update link
}
Then if you want to reset the events again, you can try sliderObject.registerArrows(), although I haven't tested this out.
I have playing around with a steriotab system with the prototype.js library, everything works fine except the next DIV under the container of steriotabs is showing like a flash when turning to next tab.. I know its little bit difficult to understand.. here you can see it on their website http://stereointeractive.com/blog/code/prototype-tabs/
You can see that by changing the four tabs(features, setup, configuration, download) continuously three four times. The comment section will show up like a flash just below the navigation tabs(Features, Setup, Configuration, Download).
I think the issue was when it goes to next tab the current one is display:none and ofcourse there is nothing in the meantime(1 or 2 seconds) so the next block of html code is coming to the top just below the navigation..
this javascript may causing the issue..
activate: function(tab) {
var tabName = tab.id.replace(this.options.ids.tab,'');
this.currentPanel = this.options.ids.panel+tabName;
if (this.showPanel == this.currentPanel) {
return false;
}
if (this.showPanel) {
if (this.options.effects) {
new Effect.Fade(this.showPanel, {queue: 'front'});
} else {
$(this.currentPanel).hide();
}
}
if (this.options.effects) {
new Effect.Appear(this.currentPanel, {queue: 'end'});
} else {
$(this.showPanel).show();
}
this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
tab.addClassName(this.options.classNames.tabActive);
this.showPanel = this.currentPanel;
}
you guys have any thought?
You're suspicion is correct, the reason you get the flash is the few milliseconds there is no container there holding back the content below the object. One option you could consider is while fading the container also sliding it up (look into parallel effects in scripty) that way it would not be nearly as jarring with the content disappears.
I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.