Features Slider

Developer
Kdooley
Size
2,627 Kb
Views
16,192
  1. Features Slider Previews
  2. Features Slider HTML Codes
  3. Features Slider CSS Codes
  4. Features Slider JS Codes

How do I make an features slider?

What is a features slider? How do you make a features slider? This script and codes were developed by Kdooley on 25 September 2022, Sunday.

Features Slider Previews
IQ Test

Features Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Features Slider</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--APM BUILD CODE--> <!--products container--> <div class="container capabilities"> <a id="features">&nbsp;</a> <h2 class="text-center apm-capabilities">KEY CAPABILITIES</h2> <div class="feature-wrap"> <div class="col-lg-4 col-md-6 col-sm-6 ft-one"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature One</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 ft-two"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Two</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 ft-three"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Three</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 ft-four"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Four</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Five</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Six</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Seven</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Eight</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <br> <img class="img-responsive" src="http://placehold.it/150x150"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 apm-grid"> <h3>Feature Nine</h3> <p>Available and health of physical, virtual and cloud machines</p> </div> </div> </div> <!--More Detailed Descriptons In here-->
<div class="col-lg-12 ft-1-description"> <div class="col-lg-5"> <h2>Does Your Team Succeed?</h2> <p>If not we've got the solutions for you.</p> </div> <div class="col-lg-7"> <img class="img-responsive" src="http://placehold.it/1440x350&text=FT-1"> </div>
</div>
<div class="col-lg-12 ft-2-description"> <img class="img-responsive" src="http://placehold.it/1440x350&text=FT-2">
</div>
<div class="col-lg-12 ft-3-description"> <img class="img-responsive" src="http://placehold.it/1440x350&text=FT-3">
</div>
<div class="col-lg-12 ft-4-description"> <img class="img-responsive" src="http://placehold.it/1440x350&text=FT-4">
</div>
<!--end details </div> <!--end container here--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Features Slider - Script Codes CSS Codes

.ft-1-description, .ft-2-description, .ft-3-description, .ft-4-description { display: none;
}

Features Slider - Script Codes JS Codes

$(document).ready(function(){ //Feature One //switch feature One on click $(".ft-one").click(function(){ $(".feature-wrap").fadeOut(300); }); $(".ft-one").click(function(){ $(".ft-1-description").fadeIn(300); }); //switches feature One back on click $(".ft-1-description").click(function(){ $(".ft-1-description").fadeOut(300); }); $(".ft-1-description").click(function(){ $(".feature-wrap").fadeIn(300); });
});
Features Slider - Script Codes
Features Slider - Script Codes
Home Page Home
Developer Kdooley
Username kdooley89
Uploaded September 25, 2022
Rating 3
Size 2,627 Kb
Views 16,192
Do you need developer help for Features Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kdooley (kdooley89) Script Codes
Name
Fixed-Background-Panels
Color Swatches
Leadership Bio Buildout
Image-Slider in laptop screen
DoorChampion Login Page
Flat buttons for Eliassen.com
Testimonials Compuware layout
A Pen by Kdooley
DevOps Submenu
Customer-Story-Inside
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!