I am trying to make a slider for my card component. but the problem is I am not able to display them in a proper manner.
I tried setting the width of Carousel inner from 100% to 25% but That increases the number of pages in the carousel and shows blank pages when data from my API runs out.
providing the link for codesandbox Here is the link
Related
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?
Guys I'm trying to recreate this site, just for a learning purpose,
and in the News section of the home page, there's this card with
a hover effect. Is it possible to pull out that just with css ?
I always end up with that slide out half behind the next card.
Different z-index on each card would work, it's just that last one
is sliding out in the 'wrong' direction.
Here's the sites link https://altar.io/
the website you're trying to re-create uses wow.js which generates animations with JS and CSS.
you can get it from here:
https://wowjs.uk/docs
you can check the library by just looking at the DIV element of each card. they contain a data attribute like data-wow-duration which is a wowjs library codes
https://jonathanrace77.github.io/
In the portfolio section there is a "sync" version of the slick carousel. (The top carousel should show what is selected in the bottom).
However, on a fresh load of the page, the top carousel shows nothing. It is only after the page is refreshed (not hard refreshed), that the picture shows.
Can anyone help me understand what is happening here?
The slider div img did not like width:auto.
Setting this as px or vw (in my case) solved the problem.
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
The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.