Buttons position gets change in custom slider in Angular - javascript

I have this custom slider
Working Link :
https://stackblitz.com/edit/angular-ivy-rwuxjd?file=src%2Fapp%2Fapp.component.html
Slider is working but Next and previous buttons are not at proper location when we slide it to next or previous slides, Every slide will have different contents and slide height will also change, but issue is when i slide to next or previous then Next and Previous buttons location should be managed automatically but presently when we click on next next while slides are being translated the button moves to top most position. I don't want to fix the button position, It should be managed according to the content height.
Any solution is highly appreciated. Thanks

You need to add some CSS rules for that. Try put a container div around the buttons and the image slider and give it a min-height.
Not perfect but will put you in the right direction.
https://stackblitz.com/edit/angular-ivy-airvm5?file=src/app/app.component.css

Related

Modify animatingTo in flexslider

I've got a little application that shows one photo in the middle of the page, some right/left buttons for changing the photo, and a flexslider at the bottom of the page having thumbnails of all available photos. Depending on the width of the browser, 4 to 10 thumbnails are visible at a time.
I want to synchronize the slider with the main photo. I've turned animation off. And when I click on something in the slider, the main photo updates. I've got this working.
But when I change which photo is shown using the right/left arrows, I want to update the slider so that the thumbnail for the main photo is shown, as in, move the slider right or left. I tried just manually changing (increment or decrement) the slider.animatingTo value, but that doesn't update the slider on the screen.
I've also tried, by modifying the jquery.flexslider.js file, putting one of the update methods onto the slider object (essentially making it public). But I'm not sure what the right function to call would be.
Any help would really be appreciated.
I found the solution:
slider.flexAnimate(slider.getTarget("prev"));
and
slider.flexAnimate(slider.getTarget("next"));

Youtube / Google Style Carousel Slider

I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!

Owl Image Carousel - Flickering buttons

I have created a basic image carousel using the Owl Carousel plugin.
By default, the "prev" and "next" buttons appear below the images, I have used a negative margin in CSS to push them up over the image.
However, now, when I hover over the buttons, they start to flicker. Has anyone else come across this? Any idea how to fix this?
Set the z-index higher for buttons than slide div and put backface-visibility:hidden; on button and slide both.
To prevent the buttons from flickering, simply set the ".owl-wrapper" to have a lower z-index than ".owl-pagination".
Thanks for solving this so quickly.

How do I alter behaviour of jQuery .mouseleave() based on the element the cursor moves *to*?

Hi guys I have put together a simple dropdown menu system that uses hoverIntent to display the submenu and also display a lightbox style 'lights out' dark background.
I've got the menu working, but I'd like to update it so if you move from one item to the next the dark background stays where it is rather than disappearing and reappearing.
I have created a jsFiddle so you can see what I'm talking about:
http://jsfiddle.net/gGd6Y/10/
Try hovering over menu item 1 then moving to item 2.
I would like to be able to see the element the mouse cursor has moved to in the .mouseleave() part of the call to HoverIntent, then if it's another menu item I would prevent the dark background from being switched off.
With the way the HTML is currently setup it can't be done. The shadow covers the other hoverable elements. So when you mouseleave you are hovering over the shadow not the other LIs.
My proposed solution: http://jsfiddle.net/iambriansreed/k98LP/
I made the menu appear above the shadow. I delayed the shadow fade out action and made sure no other menu item was hovered before actually fading out.
See if this helps: http://jsfiddle.net/gGd6Y/11/
I've changed the menu items to stay on top of the overlay.
Edit:
Solution proposed in my last comment:
http://jsfiddle.net/gGd6Y/16/
Simple solution is to add mouseleave listener to container of all items.
More flexible solution is to store boolean values is_element_hovered for each element. When mouseleave event happens, set small delay and after that delay check your boolean values and set background animation properly.

Flash-looking animated banner with JQuery

I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.
A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.
All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.
B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.
C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. The green box would behave in the same manner, linking to Page 3.
The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.
I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.
Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.
I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.
This page has a good primer on the animate method.
http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html
Here's what I would do:
I would make the HTML of the page you want.
I would create CSS of each style of box that you will have.
I would have all the same CSS directives on every box that will
animate. I have found the animate method more agreeable if all CSS
that is to be computed has the same parameters but with different
values.
I would use full resolution images in the 4 outer boxes.
I would animate the div containing the image, not the image itself.
I would make the image fill the div dynamically so that when I
changed the size of the div the image would be a gimmie.
I would work in firebug testing out different commands and see how
they behave. This is critical. The interactive javascript console
is your friend.
This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!
I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)
http://jsfiddle.net/BH8s5/3/

Categories