How to Make a custom slider using slick slider with thumbnail slider? - slider

I am working on one project which has a slick slider. I want to make a custom slick slider same as https://www.masterclass.com Where once you click on thumbs it will redirect you to somewhere and it will change main slider images while you click on arrows it will change the sliders.
I have gone through this website http://kenwheeler.github.io/slick/ but it is not what i am looking for. Thanks

If you go to http://kenwheeler.github.io/slick/ and do a find for slider syncing, it will show a demo that functions very similar to what you are describing.
To have the slide redirect on click, in the HTML, make the slide(s) content links with the href pointing to wherever you want to go.
Unless I'm missing your intent, this is almost exactly the slider behavior shown on https://www.masterclass.com.
Let me know if this helps! Good Luck!

Related

Why is my colorbox overlay not showing any controls?

I have included the colorbox css and js and it works when I click any image. However, I don't see any button/control on the overlay. It is only the image with dark overlay behind it. What could be going wrong here?
I am doing this in k15t Scroll Viewport for Confluence.
I tried changing the default script values but even that didn't help. Am I supposed to add the controls manually? I don't think so.
I would like to see the default close button along with slideshow effect, etc. that colorbox offers.
I figured it out. Though dumb but still. The default colorbox images (button icons) folder was residing at a location different from where colorbox expected it. So now, I can see the close button at least.
What still remains is - though I have set the colorbox properties right, I still don't see the previous and next buttons on a page with multiple images. What am I missing? It should have shown up by default...
Thank you.

Edge Animate CC dynamic / animated slider

I want to make a dynamic animated slider with symbols that contain clickable actions vs a slider image only approach. I would like to use a "next" button and a "back" button that will scroll multiple background images that contain clickable links. I can produce a basic image slider with the back and next buttons, but this approach is limited. Any help on how I can do this in Edge Animate CC will be very appreciated.
I was looking for a very simple slideshow a while ago. Came up with this here:
http://jquery.malsup.com/cycle/
If you want your Slides to contain any clickable items you will be able to simply add them to the sides div. Just set the picture as a background image in CSS and you are free to develop any clickable items infront.
Here is another tutorial that worked fine for me: http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle
To me this is easy to understand and if you are used to jQuery at least a little bit this here will work out fine for you.

jQuery Animate Toggle - Animation only works on second click

Task: I wanted to create a simple share button which extends to a share section (F,T,G,P) when clicked.
I failed to let the section slide out of the share button - what I really, really wanted - but managed to let a separate ul element slide out on the right side.
The animation worked… until I set the ul to hide initially via $('.networks').hide();
The sections is intended to only show up after a click, but now after the first click it just "pops open" ignoring the configured slide-out. Sliding only works in both directions (open and close) after clicking on it at least once .
I've uploaded an Example here at Codepen.io and as a jsFiddle.
Side note: the demos are behaving a little bit strange since they appear to only show a slide-in fx. The slide-out fx, with which we start, always looks like it pops open - that's not the case, it works after the second click, so you got to focus your eyes to see it (on a normal browser it visibly works better).
PS: Bonus points if you help me make this slide out of the "share" button. Be aware that I only have rudimentary knowledge of Javascript ( * duck and run * ).
Take a look at this fiddle link.
I changed the display property of the buttons to be inline-block instead of inline.
Elements with display inline can not have a width and i think it was the reason why jQuery was not able to animates the Elements width. I also animated the wrap around the ul instead of the ul.
EDIT: made a fast mockup of the thing sliding out of the button. Changed some css to be on the list elements itself instead of on the a elements, just work through the css and I think it will look ok.
edit forgot the link: link

Can I add a hyperlink inside a tooltip in an NSView?

I want hyperlinks in the tooltips of my OSX application, which then link to the Help Book in various places. Is this possible?
No, a tooltip is always placed next to the mouse with no possibility to click on it. But I guess you could achieve the look of a hyperlink by using NSAttributedString, although I'm not sure if the tooltips render them correctly.

Search for CSS(Sencha Touch) tutorials

I want to change the layout of my app. I want use my own buttons and change background color.
Can someone post some useful tutorials. I'm not so good in css
thanks for help
My only advice is for you to use Firebug if you want to customize you app.
Set cls attributes to your components, launch the app on a Firefox/Chrome/Safari and then just right click on the HTML element you want to customize and take a look at the CSS set for the element. Then, it's all about CSS writing.
Either you can override the existing CSS with your own stylesheet, you can also use SCSS for theming a touch application. Take a look at this guide on SCSS http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
ya you can change your background colors in touch-charts-full.css file. In that you can able to change shape of the buttons also.If suppose you want to chnage the background color of toolbar, Search for toolbar in css file and change background color in that.