Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. multiple carousel + each caption on hover

multiple carousel + each caption on hover

Scheduled Pinned Locked Moved General Discussion
5 Posts 2 Posters 146 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jotundes
    wrote on last edited by jotundes
    #1

    hey,
    i was wondering if it is possible to have multiple carousels on one page while displaying their caption on hover?
    (because of using the .lay-carousel-sink-parent class with jquery it fades in all at the same time)

    eventually there is a selector to target the captions of each carousel?

    thanks in advance,
    johannes

    edit: it is possible to achieve by adding a custom class to the carousel and then use this custom class to target the captions for each carousel

    J 1 Reply Last reply
    0
    • J jotundes

      hey,
      i was wondering if it is possible to have multiple carousels on one page while displaying their caption on hover?
      (because of using the .lay-carousel-sink-parent class with jquery it fades in all at the same time)

      eventually there is a selector to target the captions of each carousel?

      thanks in advance,
      johannes

      edit: it is possible to achieve by adding a custom class to the carousel and then use this custom class to target the captions for each carousel

      J Offline
      J Offline
      jotundes
      wrote on last edited by
      #2

      anyone with similar problem:
      the solution is to give each carousel an id and then you can target the caption with the help of the id in jquery for example:

      jQuery(document).on("mouseenter", "#carousel-id", function(event) {
      	jQuery("#carousel-id .lay-carousel-sink-parent").animate({ opacity: 1 }, 1000);
      });
      jQuery(document).on("mouseleave", "#carousel-id", function(event) {
      jQuery("#carousel-id .lay-carousel-sink-parent").animate({ opacity: 0 }, 1000);
      });
      
      1 Reply Last reply
      1
      • arminunruhA Offline
        arminunruhA Offline
        arminunruh
        Global Moderator
        wrote on last edited by
        #3

        ah very nice!

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by arminunruh
          #4

          maybe this is better, without js:

          #carousel-id .lay-carousel-sink-parent{
          opacity: 0;
          transition: opacity 1000ms ease;
          }
          
          #carousel-id:hover .lay-carousel-sink-parent{
          opacity: 1;
          }
          
          J 1 Reply Last reply
          1
          • arminunruhA arminunruh

            maybe this is better, without js:

            #carousel-id .lay-carousel-sink-parent{
            opacity: 0;
            transition: opacity 1000ms ease;
            }
            
            #carousel-id:hover .lay-carousel-sink-parent{
            opacity: 1;
            }
            
            J Offline
            J Offline
            jotundes
            wrote on last edited by
            #5

            @arminunruh thank you! guess css even better and faster

            1 Reply Last reply
            1
            Reply
            • Reply as topic
            Log in to reply
            • Oldest to Newest
            • Newest to Oldest
            • Most Votes


            I also code custom websites or custom Lay features.
            šŸ’æ Email me here: šŸ’æ
            info@laytheme.com

            Before you post:
            1. When using a WordPress Cache plugin, disable it or clear your cache.
            2. Update Lay Theme and all Lay Theme Addons
            3. Disable all Plugins
            4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

            This often solves issues you might run into

            When you post:
            1. Post a link to where the problem is
            2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
            3. If the problem is difficult to explain, post screenshots / link to a video to explain it
            Online Users
            Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
            laytheme.com
            • Login

            • Don't have an account? Register

            • Login or register to search.
            • First post
              Last post
            0
            • Recent
            • Tags
            • Popular
            • Users
            • Search