I am developing an Ionic/Angular application and have to show an image slider. I did this with swiper ([https://swiperjs.com/get-started#install-from-npm]). Now my slides look like this (images have different widths and heights):
actual looking
My question is: Is there a way to center these images horizontally and vertically? This would be so much better looking!
Thank you in advance.
The idea of swiperjs is to turn the entire div into a slider slider. You can do whatever layout you want inside that div. My advice is to design it separately, with some tool and then add it to the div with the swiper-slide class.
Related
I am learning Image Slider Development. I am trying to develop an Image Slider like this one. I am using Scriptaculous. I placed images using img tag. In this regard, I can move images from right to left. But how can I reproduce the images at right side?? How can I make a cycling circle ?? How can I iterate images like they are adjacent to each other ??
Could anyone help me to get an Idea regarding this??
There are alot of really good places to start I would recommend How to build simple jQuery image slider with sliding or opacity effect?. You may not need the opacity but it covers good information.
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
I am using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.
In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.
Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)
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?
So, I have this site I'm throwing together. My image gallery is pretty basic, but doesn't need to be dynamic anyway so I don't mind.
My question is this... I have the motion down, but I can't figure out how to collapse the image without it squashing the contents.
I either want them to slide nicely off the #container div, or have the vertical bars wipe between images... Not sure how to explain this in text.
Here's the site in question:
http://intwind.com/test/