[Resolved] Creating a Carousel Header Element

Home Forums Support Creating a Carousel Header Element

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1290787
    Erika

    Hi there,
    Iยดd like to create a Carousel Header Element which appears only on one page. Actually it should be an easy job ๐Ÿ™‚
    I have the following possibilities:
    1. I disabled the image we added as a hook-Element for all other pages and created the carousel in Elementor. One way to do this is to add a carousel. Does not look bad, it is full screen width, it has the texts we want to have on the image, but I am not fully satisfied with it, because this element sticks on the page, although the option sticky is turned off. The slider should disappear under the navigation when I scroll down. Another way is to add an element and set the background up as a slide show. In this case I do not get the complete width of the screen and I can not add a different text to the slides, but it disappears when I scroll down ๐Ÿ˜€
    2. For another option I found these scripts: https://www.w3schools.com/howto/howto_js_slideshow.asp
    I thought of using Elements and create a hook where I add the HTML, I added the CSS to the Child Theme CSS and got stuck at adding the javascript. This way might or might not work. At least I could define that this hook element appears only on one page and I can add and customize text as I wish.
    The questions are: how should I add the javascript to test if the element-solution works.
    Any other suggestions about getting the wishes result of a slideshow with three images and texts on them (without placing the text on the image) that if full screen width and disappers unter the header&navigation when scrolled down?

    *Please add the sites to the URL:
    studio-carousel-as-a-background/ – carousel in Elementor as background slideshow
    studio/ – carousel in Elementor as slideshow-element – as far the best looking one – maybe it only needs some lines of css not to stick on any device?
    elementor-12401/ – element and css added, javascript missing

    Thanks.

    #1290944
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is that an option in Elementor to make it sticky? It doesn’t look like it should do that by default. If possible, I would just deactivate the sticky option instead of disabling it per-device using CSS – it will be lighter that way.

    #1294411
    Erika

    Hi Tom,
    yes, i missed that the SECTION was set as sticky. Now it is working nicely.
    Thanks, Erika

    #1294478
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.