Creating an Action Grid Slider on your Website
There are times where you need to present your users with clear, quick actions. Although these links will vary depending on your specific content, they can be as simple as various “Learn More”, “Purchase”, or “Book” links. By providing immediate access to these popular links and actions, you better serve your users and help faciliate engagement.
A common dilemma that often arises is that you do not have enough space available to dedicate to all of your specific links. In such a situation, you can easily implement (1) a grid based container and (2) a slider to handle overflow sections. Combined, this will create a contemporary action grid slider that presents all availble links to an end user.
Using Bootstrap and Slick Slider, you can customize your own action grid slider. Below is all of the necessary HTML, CSS, and JavaScript to get you started.
Below is the HTML, CSS, and JavaScript required.
Step 1 — action-grid-slider.html
Copy and paste the code below into your web page
<div class="text-right ct-box-slider__arrows clearfix">
<button id="ct-js-box-slider--next" type="button" class="pull-right slick-arrow"><img alt="Previous" src="https://www.solodev.com/assets/action-grid-slider/arrow-next.jpg" alt="Arrow Next"></button>
<button id="ct-js-box-slider--prev" type="button" class="pull-right slick-arrow"><img alt="Next" src="https://www.solodev.com/assets/action-grid-slider/arrow-prev.jpg" alt="Arrow Prev"></button>
</div><div class="ct-box-slider ct-js-box-slider">
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-calendar"></i><span>View Upcoming Events</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-users"></i><span>Connect with Others</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-ticket"></i><span>Purchase Tickets</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-plane"></i><span>Book a Flight</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-cutlery"></i><span>Dining Reservations</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-ship"></i><span>Book a Cruise</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-graduation-cap"></i><span>Find Tutorials</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-free-code-camp"></i><span>Enroll in Code Camp</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-file-code-o"></i><span>Source Code Descriptions</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-bar-chart"></i><span>Learn About Analytics</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-universal-access"></i><span>Learn About Accessibility</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div onclick="location.href='#'" class="ct-box">
<div class="inner" role="presentation"><i class="fa fa-wpforms"></i><span>Contact Webmaster</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
Step 2 — action-grid-slider.css
Download the CSS below and include it in your web page
Step 3 — action-grid-slider.js
Copy and paste the code below into a file called product-tabs.js
$(document).ready(function(){
$('.ct-box-slider').slick({
autoplay: true,
autoplaySpeed: 4000,
arrows: false,
});
$('#ct-js-box-slider--prev').on('click', function() {
$('.ct-js-box-slider').slick('slickPrev');
});
$('#ct-js-box-slider--next').on('click', function() {
$('.ct-js-box-slider').slick('slickNext');
});
});Note: You can configure Slick Slider settings to match any desired effect. Consult with the official Slick Slider documentation for more details.
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/slick-carousel/1.6.0/slick.min.css" rel="stylesheet">
<link href="action-grid-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/slick-carousel/1.6.0/slick.min.js"></script>
<script src="action-grid-slider.js"></script>The above HTML, CSS, and JavaScript creates a styled action grid slider designed with the end user in mind. Feel free to customize the css to match the colors of your site. Use Font Awesome icons (or your own custom graphics) to match the content of your links. Configure Slick Slider options so that you have total control over how the slider operates. Enjoy!
Originally Posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
