Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding a Popup Slider to Your Website

Popup sliders combine the best elements of each namesake. Information is overlayed on top of your body content, thus preserving crucial space within your design.

We've written numerous times about ways you can preserve space within your design while simultaneously showcasing valuable content. Within the world of web design, some prefer to create content sliders while others prefer content overlays or popups. What is also feasible is to combine both techniques into a popup slider.

Popup sliders combine the best elements of each namesake. Information is only displayed upon user interaction and is overlayed on top of your body content, thus preserving crucial space within your design. Further, the slider allows you to include numerous sections that would otherwise have to be trimmed in traditional popup settings.

Using FlexSlider, you can create a popup slider that accompanies nearly any sectional. Below is all of the HTML, CSS, and JavaScript needed.

Step 1 - popup-slider.html

Copy and paste the code below into your web page

<section class="culture-section">
  <div class="container">
    <div class="col-md-8 col-md-offset-2">
      <h2>Slider Popup</h2>
      <h3>Easily Customized to Meet Your Needs</h3>
      <p>Create a unique slider embedded in a popup. Include valuable information while perserving space and optimizing your deisgn.</p>
    </div>
    <span class="btn btn-slider">Are You Ready?</span>
  </div>
</section>
                                              
<div class="sliderPop" style="display:none;">
  <div class="ct-sliderPop-container">
    <div class="ct-sliderPop ct-sliderPop-slide1 open">
      <div class="inner">
        <i class="fa fa-code" aria-hidden="true"></i>
        <h1>Code</h1>
        <div class="map-white-border"></div>
        <h2>Programming Not Required</h2>
        <p>WebCorpCo enables marketers to manage their entire stack in one place without needing the ability to program as all code is automatically written by webcorpco.</p>
        <a class="ct-newsletter-close ct-sliderPop-close" href="#">
        <img alt="close" src="https://www.solodev.com/assets/popup-slider/popup-close.png"></a>
      </div>
    </div>
    <div class="ct-sliderPop ct-sliderPop-slide2">
      <div class="inner">
        <i class="fa fa-paint-brush" aria-hidden="true"></i>
        <h1>Design</h1>
        <div class="map-white-border"></div>
        <h2>A Touch of Detail</h2>
        <p>With a team of award-winning designers behind every possible design and layout, you are sure to find success in our automated design process.</p>
        <a class="ct-newsletter-close ct-sliderPop-close" href="#">
        <img alt="close" src="https://www.solodev.com/assets/popup-slider/popup-close.png"></a>
      </div>
    </div>
    <div class="ct-sliderPop ct-sliderPop-slide3">
      <div class="inner">
        <i class="fa fa-users" aria-hidden="true"></i>
        <h1>Marketing</h1>
        <div class="map-white-border"></div>
        <h2>Marketing in Alignment</h2>
        <p>There is no 'one size fits all' approach to marketing. Every business is unique, customers are unique, and your marketing should be as well.</p>
        <a class="ct-newsletter-close ct-sliderPop-close" href="#">
        <img alt="close" src="https://www.solodev.com/assets/popup-slider/popup-close.png"></a>
      </div>
    </div>
    <div class="ct-sliderPop ct-sliderPop-slide1">
      <div class="inner">
        <i class="fa fa-life-ring" aria-hidden="true"></i>
        <h1>Support</h1>
        <div class="map-white-border"></div>
        <h2>Available 24/7</h2>
        <p>WebCorpCo offers state of the art support and training to enable users to make the most out of the platform and learn all of the functionality under the hood.</p>
        <a class="ct-newsletter-close ct-sliderPop-close" href="#">
        <img alt="close" src="https://www.solodev.com/assets/popup-slider/popup-close.png"></a>
      </div>
    </div>
    <div class="ct-sliderPop ct-sliderPop-slide2">
      <div class="inner">
        <i class="fa fa-university" aria-hidden="true"></i>
        <h1>Training</h1>
        <div class="map-white-border"></div>
        <h2>Take Control Yourself</h2>
        <p>Training can be "as requested" although there are regular webinars, code tutorials, and training courses offered for free on our website.</p>
        <a class="ct-newsletter-close ct-sliderPop-close" href="#">
        <img alt="close" src="https://www.solodev.com/assets/popup-slider/popup-close.png"></a>
      </div>
    </div>
  </div>
</div>

Step 2 - popup-slider.css

Download the CSS below and include it in your web page

popup-slider.css

Step 3 - popup-slider.js

Copy and paste the code below into a file called popup-slider.js

$( document ).ready(function() {
  $('.btn-slider').on('click', function() {
    $('.sliderPop').show();
    $('.ct-sliderPop-container').addClass('open');
    $('.sliderPop').addClass('flexslider');
    $('.sliderPop .ct-sliderPop-container').addClass('slides');

    $('.sliderPop').flexslider({
    selector: '.ct-sliderPop-container > .ct-sliderPop',
    slideshow: false,
    controlNav: false,
    controlsContainer: '.ct-sliderPop-container'
    });
  });

  $('.ct-sliderPop-close').on('click', function() {
    $('.sliderPop').hide();
    $('.ct-sliderPop-container').removeClass('open');
    $('.sliderPop').removeClass('flexslider');
    $('.sliderPop .ct-sliderPop-container').removeClass('slides');
  });
});

Step 4 - Add the includes below to your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/flexslider.min.css" rel="stylesheet">
<link href="popup-slider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<script src="popup-slider.js"></script>

The above code will create a popup slider that appears upon user interaction. Customize the content, change the colors, and make it yours. Happy designing!

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev