Streaming live at 10am (PST)

Carousel on this page...https://webflow.com/about#jobs


#1

Is that carousel effect doable with the current slider? https://webflow.com/about#jobs


#2

It doesn't look like their using a slider at all, more like a div with an interaction to move sideways. A gradient on the side to add the fading effect.

That site was created in Webflow just look at the source code.


#3

Think I'll just look at the URL :smiley:


#4

Not a carousel. It's a tab.
You can make this in webflow blind folded
with both hands, 1 leg and your tongue tied behind your back

<div class="w-tab-menu tabs">
  <a class="w-tab-link w--current w-inline-block tab" data-w-tab="Tab 1">
    <div class="w-editable">All Positions</div>
  </a>
  <a class="w-tab-link w-inline-block tab" data-w-tab="Tab 2">
    <div class="w-editable">Engineering</div>
  </a>
  <a class="w-tab-link w-inline-block tab" data-w-tab="Tab 3">
    <div class="w-editable">Design</div>
  </a>
  <a class="w-tab-link w-inline-block tab tab--last" data-w-tab="Tab 4">
    <div class="w-editable">Sales & Marketing</div>
  </a>
</div>

#5

@Revolution Talking about the slide/carousel effect on the top of page not the tab section :grin: I see that the link I gave was to the tab area...sorry. Agree tabs are super easy in Webflow.

@GermanAlex Clearly it's done in Webflow. The reason I wondered if it was possibly a slider or new element they were introducing was because of the repeat images. I see now they just used them multiple times.


#6

looking at the code... it's not a real carousel.
the interactions are available in the js file
https://daks2k3a4ib2z.cloudfront.net/55de95401f19df505cc6c89d/js/webflow.cf3664f20.js

search for "new-interaction-8"

appears to be a div that your slowly shifting left.

notice the 2 white gradients on the left and right to left hide the shift

and... the shifting ends after the dariostefanutto example

ie: it never repeats. If they had it repeat... you would see the entire block "blink".

they would have to tie the first block to the end - in order to create a "real carousel".

kind of a neat / interesting way they did it actually.

  <div class="w-section scrolling-examples" data-ix="new-interaction-7">
    <div class="gallery-veil"></div>
    <div class="w-clearfix example-wrapper" data-ix="new-interaction-8">
      <a class="w-inline-block example example-psiu" href="/website/Psiu-Puxa-Wallpapers" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example-mtv"></div>
      <a class="w-inline-block example example-history" href="/website/history-of-animation" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example--pinterest"></div>
      <a class="w-inline-block example example--portfolio" href="/website/dariostefanutto" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example-ideo"></div>
      <a class="w-inline-block example example-uniqlo" href="/website/Uniqlo-Responsive-Experiment" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example-salesforce"></div>
      <a class="w-inline-block example example-psiu" href="/website/Psiu-Puxa-Wallpapers" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example-mtv"></div>
      <a class="w-inline-block example example-history" href="/website/history-of-animation" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example--pinterest"></div>
      <a class="w-inline-block example example--portfolio" href="/website/dariostefanutto" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example-ideo"></div>
      <a class="w-inline-block example example-uniqlo" href="/website/Uniqlo-Responsive-Experiment" target="_blank">
        <div class="link-veil">View Site →</div>
      </a>
      <div class="example example-salesforce"></div>
    </div>
  </div>

#7

@Revolution we aren't on the same page today :grinning: They repeated the images – used them more than once...the MTV one for example. That's why I initially thought it was a carousel...because I didn't notice.

It's all good.


#8

it happens... I have those more than occasional brain farts :smile:

Take a closer look at the code below.... I cleaned it up to make it more readable.

Some of the DIVs... like the MTV logo are not clickable. That's why I looked at the code in the first place.
I was curious why the MTV logo didn't have an href.

In reviewing the code... you will see that there duplicate DIVs... specifically 2 for the MTV logo.

It's just a series of DIVs strung in sequence to make it look like a carousel.

That's why I previously said
"kind of a neat / interesting way they did it actually."

What they've done is basically a magic trick. At first glance - they made it look like a carousel.

But it's just an illusion

(for me - being extremely anal)... I sat and watched the entire interaction play out while reviewing the code.

<a class="w-inline-block example example-psiu" href="/website/Psiu-Puxa-Wallpapers" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example-mtv"></div>
      
<a class="w-inline-block example example-history" href="/website/history-of-animation" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example--pinterest"></div>

<a class="w-inline-block example example--portfolio" href="/website/dariostefanutto" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example-ideo"></div>

<a class="w-inline-block example example-uniqlo" href="/website/Uniqlo-Responsive-Experiment" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example-salesforce"></div>

<a class="w-inline-block example example-psiu" href="/website/Psiu-Puxa-Wallpapers" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example-mtv"></div>

<a class="w-inline-block example example-history" href="/website/history-of-animation" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example--pinterest"></div>

<a class="w-inline-block example example--portfolio" href="/website/dariostefanutto" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example-ideo"></div>

<a class="w-inline-block example example-uniqlo" href="/website/Uniqlo-Responsive-Experiment" target="_blank"><div class="link-veil">View Site →</div></a>

<div class="example example-salesforce"></div>
    
    <div class="example example-salesforce"></div>
    
    <a class="w-inline-block example example-psiu" href="/website/Psiu-Puxa-Wallpapers" target="_blank"><div class="link-veil">View Site →</div></a>
    
    <div class="example example-mtv"></div>
    
    <a class="w-inline-block example example-history" href="/website/history-of-animation" target="_blank"><div class="link-veil">View Site →</div></a>
    
    <div class="example example--pinterest"></div>
    
    <a class="w-inline-block example example--portfolio" href="/website/dariostefanutto" target="_blank"><div class="link-veil">View Site →</div></a>
    
    <div class="example example-ideo"></div>
    
    <a class="w-inline-block example example-uniqlo" href="/website/Uniqlo-Responsive-Experiment" target="_blank"><div class="link-veil">View Site →</div></a>
    
    <div class="example example-salesforce"></div>

#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.