Custom HTML Block Image slider displays image small

snehanshumandal
(@snehanshumandal)

21 hours, 50 minutes ago

I have developed a custom image slider with CTA buttons block with html+css+jscript. Images display fine in preview but image displays very small while in live

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Kris – WPMU DEV Support

(@wpmudevsupport13)

21 hours, 45 minutes ago

Hi @snehanshumandal

I see your home page has 2 sliders. Which one we talk about here, so we can be on the same page with the main issue?

Kind Regards,
Kris

Thread Starter

snehanshumandal

(@snehanshumandal)

20 hours, 24 minutes ago

Thanks for checking ths out. Both slider has the problem. Here, I spoke about the first one , the top one, where if you notice, Picture is now coming horizontally wide but the vertically truncated .

The 2nd one , the bottom one is more of a icon carousel, displaying some cmpany’s icon. Problem is that Icons are small but the container is taking huge space

Thread Starter

snehanshumandal

(@snehanshumandal)

20 hours, 19 minutes ago

<!-- Include Swiper CSS & JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<!-- Slider HTML -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
  
    <!-- Slide 1: Business Central Consulting -->
    <div class="swiper-slide">
      <img src="https://www.dynaexperts.com/wp-content/uploads/2025/03/DALL·E-2025-03-10-21.58.09-A-minimalist-and-artistic-vector-style-illustration-for-the-Business-Central-Consulting-slide-of-a-technology-consulting-website.-The-image-should-d.webp" alt="Business Collaboration">
      <div class="slide-content">
        <h2>Expert Business Central Consulting for Your Success</h2>
        <p>Helping businesses streamline operations, optimize workflows, and maximize Business Central's potential.</p>
        <a href="https://www.dynaexperts.com/contact" class="cta-button">Explore Our Services</a>
      </div>
    </div>

    <!-- Slide 2: Business Central Training -->
    <div class="swiper-slide">
      <img src="https://www.dynaexperts.com/wp-content/uploads/2025/03/DALL·E-2025-03-09-15.22.43-A-casual-business-trainer-wearing-a-smart-t-shirt-leading-an-interactive-workshop.-The-trainer-is-engaging-with-a-group-of-professionals-sitting-arou.webp">
      <div class="slide-content">
        <h2>Comprehensive Business Central Training for Every Need</h2>
        <p>Technical, administration, AppSource, and custom training to empower your team.</p>
        <a href="https://www.dynaexperts.com/training" class="cta-button">Explore Training Programs</a>
      </div>
    </div>
    
    <!-- Slide 3: AppSource App Development -->
    <div class="swiper-slide">
      <img src="https://www.dynaexperts.com/wp-content/uploads/2025/03/DALL·E-2025-03-09-15.22.53-A-business-professional-in-a-smart-casual-outfit-working-on-a-laptop-developing-an-app-for-Microsoft-AppSource.-The-scene-is-a-relaxed-office-setting.webp">
      <div class="slide-content">
        <h2>Bring Your App to Microsoft AppSource</h2>
        <p>From development to publication, we help you launch successful apps.</p>
        <a href="https://www.dynaexperts.com/appsource" class="cta-button">Start Your App Journey</a>
      </div>
    </div>
    
    <!-- Slide 4: Custom Solution Development -->
    <div class="swiper-slide">
      <img src="https://www.dynaexperts.com/wp-content/uploads/2025/03/DALL·E-2025-03-09-15.23.00-A-team-of-developers-in-a-casual-office-setting-working-on-Business-Central-extensions.-They-are-wearing-smart-casual-attire-and-collaborating-around.webp">
      <div class="slide-content">
        <h2>Tailored Business Central Solutions for Your Needs</h2>
        <p>Address gaps, enhance functionality, and integrate seamlessly.</p>
        <a href="https://www.dynaexperts.com/custom-solutions" class="cta-button">Get a Custom Solution</a>
      </div>
    </div>
  </div>

  <!-- Pagination & Navigation -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- Swiper JS Initialization -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  var swiper = new Swiper(".mySwiper", {
    loop: true,
    autoplay: {
      delay: 8000, // Slide changes every 5 seconds
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});
</script>

<!-- Styling for Slide Content and CTA (Left Aligned, Vertically Centered) -->
<style>
.swiper {
  width: 100%;
  height: 600px; /* Adjust height as needed */
  position: relative;
}
.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensures no overflow issues */
}

.swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ensures it fills the container */
    object-position: center !important; /* Centers the image */
    display: block;
}
.slide-content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 30px;
  text-align: left;
  width: 40%;
  border-radius: 10px;
}
.slide-content h2 {
  margin: 0;
  font-size: 32px;
  font-weight: bold;
}
.slide-content p {
  margin: 15px 0;
  font-size: 18px;
}
.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background: #ff7b00;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background 0.3s;
}
.cta-button:hover {
  background: #d66a00;
}

/* Responsive Styling */
@media (max-width: 768px) {
  .swiper {
    height: 450px;
  }
  .slide-content {
    width: 80%;
    left: 5%;
  }
  .slide-content h2 {
    font-size: 24px;
  }
  .slide-content p {
    font-size: 16px;
  }
  .cta-button {
    padding: 10px 20px;
    font-size: 16px;
  }
}
</style>

Thread Starter

snehanshumandal

(@snehanshumandal)

20 hours, 18 minutes ago

Code for the bottom Icon Carousel

<!-- Include Swiper CSS & JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<!-- Client Logo Carousel -->
<div class="swiper client-swiper">
  <div class="swiper-wrapper">
    
    <!-- Company 1 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/Teqymind-logo.jpg" alt="TeqyMinds, Dubai">
        
      </div>
    </div>

    <!-- Company 2 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/direction_software_solutions_logo.jpg" alt="Direction, India">
        
      </div>
    </div>

    <!-- Company 3 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/QA-Logo.jpg" alt="Queue Associates, USA">
        
      </div>
    </div>

    <!-- Company 4 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/Microsoft-Logo-1.png" alt="Microsoft, USA, Europe, India">
        
      </div>
    </div>

    <!-- Company 5 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/sfo_technologies_logo.jpg" alt="Nest, India">
        
      </div>
    </div>

    <!-- Company 6 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/MakeMyTrip.png" alt="MakeMyTrip, India">
        
      </div>
    </div>

    <!-- Company 7 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/l-t-infotech-vector-logo-300x300-1.png" alt="LnT Infotech, India">
        
      </div>
    </div>

    <!-- Company 8 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/IBM-Logo.svg" alt="IBM, India">
        
      </div>
    </div>

    <!-- Company 9 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/Aon-Hewitt.webp" alt="Aon Hewitt, India">
        
      </div>
    </div>

    <!-- Company 10 -->
    <div class="swiper-slide">
      <div class="logo-container">
        <img src="https://www.dynaexperts.com/wp-content/uploads/2024/10/ecosys-Hexagon.webp" alt="Hexagon, India">
        
      </div>
    </div>

  </div>

  <!-- Pagination & Navigation -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- Swiper JS Initialization -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  var swiper = new Swiper(".client-swiper", {
    loop: true,
    autoplay: {
      delay: 3000, // Changes logos every 3 seconds
    },
    slidesPerView: 4, // Adjust number of visible logos
    spaceBetween: 20,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      1024: { slidesPerView: 4 },
      768: { slidesPerView: 3 },
      480: { slidesPerView: 2 }
    }
  });
});
</script>

<!-- Styling for Client Logo Carousel (Fixed Layout & Alignment) -->
<style>
.client-swiper {
  width: 100%;
  padding: 40px 0;
  background: #f9f9f9;
  text-align: center;
  position: relative;
}
.swiper-wrapper {
  display: flex;
  align-items: center;
}
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px; /* Ensures consistent height */
}
.swiper-slide img {
  width: 120px;
  height: auto;
  max-height: 80px;
  margin-bottom: 5px;
}
.logo-container p { /* Ensures text is correctly positioned */
  font-size: 14px;
  color: #333;
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
  white-space: nowrap;
}
.swiper-button-prev, .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}
</style>

WP clinic

(@assistenzawpclinic)

18 hours, 36 minutes ago

For the first slider check out the css style of swiper for the img tag.

.swiper-slide img {
width: 120px;
height: auto;
max-height: 80px;
margin-bottom: 5px;
}

Max height attribute is set to 80px, that’s your problem.

You can remove the attribute from the original class or override the CSS class like this:
.swiper-slide img {
max-height: 100% !important;
}

It works in browser but, of course, I have not tested this.

For the second slider please note the height attribute in your CSS at line 273:

.swiper {
width: 100%;
height: 600px;
position: relative;
}

Change the height: 600px; into inherit or set a reasonable value and it should work.

Thread Starter

snehanshumandal

(@snehanshumandal)

9 hours, 14 minutes ago

Amazing. Now I realised, the css for the 2nd slider is actually disturbing the first slider’s display. Because they all have the same names. I just removed the 2nd slider [the bottom one] and it started working fine.

I am novice to wordpress development. Now for the 2nd slider. changig the namingof the elements will stop interfering the first slider?

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Custom HTML Block Image slider displays image small

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics