Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • October 30, 2025 at 5:06 pm #1490757
    steviger

    Hi guys,

    My designer came up with this idea of sliding content to show several images with text. When clicked the image + text should slide to the next image with an different text. I tried the content slider with 2 seperate divs in the code but that didn’t quite work for me. Let alone that it is not responsive and not really user-friendly for my customer. Are there any of you who could help me out with some tips and tricks or an existing plug-in?

    Here’s the visual idea

    Don’t focus so much on the icon and dimensions. It’s about the technique and the placement of the elements.

    Regards,

    Steven

    • This topic was modified 18 hours, 51 minutes ago by steviger.
    October 31, 2025 at 6:59 am #1490793
    Ismael

    Hey steviger,

    Thank you for the inquiry.

    You can continue using the Content Slider element. Add the following html in the editor:

    
<div class="av-flex-container">
<div class="av-image-column">
    <img src="http://site.com/image.jpeg" alt="Sample Image" /></div>
<div class="av-text-column">
<h2>Title Here</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna at sapien tempor dictum.

</div>
</div>

    Then add this css code to create a container with two columns, an image on the left and a title with text on the right.

    
.av-flex-container {
  display: flex;
  width: 100%;
  height: 400px;
  flex-wrap: wrap;
}

.av-image-column {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.av-image-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.av-text-column {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f5f5f5;
}

@media (max-width: 768px) {
  .av-flex-container {
    flex-direction: column;
    height: auto;
  }

  .av-image-column,
  .av-text-column {
    flex: 1 1 100%;
    height: auto;
  }

  .av-image-column img {
    height: 250px;
  }

  .av-text-column {
    padding: 20px;
  }
}

    Screenshot-2025-10-31-at-1-59-55-PM

    Best regards,
    Ismael

    October 31, 2025 at 11:58 am #1490806
    steviger

    Hi Ismael,

    Thank you so much, that’s awesome! I do get the CSS (almost …) but I have 2 questions. I know I said not to look at the dimensions but still:

    1. How can I place the text at the bottom like in my example? I guess it must be in .av-text-column but justify-content: center bottom doesn’t work
    2. Where/how can I change the proportions? Let’s say image 70% text 30%

      3. Best regards,
      Steven

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.