-
Posts
-
Hi,
I’m currently using a slider to display an end-to-end banner on my site. If I don’t need a rotating banner but I want to keep the banner looking as is, is there an alternative to the slider so that I can minimize scripts running? Would rather just show as an image.
Many thanks,
JonathanHi Jonathan!
Sure, you could always place a color section with small padding at the top of a page and apply the image as background image :)
Best regards,
KriesiThanks Kriesi,
I tried this but only problem is that then it doesn’t behave like the slider – it’s not responsive, etc. Are there any other options?
Best,
JonathanHey Jonathan!
Here’s a workaround, create a color section, set it an ID (ex: mycustomcolorsection), put a Text Block element inside, then put your image:
Now add this CSS:
#mycustomcolorsection .container, #mycustomcolorsection img{ width: 100%; }Cheers!
JosueHi Josue,
This didn’t seem to work well unfortunately. When I insert as an image in the txt box there was space around it and it didn’t respond fluidly to size changes – would stay small when screen was made larger again. I then tried inserting into an image element within the colour box and it seemed to respond better but then when made to mobile size there was a big white space as the image was thinner than the minimum height of a colour element.
Any other options? Is there no standard way of creating a banner image outside of a slider script?
Many thanks,
JonathanIssues I’m still having are that:
– neither perform as well as the slider on my home page at smaller sizes
– the image in the txt box takes time to load and has the not yet loaded box while it does
– the image in the image element has white pixels at each corner to the rightIs there a way to accomplish this, looking as nice as the easy slider, but without the script?
Many thanks,
JonathanHey!
Have you tried applying the code too?
#test2 .container, #test2 img{ width: 100%; }Regards,
JosueYes, I believe it’s in custom css for both containers (test1 and test2).
I love the way the easy slider looks but it slows down loading of the site too much if I’m just using the one image and if there is a better option…
Hi!
I don’t see too much difference between test2 and the LayerSlider you have on the frontpage, i just noted a min-height applied to the container which creates a space at the bottom when seeing in mobile, however it can be fixed easily:
#test2{ min-height: auto !important; }Best regards,
JosueHi guys,
Unfortunately that didn’t help. Currently live on that page.
It still has the whitespace when screensize is narrower than the image. Also, is there any way to remove the rounded corners of the image? There is a white dot in each of the corners as is.
Sorry for the trouble – and thank you for helping me find a way to fix this!
As mentioned, my ideal solution behaves exactly the same as the easy slider with one image, but without needing to run such a large script to accomplish it.
Thank you!
Best,
JonathanKriesi’s suggestion of the colour section with background image looks the best of the 3 options, but at large screen sizes cuts off the image. Is there any way to force the section to be the same height as the image (even as it resizes)? If there is a way then I think that could work well.
Hi!
You can use this to force the height of the Color Section for larger screens sizes:
@media only screen and (min-width: 1000px) { #test3 { height: 200px; } }Regards,
IsmaelThanks Ismael – is there a way to just ensure the section is as tall as the image whatever the height is? So it automates and shrinks as the window is made smaller?
Thanks for the help guys, but I am thinking I’ll just stick to the slider as no other option seems to be as fluid when resizing windows as the slider is. Also, I removed the slider and then did a load test and the results were still showing heavy scripts being loaded above the fold – I thought removing the slider would remove that but it didn’t. Where are these other scripts coming from? I thought the slider was the only above the fold script I had.
Best,
Jonathanjquery still needs to be loaded in as well as another few but overall it shouldn’t make much difference.
Is there a way to minimize the number of scripts being run? It seems that all the speedtests I’m doing (including googles) are recommending that I minimize scripts. I thought removing the slider would do it but it didn’t.
- The topic ‘Alternative to slider?’ is closed to new replies.