New bric - Swiper / Full page slider


#101

Thank you :blush:Will not need to, it’s made for desktop and mobile more or less I’ll have to readjust the text for mobile Jonathan at tumult will have to look at It because ‘interaction between flexible layout setup and your animations that make the positioning unexpected when not entirely on screen’ at some instances the images are zoomed in when readjusting the window width.


#102

Ok - understood. It’s just that the images don’t really scale correctly - they seem to go off the screen at different device sizes. When I’ve had this issue, I just create two extra device layouts - one for tablet portrait and one for smartphone portrait. I then group everything on the page and scale it to fit the appropriate device width. It’s then just a question of adjusting the height of the layout screen to get rid of the surplus white space. I did this when creating the compare slider and it responds well to placement size as well as screen size.


#103

Images are an issue on this yes you are correct. Even Lucas version suffers from this phenomenon but the text readjusts.

Your compare slider is cool. What else did you do with hype?


#104

I mainly use Hype to create bits that aren’t natively included with blocs. Occasionally, I create animated website headers where clients demand this EXAMPLE HERE. As in my earlier suggestion, I create animated headers to work at different screen widths without losing the edges of images. I find that keeping everything (text and images in proportion) offers more predictable results.

Hype is also good for creating things like video and audio playlists, as in THIS EXAMPLE. It is also effective in creating tabbed content and custom animated menus. I also created a horizontal slider which has been made available to users here - you may like to download the source files and have a play with it in Hype - get the link from HERE.

Another app that I like to use for simple animations, particularly presentations, is Keynote. Presentations in keynote work particularly well in Blocs and remain fully responsive. You can see a typical presentation HERE. Just scroll down the page to see it.


#105

Cool, Yes I did this page for with blocs and hype animations and yes just how you had it with 3 different layouts for the animations in hype.


#106

Yup, that looks very good and works like a charm at different sizes. I guess the problem with full page animations is that they tend to be not full page on mobile screens if scaling is used. However, the good news is that you can create images specifically designed for the different screen sizes and make them unique on each device layout. This only has to be done in the Hype file - once it’s embedded into Blocs, you can forget device variants as the animation itself will scale to fit the various device screens automatically. I think Blocs and Hype are a marriage made in heaven. I think many users would benefit from using Hype alongside their blocs app. It would certainly allow for the development of quite sophisticated interactive elements without waiting for a brics designer to come up with something. Whilst the work of brics designers is greatly appreciated, it should be remembered that buying two or three custom brics is about the same price as Hype - so why not buy the Hype app and have infinite design and functionality options?


#107

This kind of comment in a place where I’m advertising my work is, to say the least, inappropriate.


#108

I think the one key factor you are missing here is when you buy a custom bric or a template you are paying for the fact it’s already built for you and set up is quick, you pay for convenience. Of course you could buy Hype, but you then need to learn to use it and in all fairness master it to create the type of 3D effect this bric provides.

To put a slightly different spin on this, the same could be said for Blocs. Code editors are free, they allow you to easily create the type of site Blocs does, however you would need to invest time and energy into fully understanding how to write code to use it. Not everyone has the desire to learn or delve into the world of code, so they buy Blocs.

I think Hype is a great app and a deeper integration with Blocs would be fantastic. But I also think Custom Brics offer an opportunity to get great addition features with a far lighter learning curve. Both have pros and cons, but let’s try not to discourage the use of either.

:+1:


#109

Totally agreed.


#110

I think what @hendon52 meant to say was, if you know the ins and outs of hype and he knows it one can use it to to build his own slideshows but definitely not brics. Two are totally different one gives you the ability to make slidesshows within Blocs the other gives a line of code that it generates. @Lucas you’ve inspired me to challenge myself and know what Is possible with hype. Having said that, this slide is more or less a personal project challenge and it was not an easy one. I advice everyone who likes the swiper to go ahead and support Lucas and his brilliant creation .
@norm as for the 3D transition you have the ability to mimic a 3D transiton in Hype but like you said one has learn how to use Hype, not everyone is up for the challenge if all they want is the slideshow, I think that’s where the distinction lies between the two Hype and Blocs Brics.


#111

I apologise if my comment has caused you offence - it wasn’t intended as such. I thought this forum was, first and foremost, to provide a platform for the exchange of ideas and issues relating to the use of Blocs. Certainly, I did not suggest that Hype was a substitute for custom Brics. What I was trying to point out in my direct response to @petester was that if customised interactive elements were a frequent requirement, rather than hope and wait for a custom brics designer to come up with a solution, SOME users may benefit from using Hype as an alternative development app for the creation of such elements. The price comparison wasn’t to suggest that custom brics were an expensive option, but to demonstrate the low cost of the Hype application. Clearly, if all a user wants is the ease and flexibility of buying a custom bric that fulfils a specific need, then clearly that option offers the best value for money. But for those who’s needs may be more diverse where there is no available custom bric, then it makes sense to find an application that can be be used in a more diverse way.


#112

So back to the topic of Swiper. I’m sure that mackyangeles won’t mind me posting a link to his latest site http://www.mundobuilders.com/ which is a fine showcase of what the Swiper add-on does best.


#114

The problem I have and many others I have spoken to with this type of slider is that it is cropping images.
Wouldn’t it be easy to add an option to use typical css language to say “cover” “fit” “fit proportionately” etc. this would give more control over the image and display.
Those would be much needed great options…especially for product. No background images. Background images are bad for SEO. A ready made Bric just waiting to be made here I think.
Does anybody have one ready made?


#115

What you describe is more of a carousel than a slider. The distinction is small but meaningful.

Carousels

  1. There’s no cropping
  2. Some scripts support both HTML and Images
  3. If your concern for SEO carousel fits your desc.

Sliders

  1. Any full-screen slider will always crop to achieve responsiveness and maintain fullscreen. However this is a feature, not a drawback. If you examine the cropping in the example @webdeersign gave, the responsive behavior is excellent and the crops are meaningful and do not take away from the aesthetic. This cropping simply make it more accessible to people with different screen sizes and orientations.

  2. If you use a responsive carousel it can scale down to the size of a thumbnail on mobile while being much larger in a fullscreen desktop browser. Usually thats not what you want for a header though. But for a portfolio page in the body of the page somewhere it’s great.

  3. Sliders are not used for about image SEO. They are not meant to be the preferred UI for portfolio’s. They are best used to feature images.

  4. If you’re planning to obstruct the images with type like most Hero Sliders it really won’t be a big deal to have cropping IMHO.


#116

Actually in professional photography and elsewhere they go by many names. It depends what the app has despaired to call it in some cases but they are generally called a “light box.
Cropping is definetly wrong for photography and or any portfolio. Artists carefully decide where and when to crop art…be it a painting, photograph, sculpture graphic or any number of other possibilities.
Images can be responsive and scale without cropping.
I used a light box example elsewhere…
imagehttps://forum.blocsapp.com/uploads/db8018/original/2X/9/95279579826f0471e56e109285e4b76880ebb542.jpeg
There is a far better UI with this …less clicking is always better. The user sees all images and selects their choice to view larger…to see another the user just clicks another image without having to open and close each image.
Background images just are terrible in general for SEO.
And certainly both cropping and or SEO is important to have control over for websites competing in the marketplace with products and services. Every little bit helps. :))


#117

Lucas
It’s been a while but this is an example of a “non cropped” product image.
It doesn’t get cropped, it’s a product!
https://www.batesfootwear.com/US/en/home?CID=SEM-Search_Brand_Exact_Bates_B_Core-bates+shoes&msclkid=c4997b9b332310ef569520010911b880&gclid=CKG0uJTht90CFQxRgQodlrIN-g&gclsrc=ds

If you could make a bric like this it would be correct for products and sites where no cropping takes place.


#118

How can we update to the new version of swiper?


#119

@HMM Maybe Owl Carousel can get very close:

@Ofel1 See how to update the bric in the manual:


#120

I’m looking for this…
http://johnhulingphoto.com/huling-photography-portfolio.html

Where all images are seen at once with a “persistent”…large image based upon selection. That way there is no “button button who’s got the button” game. The user can select their choice immediately without wasting time. I do like the owl carousel for certain things. I may buy thst one anyway for other uses. Thx.