How to create dynamic, responsive image slider with PHP, mysqli, bootstrap and jQuery ?

Description :- In this lesson I’m gonna provide the code from which you guys can easily make fully Dynamic Carousel  Silder from which you’ll fetch image name from database and images from your img folder.

Establishing Database:-
Now, I know that you all guys know how to create new database and name it slider after this create new table and name it images and make 2 rows
(i) id
(ii) img 
And then insert your image name with extension into the img row .

Now follow some simple steps for setting up everything which we need for this lesson:-
1. Download the bootstrap
2. Download jquery file from jquery.com
2. Create a new folder and rename it as img and put some images in it.
3. Create a new folder and rename it as css and make app.css in the css folder
4. Create an index.php file
5. Create config.php file (the connection file to our database)

1. config.php   (the connection file)

<?php
$con = mysqli_connect("localhost","root","","slider");
if(mysqli_errno($con))
{
 echo mysqli_error(); 
}
?>

2. index.php  (the file where your silder code lives with some jquery lines)

There are some problems with wordpress text editor so I’m providing pdf of index.php copy from pdf and make index.php
Copy code from this link

3. app.css   (lives in css folder)

.

a.carousel-control {
 opacity: 1;
 height: inherit;
 width: inherit;
 background: none;
 text-shadow: none;

}
.prevSlide
{
 color: #f5f5f5;
 font-size: 2em;
 position: absolute;
 top: 50%;
 left: 0;
 background-color:rgba(0,0,0,0.5);
 transform: translate(0,-50%);
 padding: 0 10px;
}
.prevSlide:hover
{
 color:rgba(247,148,30,1);
 background-color:rgba(0,0,0,0.8);
}
.nextSlide
{
 color: #f5f5f5;
 font-size: 2em;
 position: absolute;
 top: 50%;
 right: 0;
 background-color:rgba(0,0,0,0.5);
 transform: translate(0,-50%);
 padding: 0 10px;
}
.nextSlide:hover
{
 color:rgba(247,148,30,1);
 background-color:rgba(0,0,0,0.8);
}

*Note:- My final product screenshot is this except the images in the slider you will get the same result.

Thanks 🙂

slider

index

Advertisements

How to make fully responsive Character Counter through jQuery?

Description:- Through this example you can easily made your own character counter through jQuery. Character counter will count your characters which you are typing in the given textarea or any where you want. Hence I made this by using Bootstrap so don’t forget to include three main bootstrap files in your head tag.

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Character count by Webtechball</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $("#characters").keyup(function(){
        var a = $("#characters").val();
        var b = a.length;
        document.getElementById("count").innerHTML=b;
    });
});
</script>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-md-4"></div>
      <div class="col-md-4">
    <form role="form">
        <div class="form-group">
            <label for="Message">Message</label>
            <textarea class="form-control" rows="5" id="characters"></textarea>
            <div id="count"></div>
        </div>
    </form>
    </div>
    <div class="col-md-4"></div>
</div>
</body>
</html>