Can Jssor video slider have Thumbnail navigation? - javascript

In the example, video slider is using bullet navigation, I have tried copying Thumbnail navigation codes from 'image-slider-2' in the example folder to the video slider file, but I encountered several problems:
I get an error message saying 'thumbnavigator' container height is not set, I have to manually set its height. But what I don't understand is in the example file, it is not required to set the height of thumbnavigator container, why?
After I set the height, the videos are working. However, the thumbenail images are not showing, leaving a blank navigation bar.
Is it possible to set thumbnail navigation for the video slider?
Besides, an off-topic question: Can transition effects be applied to video slider?

The video slider is a normal slider which contains a video element in each slide.
Actually, you can place everything you like in any slide.
So, the video slider is fully customizable as well.
Reference:
http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html
http://www.jssor.com/development/slider-with-caption-jquery.html

Related

Creating slider using Image Widget in Blogger Blogspot

I have a blog. Here is the url you can check out --> https://dreamsummer0.blogspot.com/
The problem I have now is how can I turn the hero image into a slider? Is it possible to create a slider/carousel using Widget Image?
If not, I really don't mind manually inserting each and every image URL in the slider/carousel. I just need to know how to do it. And make sure the menu is placed on top of the carousel/slider as it is now.
If you view the blogsite in mobile or tablet (width: 980px and below), you can see all image are 100% width except the last three photos. Im using flex css for that one. How can I make it to turn 100% in width?
Any help?

Sliding parallax background images

I have recently worked on a site that is effectively a series of long scrolling pages. It has some large background images the make use of a parallax effect as well as some carousels and regular text content. I am using [slick] by ken wheeler for the carousels. 1 I Live demo site here
My question is, is anyone aware of a way to create a carousel of large images (like the one pictured below)that also makes use of a parallax effect? the effect is currently achieved using the Parallax.js plugin (http://pixelcog.github.io/parallax.js/) but I am open to other plugins/approaches. Thanks in advance for any ideas or pointers in the right direction.
Screenshot of current carousel that I wish to add parallax effect scrolling to:
*edit: I have tried creating multiple slides within the carousel using the parallax.js method to add a background image. However this just keeps the first image used as a constant background and does not slide off screen when the arrow is clicked

WP Metaslider onclick enlarge image same screen

so I'm using WP metaslider for a slideshow/gallery display. Everything works great with it, except instead of clicking on the image in the slider and opening its original size in a new window, I would prefer to click on the image in the slider and it enlarging within the slide, similar to the accordion gallery styles, but I want the image clicked on to get larger and the other images to remain the same size or get smaller.
I've tried CSS and javascript shown here but it did not work.
I am open to other plugins that may give me a closer result than this, but the accordion plugin here is the next closet but I still want to be able to see all of the images without them being cut off.
http://kerimthedj.com/new/photos

Jssor - How to display multiple thumbnail navigator on the same container

I have been playing with the api of jssor for a little while now and there is a setup that I can't manage to reproduce.
I am trying to use a nested slider (http://www.jssor.com/demos/nested-slider.html)
but display the thumbnails for the set of slides that is being displayed. After looking at the api code, the library doesn't seem to allow multiple thumbnail navigator on the same slide container (apparently the slides set selectors in the nested sliders counts as a thumbnail navigator).
I have tried setting thumbnail navigators with unique id for each of the sub sliders containers but that gave me weird results.
Basically, I would like to merge the nested slider and this one http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html so that the vertical thumbnail navigator shows me the current set of slides.
Is it possible to do that?
Thanks!!
Please follow steps below to work it out.
make a main slider with thumbnail
make child sliders with thumbnail
place each child slider in each slide of main slider.
Btw
Please let me know the thumbnail skin for main slider, and the thumbnail skin for child slider, I will work out a demo for you.
please check out the demo http://www.jssor.com/testcase/nested-slider-with-thumbnail.source.html

Responsive Bootstrap Carousel without Image Inside

I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?

Categories

Resources