Get A Quote
Elementor

Quote Slider – Elementor Carousel Quote

Victor
June 11, 2025

Today, we’re making a quote slider that’s both elegant and lightweight. This carousel quote design combines stunning visuals with smooth functionality, perfect for showcasing inspiring quotes or testimonials.

Stay hungry. Stay foolish.

The only meat I eat is from animals I’ve killed myself.

Failure is an option here. If things are not failing, you are not innovating enough

As usual, we will use Elementor free version. No Elementor pro. No extra plugins. Just clean HTML with CSS and JavaScript. No worries about bloating your site due to heavy loads.

no elementor pro - no extra plugins

It is also fully responsive. So feel free to use it on your landing page.

It’s a carousel quote feature where each slide showcases an inspiring quote from icons like Steve Jobs, Mark Zuckerberg, or Elon Musk.

What’s cool? Each quote is paired with a background image that reflects the celebrity who said it—like an Apple vibe for Jobs or a SpaceX feel for Musk. This makes your quote slide design stand out and feel personal. The slider glides smoothly, giving your site a sleek, professional look. It’s fully responsive, so this quote slide template shines on any device.

Add this Elementor quote slider to your hero section for a bold first impression or in testimonials to build trust. It’s perfect for your WordPress site with quote slider WordPress simplicity:

  • Create three HTML blocks.
  • Paste the separate codes in it.

HTML

<div class="wputopia-wrapper">
  <div class="wputopia-container">
    <div id="wputopia-holder">
      <div id="wputopia-image">
        <div class="wputopia-img wputopia-jobs"></div>
        <div class="wputopia-img wputopia-zuck"></div>
        <div class="wputopia-img wputopia-musk"></div>
      </div>

      <div id="wputopia-right"></div>

      <div id="wputopia-text">
        <div id="wputopia-centerText">
          <p class="wputopia-quote">
            <i class='fa fa-quote-left'></i>Stay hungry. Stay foolish. <i class='fa fa-quote-right'></i>
          </p>
          <p class="wputopia-quote">
            <i class='fa fa-quote-left'></i> The only meat I eat is from animals I've killed myself.<i class='fa fa-quote-right'></i>
          </p>
          <p class="wputopia-quote">
            <i class='fa fa-quote-left'></i> Failure is an option here. If things are not failing, you are not innovating enough <i class='fa fa-quote-right'></i>
          </p>
        </div>

        <nav id="wputopia-nav">
          <a id="wputopia-leftBtn" class="wputopia-prev"><i class="fa fa-arrow-left"></i></a>
          <a id="wputopia-rightBtn" class="wputopia-next"><i class="fa fa-arrow-right"></i></a>
        </nav>
      </div>
    </div>

    <div id="wputopia-bg">
      <div class="wputopia-slide wputopia-jobs-bg"></div>
      <div class="wputopia-slide wputopia-zuck-bg" loading="lazy"></div>
      <div class="wputopia-slide wputopia-musk-bg" loading="lazy"></div>
    </div>

    <div id="wputopia-nav-cirlces">
      <div class="wputopia-circle"></div>
      <div class="wputopia-circle"></div>
      <div class="wputopia-circle"></div>
    </div>
  </div>
</div>

CSS

<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" media="print" onload="this.media='all'" />

<!-- Google Fonts with font-display: swap for better performance -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap' rel='stylesheet' type='text/css' media="print" onload="this.media='all'" />
<style>
/* Styles for the testimonial slider */
.wputopia-wrapper * {
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-drag: none;
	box-sizing: border-box !important;
}

.wputopia-wrapper {
	font-family: Roboto, Sans-serif;
  width: 100%;
  position: relative;
}

.wputopia-container {
	width: 100%;
	min-height: 500px;
	height: 100vh;
	position: relative;
	background: #e2e2e2;
	overflow: visible;
}

#wputopia-holder {
	max-width: 700px;
	width: 98%;
	min-height: 360px;
	height: 360px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#wputopia-image {
	width: 40%;
	height: 100%;
	float: left;
	position: relative;
	z-index: 200;
	box-shadow: 0px 40px 120px 0px rgba(0,0,0,.52);
	overflow: visible;
}

#wputopia-right {
	width: 60%;
	height: 100%;
	float: right;
	position: relative;
}

#wputopia-text {
	width: 60%;
	height: 320px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 100;
	background: rgba(255,255,255,.57);
	box-shadow: 0px 40px 120px 0px rgba(0,0,0,.52);
}

.wputopia-wrapper a {
	display: block;
	text-decoration: none;
	outline: none;
	outline-color: none;
}

#wputopia-nav {
	width: 140px;
	height: 50px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin: 0 0 -25px -70px;
	z-index: 1000;
	box-shadow: 0px 7px 24px 3px rgba(0,0,0,.52);
  display: block;
  border-radius: 25px;
  overflow: hidden;
  display:none;
}

#wputopia-leftBtn {
	width: 50%;
	height: 100%;
	float: left;
	color: rgba(255,255,255,.87);
	background: #2196F3;
	font-size: 25px;
	line-height: 200%;
	text-align: center;
	border-right: 1px solid rgba(255,255,255,.2);
	cursor: pointer;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#wputopia-rightBtn {
	width: 50%;
	height: 100%;
	float: right;
	color: rgba(255,255,255,.87);
	background: #2196F3;
	font-size: 25px;
	line-height: 200%;
	text-align: center;
	border-left: 1px solid rgba(255,255,255,.2);
	cursor: pointer;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#wputopia-leftBtn:hover, #wputopia-rightBtn:hover {
	color: #fff;
	background: #1976D2;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	transform: translateY(-2px);
}

#wputopia-nav-cirlces {
	width: 96px;
	height: 20px;
	position: absolute;
	bottom: 8%;
	left: 50%;
	margin-left: -50px;
	z-index: 1000;
}

.wputopia-circle {
	width: 20px;
	height: 100%;
	float: left;
	border-radius: 100%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	background-color: rgba(0, 0, 0, 0.2); /* Dark transparent background for hole effect */
	margin: 0 6px;
	cursor: pointer;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.wputopia-circle:hover {
	background-color: rgba(0, 0, 0, 0.3); /* Darker on hover */
	transform: scale(1.05);
	border-color: rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 3px 5px rgba(0,0,0,0.6), inset 0 -1px 1px rgba(255,255,255,0.1), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.fa-quote-left, .fa-quote-right {
	font-size: 30px;
	color: blue;
	position: absolute;
}

.fa-quote-left {
	top: 0;
	left: 10px;
}

.fa-quote-right {
	bottom: 0;
	right: 10px;
}

#wputopia-centerText {
	width: 100%;
	height: 200px;
	position: absolute;
	top: 20%;
	padding: 10px 0;
	overflow: visible;
}

.wputopia-wrapper p {	
	width: 100%;
	height: 150px;
	position: absolute;
	top: 45px;
	left: 0;
	right: -150px;
	bottom: 0;
	margin: auto;	
	font-size: 20px;
	line-height: 1.5;
	color: #232323;
	padding: 30px 25px 0;
	text-align: center;
	opacity: 0;
	-webkit-transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
	-moz-transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
	-o-transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
	transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
}

p.wputopia-quote.wputopia-active {
	right: 0;
	opacity: 1;
	background: transparent;
}

p.wputopia-quote:nth-child(2) {
	top: 25px;
}

.wputopia-circle.wputopia-active {
	background: rgba(33, 150, 243, 0.7); /* Material Design blue with transparency */
	transform: scale(1.1);
	border-color: white;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 5px rgba(33, 150, 243, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.wputopia-slide.wputopia-active,
.wputopia-img.wputopia-active,
p.wputopia-quote.wputopia-active {
	right: 0;
	opacity: 1;
}

.wputopia-img {
	width: 100%;
	height: 100%;
	position: absolute;
	right: -100%;
	background-position: center !important;
	background-size: cover;	
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 400;
	-webkit-transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
	-moz-transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
	-o-transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
	transition: all 2s cubic-bezier(.86,.3,.03,1), opacity .7s cubic-bezier(.86,.3,.47,1) .3s;
}

.wputopia-img.wputopia-active {
	right: 0;
	opacity: 1;
	z-index: 500;
}

.wputopia-jobs {
	background: #fff url(https://media.wputopia.com/storage/2025/06/11010146/Steve-Jobs.webp);
}

.wputopia-zuck {
	background: #fff url(https://media.wputopia.com/storage/2025/06/11010237/Mark-Zuckerberg.webp);
}

.wputopia-musk {
	background: #fff url(https://media.wputopia.com/storage/2025/06/11010357/Elon-Musk.webp);
}

#wputopia-bg {
	width: 100%;
	height: 100%;
	position: absolute;
}

.wputopia-slide {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;	
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;	
}

.wputopia-slide.wputopia-active {
	opacity: 1;
}

.wputopia-jobs-bg {
	background: #fff url(https://wallpapercave.com/wp/9sUHw62.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.wputopia-zuck-bg {
	background: #fff url(https://wallpapercave.com/wp/wp2126143.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.wputopia-musk-bg {
	background: #fff url(https://wallpapercave.com/wp/wp14096246.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Container queries instead of media queries */
@container (max-width: 700px) {
	#wputopia-centerText p {
		font-size: 18px;
	}
}

@container (max-width: 750px) {
	#wputopia-centerText {
		padding: 5px 0;
	}
}

@container (max-width: 580px) {
	#wputopia-centerText p {
		font-size: 16px;
	}
}

@container (max-width: 580px) {
	#wputopia-holder {
		max-width: 700px;
		width: 100%;
		min-height: 360px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.wputopia-img {
		background-position: top center !important;
	}
	
	#wputopia-image {
		width: 220px;
		height: 250px;
		float: left;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -280px;
		margin-left: -110px;
	}
	
	#wputopia-right {
		width: 100%;
		height: 100%;
		float: right;
		position: relative;
	}
	
	#wputopia-text {
		width: 90%;
		height: 320px;
		position: absolute;
		top: 150px;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	#wputopia-nav-cirlces {
		display: block;
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1000;
	}
	
	#wputopia-centerText {
		width: 100%;
		height: 200px;
		position: absolute;
		top: 30%;
		margin-top: -100px;
		padding: 150px 0 !important;
		overflow: visible;
	}
}

@container (max-width: 450px) {
	#wputopia-image {
		width: 200px;
		height: 230px;
		float: left;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -250px;
		margin-left: -100px;
	}

	#wputopia-text {
		width: 100%;
		height: 320px;
		position: absolute;
		top: 150px;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	#wputopia-nav-cirlces {
		display: block;
	}
	
	#wputopia-centerText {
		width: 100%;
		height: 200px;
		position: absolute;
		top: 30%;
		margin-top: -100px;
		padding: 100px 0 !important;
		overflow: visible;
	}
	
	#wputopia-centerText p {
		font-size: 14px;
		padding: 0 15px;
		height: 170px;
	}
	
	.fa-quote-left, .fa-quote-right {
		font-size: 20px !important;
	}
	
	.fa-quote-left {
		top: 5px !important;
		left: 5px !important;
	}
	
	.fa-quote-right {
		bottom: 5px !important;
		right: 5px !important;
	}
}
</style>

JS

<script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script type="text/javascript">
//<![CDATA[
// Initialize the slider when jQuery is loaded
document.addEventListener('DOMContentLoaded', function() {
  // Wait for jQuery to load
  var checkJQuery = setInterval(function() {
    if (window.jQuery) {
      clearInterval(checkJQuery);
      initSlider();
    }
  }, 100);
  
  // Initialize the slider
  function initSlider() {
    jQuery(".wputopia-circle")
      .first()
      .addClass("wputopia-active");
    jQuery("#wputopia-bg .wputopia-slide")
      .first()
      .addClass("wputopia-active");
    jQuery("#wputopia-image .wputopia-img")
      .first()
      .addClass("wputopia-active");
    jQuery(".wputopia-quote")
      .first()
      .addClass("wputopia-active");

    var animate = setInterval(function() {
      var currentActiveBubble = jQuery("#wputopia-nav-cirlces").find(".wputopia-active");
      var position = jQuery("#wputopia-nav-cirlces")
        .children()
        .index(currentActiveBubble);
      var num = jQuery(".wputopia-circle").length;

      if (position < num - 1) {
        jQuery(".wputopia-active")
          .removeClass("wputopia-active")
          .next()
          .addClass("wputopia-active");
      } else {
        jQuery(".wputopia-circle")
          .removeClass("wputopia-active")
          .first()
          .addClass("wputopia-active");
          
        jQuery("#wputopia-bg .wputopia-slide")
          .removeClass("wputopia-active")
          .first()
          .addClass("wputopia-active");
          
        jQuery("#wputopia-image .wputopia-img")
          .removeClass("wputopia-active")
          .first()
          .addClass("wputopia-active");
          
        jQuery(".wputopia-quote")
          .removeClass("wputopia-active")
          .first()
          .addClass("wputopia-active");
      }
    }, 4500);

    jQuery(".wputopia-circle").click(function() {
      clearInterval(animate);

      var $this = jQuery(this);
      var $siblings = $this.parent().children();
      var position = $siblings.index($this);

      jQuery(".wputopia-circle")
        .removeClass("wputopia-active");
      jQuery(".wputopia-circle")
        .eq(position)
        .addClass("wputopia-active");
        
      jQuery("#wputopia-bg .wputopia-slide")
        .removeClass("wputopia-active");
      jQuery("#wputopia-bg .wputopia-slide")
        .eq(position)
        .addClass("wputopia-active");
        
      jQuery("#wputopia-image .wputopia-img")
        .removeClass("wputopia-active");
      jQuery("#wputopia-image .wputopia-img")
        .eq(position)
        .addClass("wputopia-active");
        
      jQuery(".wputopia-quote")
        .removeClass("wputopia-active");
      jQuery(".wputopia-quote")
        .eq(position)
        .addClass("wputopia-active");
    });

    jQuery("#wputopia-rightBtn, #wputopia-leftBtn").click(function() {
      clearInterval(animate);

      var $this = jQuery(this);
      var currentActiveBubble = jQuery("#wputopia-nav-cirlces").find(".wputopia-active");
      var position = jQuery("#wputopia-nav-cirlces")
        .children()
        .index(currentActiveBubble);
      var num = jQuery(".wputopia-circle").length;

      if ($this.hasClass("wputopia-next")) {
        if (position < num - 1) {
          jQuery(".wputopia-active")
            .removeClass("wputopia-active")
            .next()
            .addClass("wputopia-active");
        } else {
          jQuery(".wputopia-circle")
            .removeClass("wputopia-active")
            .first()
            .addClass("wputopia-active");
            
          jQuery("#wputopia-bg .wputopia-slide")
            .removeClass("wputopia-active")
            .first()
            .addClass("wputopia-active");
            
          jQuery("#wputopia-image .wputopia-img")
            .removeClass("wputopia-active")
            .first()
            .addClass("wputopia-active");
            
          jQuery(".wputopia-quote")
            .removeClass("wputopia-active")
            .first()
            .addClass("wputopia-active");
        }
      } else {
        if (position === 0) {
          jQuery(".wputopia-circle")
            .removeClass("wputopia-active")
            .last()
            .addClass("wputopia-active");
            
          jQuery("#wputopia-bg .wputopia-slide")
            .removeClass("wputopia-active")
            .last()
            .addClass("wputopia-active");
            
          jQuery("#wputopia-image .wputopia-img")
            .removeClass("wputopia-active")
            .last()
            .addClass("wputopia-active");
            
          jQuery(".wputopia-quote")
            .removeClass("wputopia-active")
            .last()
            .addClass("wputopia-active");
        } else {
          jQuery(".wputopia-active")
            .removeClass("wputopia-active")
            .prev()
            .addClass("wputopia-active");
        }
      }
    });
    
    // Implement lazy loading with IntersectionObserver
    if ('IntersectionObserver' in window) {
      const lazyImages = document.querySelectorAll('.wputopia-slide:not(.wputopia-active)');
      
      const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            // Load background image if needed
            observer.unobserve(img);
          }
        });
      });
      
      lazyImages.forEach(img => {
        imageObserver.observe(img);
      });
    }
  }
});
//]]>
</script>

That’s it. Easy-peasy.

If you like it, don’t forget to subscribe and comment.

Support My Work

If you enjoy my content, consider buying me a coffee or shopping through my Rakuten link to support me!

Buy Me a Coffee Shop with Rakuten

Victor

Founder of WPUtopia.com🕵️I would appreciate it if you could leave me a comment!

Website
Related Articles

You May Also Like

Material Carousel

Material Carousel with A Punched-hole Effect

Today, we’re making a material carousel. Use it in your hero section or testimonial area...

Read More
Auto Transition Thumbnails Slider for Travel Blogs

Auto Transition Thumbnails Slider for Travel Blogs

Today, we’re making a thumbnails slider. Place it in your hero section for a bold...

Read More
[Thumbnail Slider]SmoothZoom Image Carousel in Elementor

[Thumbnail Slider]SmoothZoom Image Carousel in Elementor

Today, we’re making a SmoothZoom Thumbnail Slider. As usual, we will use Elementor free version....

Read More

Send Message

Chat with me

Start a Conversation

Hi! Let's connect on your preferred platform.

WhatsApp Fiverr Upwork
Victor Avatar