continuous scrolling carousels

[Felix]

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/

[zekoolweb]

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-c.../vertical/

maybe this one could be modify for fit to your need ...

[Felix]

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.

[Felix]

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.

[zekoolweb]

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 !

[Felix]

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.

[Felix]

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 +

[Felix]

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);