My bxSlider horizontally spans 100% of the browser width - multiple (image) slides display across the viewport, with "moveSlides: 1" set in the options.
A total of 8 slides are being rotated. As I click the "next" arrow to progress through them, something odd is happening at the end. As the 8th slide initially enters the viewport from the right and I continue clicking, there aren't any images displaying to the right of it UNTIL it's about cycle out again through the left side, at which point slides #1-3 suddenly appear where they should in the sequence. From there, the cycle repeats, with the same scenario occurring once slide #8 enters the viewport again.
Basically, I want slide #1 and so forth to appear to the right of slide 8 as soon as they're supposed to show up in the viewport, without this lag. After inspecting the CSS, I'm pretty sure it's a matter of the viewport calculation being off (specifically, the "left" position of .bx-viewport).
How can this specific calculation (the wrapping of the slide lineup) in jquery.bxslider.js be modified? Or is there another approach I should take, one that wouldn't require tweaking the viewport calculations?
I have included the code and replicated the issue here: http://jsfiddle.net/astewes/S7L2n/1/
I am using bxSlider with the following options:
jQuery(document).ready(function($){
$('ul#homepage.bxslider').bxSlider({
controls: true,
displaySlideQty: 5,
pager: false,
startingSlide: 0,
moveSlideQty: 1,
infiniteLoop: true,
preloadImages: 'all',
adaptiveHeight: true,
captions: false
});
});
EDIT: I've updated the list of the options I'm using. I've been able to reduce the above-mentioned delay, but the slider still behaves strangely when cycling back around to image #1. displaySlideQty has proven useful in reducing the lag time, although I'm not sold on the idea of relying solely on it. Space between slides is also off (for portrait-sized images), but this is likely because I'm using a combination of portrait and landscape. I've tried dynamically changing widths of the portrait images, but the use of display: table and display: table-cell (to center everything) made that approach useless.
Related
I have an horizontal slider with lots of "cards".
The JS code that defines its CSS is as follows:
cardCarouselSlider: {
zIndex: 0,
overflow: 'hidden',
width: 300 * cardsNumber,
height: 200,
position: 'absolute',
left: (targetedPlanIndex >= 0)
? -281 * targetedPlanIndex + 40
: -281 * (targetedPlanIndex + 1) + 40,
transition: 'left 0.5s ease',
},
As the value of left shows, I can have the slider slide horizontally by changing the value of targetedPlanIndex.
However, my customer wants to have also a scrollbar (you see it in the image) to be able to scroll rapidly between the cards.
Problem is: when I increase targetedPlanIndex, the slider scrolls to the left, but the scrollbar remains always glued to its start position. See next image, where the index was increased by 1:
I'd like to see the scrollbar slide to the right as the slider goes left, as it would happen if I used the scrollbar to move the slider (see third image).
Any idea how I could do this?
My page is built with React, so basically I believe I am willing to attach some scroll event listener to my slider div, and not to the whole document. After that, there should be some useScrollPosition hook to tinker with.
After pursuing this quest for another couple of days, I haven't been able to find examples of React hooks that are able to detect/manage the scroll of individual components in page, let alone horizontal scroll.
I have solved my problem by leaving CSS aside and putting in place a JS/DOM-based solution, catering to the Element methods that control scroll.
These React solutions are all based on using a useRef hook tied to the page Element that is to be controlled, and accessing its methods through the current property of the reference.
The main drawback of these solutions is that (regardless of what the standards seem to promise) I cannot exploit CSS easing functions to implement a smooth scroll transition: for that I was forced to use a setInterval/setTimeout solution to perform many partial scrolls of my component.
I'm using jQuery Reel to show a 360 product view, doing something like this:
$('img.one').reel({
image: 'http://jquery.vostrel.cz/demo/rc-reel.jpg',
frames: 35,
speed: 0.4
});
I'd like to have it autoplay in reverse (right-to-left, rather than the default left-to-right), but I don't want to change the way the dragging and indicator work (which is what cw: true does -- so I can't use that).
What I've tried
The option cw: true does make it play in reverse, but the dragging and indicator are now backwards from the way they should be.
The option inversed: true seems like it would do exactly what I'm looking for, but so far as I can tell, it doesn't change anything.
Setting the speed option to a negative value (i.e. speed: -0.4) seems to act the same as setting it to a positive value (it doesn't change anything).
Even reversing the order of the images (I'm using an image list rather than a sprite) doesn't help, since that's essentially exactly the same as using cw: true, so the dragging and indicator are still backwards when doing that. Combining reversed order image list with cw: true is the same as using no options at all, and again, inversed: true appears to have no effect in this case as well.
Check out this JS fiddle to see my test case.
(It's using a sprite rather than an image list, but it behaves the same as an image list in all my tests.)
I've tested with both Reel 1.2.1 and 1.3.
How do I get the reel to autoplay in reverse, while still maintaining the drag and indicator directions?
I am trying to adjust the widths of two elements to expand to a wider area when a user closes a left panel.
To do this I animate the left panel to right: 100%, and expand the first element to take over more area while keeping the second element with a fixed width (which also is an animation since now the whole div takes up more space so his percentage needs to change in order for it to take up the same pixel width)
The code is rather long so I won't post much of it here, stack overflow requires something so here's how I do the width animations:
$('#centerWeb').animate({
"width": "81.33333333%"
}, {
duration: 1000,
queue: false
});
JSFiddle: http://jsfiddle.net/dpPG7/
I have several problems, the first, the animation isn't 'smooth', it's fidgety, I've heard or people saying that you can use the same timer queue for queuing animations but I couldn't find how (since I believed that small differences in percentages might cause this).
Any ideas anyone could help with?
My second problem is that sometimes, like in the jsfiddle example, one of the center elements bounces down a row. In my complete web this happens when re-expanding the left area however in the JSfiddle example it happens when minimizing the left area.
In the JSFiddle: The left area when clicked removes it and expands the rest, and the red button when clicked expands the left area back.
My third and final problem, the animation of the left area, when expanding it back, doesn't occur at the same time as the expansion of the first center area (the actionList), it occurs once it's finished, despite being queue:false.
As I commented, I personally prefer this codepen example:
#rightContainer{
-webkit-transition: all linear 300ms;
.. /* browser compatibility & remaining styles */
}
#rightContainer.shrink {
left:20%;
}
and
$("#btn").click(function(){
$("#rightContainer").toggleClass("shrink");
});
Which is imo clean & good practise.
I'm very new to CSS/HTML/JS so I don't have lots of experience with CSS transitions.
I'm trying to animate a div elements on my page, but I can't achieve a desired result so far.
Here is my problem:
In my HTML I have a div container element that has 5 div elements inside of it. They look like simple boxes positioned in the middle of the screen and aren't visible for now. I also have 5 buttons in the corner of the screen.
What I'm trying to do is:
when I click a button (for example button 3) 3 of the divs on the left should disappear and be moved to the left behind the margin of the screen and 2 of the divs should do the same, but move to the right. After that I want 3 divs that are on the right slide back to the screen and 2 divs on the right should slide back as well. So it looks like they sliding towards each other to the positions they started from initially.
I'm trying to do this effect using CSS transitions (transform: translateX(Npx);). So in my JS file I have something like this:
$(document).ready(function() {
$(".button").click(function(){
// PART 1
// move 3 divs to the left using transform: translateX(Npx) (no animation)
// move 2 divs to the left using transform: translateX(Npx) (no animation)
// PART 2
// slide 3 divs to the left using transform: translateX(Npx) (with animation)
// slide 2 divs to the left using transform: translateX(Npx) (with animation)
});
So the problem is that in this case only the part one works and part two seems to be not working.....if I attach the part on code to a different event...like another click button...it works just fine.
So my question is if these two transitions can be done under one event?!?!
I have done this, and this kind of effect can look great. If I understand your question correctly, your issue is that you run the animation AFTER you moved the divs, so your animation function uses the wrong starting point.
What you need is:
Be sure you have a CSS position:relative; set on your divs so the animation can work.
Run your animation function moving your divs relative to their current position (i.e. top, left), and include a success callback. You may need to first use offset() and some math to figure out the distance traveled.
On the completion of your animation (success callback), change the relative position of your divs back to 0px (or whatever they were before) and simultaneously perform the function where you actually move the divs to their new position in the DOM using insertBefore(). I've never seen a flicker since these functions are near-instant, but if you see an issue you can set visibility to hidden while you reset the position and move the divs, and then reset the visibility afterward
You can even set custom z-indexes for your divs during the animation that you reset on the success callback, allowing you to determine which elements the divs pass over/under or specifying which is on top if they cross each other.
I've been coding up a little responsive image slider to display my wedding photos using responsiveslides.js and a little script to deal with vertical images (it sets a max-height based on the browser viewport). You can see it at http://johnandalex.us/photos It's finally working pretty much how I want it to, with 2 exceptions:
The pics show up and then resize after a delay (when the browser window is smaller than the full size of the picture)
The prev/next arrows don't show up until the pics are completely loaded (which takes a while, especially on slower connections because there are over 100 images)
Any ideas for how to improve on these 2 items? I'm totally comfortable with HTML and CSS, but am a complete novice when it comes to JS.
Thanks.
I would hide the slideshow container until $(document).ready fires, then show the control. You can display a loader animated gif while the page is loading up.
EDIT:
Here is an example of how you could achieve this effect:
First you need to specify display:none on the UL that contains your slideshow:
<ul class="rslides rslides1" style="display:none;">
Next, show the slideshow container on document ready and init the plugin as you already have done:
$(document).ready(function () {
$(".rslides").show();
$(".rslides").responsiveSlides({
auto: false,
speed: 700,
timeout: 3000,
nav: true
});
});
You should always set a height and a width to images when possible.