+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Off Topic (http://get-simple.info/forums/forumdisplay.php?fid=12)
+--- Thread: continuous scrolling carousels (/showthread.php?tid=15064)
continuous scrolling carousels - Felix - 2020-09-14
Hi,
Does anyone know a library for continuous vertical scrolling carousels, or how to code this ?
4 columns parallel with continuous vertical scrolling carousels
Here is an example what I am looking for:
https://www.wish.com/
RE: continuous scrolling carousels - zekoolweb - 2020-09-20
(2020-09-14, 04:08:35)Felix Wrote: Hi,
Does anyone know a library for continuous vertical scrolling carousels, or how to code this ?
4 columns parallel with continuous vertical scrolling carousels
Here is an example what I am looking for:
https://www.wish.com/
I use this one which rely on plain JS, no depedency, but not exactly as wish
https://jonchretien.github.io/infinite-carousel-docs/demo/vertical/
maybe this one could be modify for fit to your need ...
RE: continuous scrolling carousels - Felix - 2020-09-21
Hi,
Thanks for your reply.
But I am looking for continuous scrolling, not a stepping carousel.
Also it needs to have columns moving in opposite directions.
I am on it, so check back soon in this thread.
RE: continuous scrolling carousels - Felix - 2020-09-21
Hi,
Ok I have finally put together the right css and js to reproduce exactly that gallery on wish.com
For those who are interested, I have attached the html, css and js code to this post.
(updated on 11:45)
You can see this cool gallery in live action here:
http://gallery3.showme.zone
comments and ideas are welcome.
- - - - - - - - - - - - - - - - - - - - - - -
Next steps to do:
1. Add light-box functionality to the gallery
2. Expanding the animated banner text
3. Add a cool banner voice
4. Make a beginning with Compress css and js scripts
with php in the functions.php file
5. Make a plugin for it.
Check back this week in this thread.
F.
RE: continuous scrolling carousels - zekoolweb - 2020-09-21
(2020-09-21, 20:16:16)Felix Wrote: Hi,
Ok I have finally put together the right css and js to reproduce exactly that gallery on wish.com
For those who are interested, I have attached the html, css and js code to this post.
(updated on 11:45)
You can see this cool gallery in live action here:
http://gallery3.showme.zone
comments and ideas are welcome.
- - - - - - - - - - - - - - - - - - - - - - -
Next steps to do:
1. Add light-box functionality to the gallery
2. Expanding the animated banner text
3. Add a cool banner voice
4. Make a beginning with Compress css and js scripts
with php in the functions.php file
Check back this week in this thread.
F.
Very nice, this would be a nice plugin i guess !
RE: continuous scrolling carousels - Felix - 2020-09-21
Hi Zekoolweb,
Thanks for your reply.
Good idea to make a plugin for it.
I have updated my post.
Will work on it end of this week.
http://gallery3.showme.zone
F.
RE: continuous scrolling carousels - Felix - 2020-09-24
Hi,
as mentioned I made a beginning with compressing the css and js scripts,
such as removing comments and white space.
This is useful because it makes a website load even a bit more faster.
This can be easily done with straight forward php,
here is what I have working so far:
Code:
if (return_page_slug()=='index') {
// Example
// 1. For the home page we need screen.css - home.css - gallery3.css
// 2. Create a variable $buffer and initiate it empty
// 3. Load the contents of the css files in the variable $buffer
// 4. Remove comments - empty spaces and white space
// 5. Write the contents of $buffer to a file compressed.css
// 6. Echo out compressed.css like a usual css link in the header
$buffer = "";
$buffer .= file_get_contents(GSROOTPATH . 'theme/Gallery3/assets/css/screen.css');
$buffer .= file_get_contents(GSROOTPATH . 'theme/Gallery3/assets/css/home.css');
$buffer .= file_get_contents(GSROOTPATH . 'theme/Gallery3/assets/css/gallery3.css');
// Remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Remove space after colons
$buffer = str_replace(': ', ':', $buffer);
// Remove space before acolade
$buffer = str_replace(' {', '{', $buffer);
// Remove space after acolade
$buffer = str_replace('{ ', '{', $buffer);
// Remove whitespace
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
$filename = GSROOTPATH . 'theme/Gallery3/assets/css/compressed.css';
file_put_contents ($filename, $buffer);
echo '<link href="' . get_theme_url(false) . '/assets/css/compressed.css"' . ' rel="stylesheet">' . "\n";Ok, so far so good.
- - - - - - - - - - - - - - - - - -
If anyone knows how to remove white space for the following cases, please let us know:
1) remove white space left from a single quote,
example: ('--animation', 'slide')
2) remove white space left and right from =>
3) remove white space left and right from =
4) remove white space left and right from +
RE: continuous scrolling carousels - Felix - 2020-09-24
Hi,
I found a way to remove white space left and right from => = +
Make use of str_replace
Code:
// Remove space around =>
$buffer = str_replace(' => ', '=>', $buffer);
// Remove space around =
$buffer = str_replace(' = ', '=', $buffer);
// Remove space around +
$buffer = str_replace(' + ', '+', $buffer);